HTMLとCSSでプレゼンテーションスライドを作成する方法

新しいプレゼンテーションソフトウェアを学ぶのにうんざりしていませんか？ 既存のWeb開発スキルを活用してください！このチュートリアルでは、HTML、CSS、およびJavaScriptだけを使用して、見事なインタラクティブなプレゼンテーションを構築する方法を示しています。これは、すでに知っているコアWebテクノロジーです。最新のHTML5でスライドを構成し、CSSでスタイルを整え、JavaScriptを使用して動的効果を追加します。

この初心者向けガイドは、実用的なプロジェクトを通じてHTML5、CSS、およびJavaScriptスキルを構築するのに最適です。 動的なHTML5スライドデッキやJavaScriptを搭載したPPTの代替品を作成することもできます！

最終プレゼンテーションのプレビュー：

準備ができていますか？飛び込みましょう。

1。プロジェクトのセットアップ

最初に、これらのファイルを使用してシンプルなプロジェクトディレクトリを作成します：

• index.html
• css/style.css
• js/scripts.js
これらのファイルは最初は空になります。

2。基本的なhtml構造（

）index.html 次のコードを

ファイルに追加します。これには、フォントの素晴らしいアイコン（スタイリング用）、スタイルシート、JavaScriptファイルが含まれます。

index.htmlクラスがプレゼンテーションを開催します。<div> <code>container 実際のスライドコンテンツは、後でjavaScriptを使用して

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Presentation</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer">
<div class="container">
    <div id="presentation-area"></div>
</div>

div内に追加されます。

クラス（CSSで定義）は、どのスライドが表示されるかを制御します。 presentation-area.show3。 css（

）

を使用したスタイリング style.cssCSSは、視覚的なプレゼンテーションとスライドの遷移を処理します。 クラスを使用して画面の向きを管理します（フルスクリーンの場合は0、小さな画面には1）。

（0に初期化）は、スライド数を追跡します。 （注：完全なCSSとJavaScriptコードはここに含まれていないほど広すぎますが、以下のスニペットは重要な機能を示しています。完全なコードについては、オリジナルを参照してください。）

screenStatus4。 javaScript機能（totalSlides）

JavaScriptは、スライドナビゲーションとフルスクリーンモードを処理します。 重要な関数には以下が含まれます

• moveToLeftSlide()およびmoveToRightSlide()：これらの関数は、適切なスライドに.showクラスを削除して追加することにより、スライドトランジションを管理します。
• およびfullScreenMode()：これらのフルスクリーンモードを切り替えます。smallScreenMode()
• およびhideLeftButton()：これらは、最初または最後のスライドでナビゲーションボタンを非表示にします。 hideRightButton()
：現在のスライド番号を更新します
• getCurrentSlideNo()：現在のスライド番号が表示されます。
• setSlideNo()：変数を初期化し、イベントリスナーをセットアップします。 この関数は、各スライド遷移後に呼び出されます
• このアプローチはJavaScriptを使用してスライドの可視性を動的に管理し、インタラクティブなプレゼンテーションを作成するためのクリーンで効率的な方法を提供します。 完全に機能するプレゼンテーションのために、オリジナルの完全なCSSとJavaScriptコードを含めることを忘れないでください。 init()このチュートリアルは、より複雑で視覚的に魅力的なHTMLプレゼンテーションを構築するための基盤を提供します。 アニメーション、トランジション、およびより高度なJavaScript機能を追加して、スライドデッキを強化してさらに探索してください。