HTML、CSS、JavaScript を使用してシンプルな画像ギャラリーを作成する方法

HTML、CSS、JavaScript を使用してシンプルな画像ギャラリーを作成する方法

HTML、CSS、および JavaScript を使用して単純な画像ギャラリーを作成することは、Web 開発の基礎を学ぶのに最適な方法です。画像ギャラリーでは、サムネイルを選択して画像をフリックし、ウェブページ上の画像を拡大できます。

ギャラリーを作成するには、HTML を使用して Web ページのコンテンツを追加し、CSS を使用してスタイルを追加します。JavaScript を使用して、ユーザーがいずれかのサムネイルをクリックしたときにギャラリーをインタラクティブにすることができます。

HTML と CSS を使用して、画像ギャラリーの UI を追加します。これには、Web ページの中央に大きな画像を追加することが含まれます。これは、選択したサムネイルに基づいて変化します。GitHub で完全なサンプル ソース コードを表示することもできます。

  1. 「index.html」という名前の新しいファイルを作成します。
  2. このファイル内に、基本的な HTML コード構造を追加します。 <!doctype html>
    <html lang="en-US">
      <head>
        <title>Image Gallery</title>
      </head>
      <body>
        <div class="intro">
          <h2>Image Gallery</h2>
          <p>Select a thumbnail below to view the image</p>
        </div>
      </body>
    </html>
  3. 「images」というサブフォルダーを作成します。いくつかの画像を入力し、「image1.jpg」から「image10.jpg」までの名前を付けます。
    フォルダー内の画像を含むファイルマネージャー
  4. HTML ファイルに、画像ギャラリーの div を追加します。 <div id="image-gallery">

    </div>

  5. 画像ギャラリー div 内に画像タグを追加して、選択した画像を拡大して表示します。デフォルトでは、「images」フォルダー内の最初の画像を表示します。 <img id="current-image" src="images/image1.jpg" alt="Image 1">
  6. HTML ファイルと同じフォルダーに、次の CSS を含む「styles.css」という新しいファイルを追加します。これらの CSS のヒントとコツを使用して、自由に CSS を変更してニューモーフィック デザイン コンポーネントを追加したり、その他のデザインを微調整したりしてください。
  7. .intro {
      text-align: center;
      font-family: Arial;
    }

    h2 {
      font-size: 36px;
    }

    p {
      font-size: 14pt;
    }

    #image-gallery {
      width: 600px;
      margin: 0 auto;
    }

    #current-image {
      width: 100%;
    }

  8. HTML ファイルの head タグに CSS ファイルへのリンクを追加します。 <link rel="stylesheet" type="text/css" href="styles.css">

現在、画像ギャラリーには最初の画像のみが表示されます。選択した画像の下に、サムネイルのリストを追加します。これらのサムネイルには、「images」フォルダ内のすべての画像のプレビューが表示されます。

  1. HTML ファイルの画像ギャラリー div 内に別の div を追加して、他の画像のサムネイルを表示します。 <div id="image-thumbs"></div>
  2. CSS ファイル内で、サムネイルのリストのスタイルを追加します。 #image-thumbs {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  3. HTML および CSS ファイルと同じフォルダーに、「script.js」という新しいファイルを追加します。
  4. HTML body タグの下部に JavaScript ファイルへのリンクを追加します。 <body>
      <!-- Your code here -->
      <script src="script.js"></script>
    </body>
  5. JavaScript ファイル内で、サムネイルのリストを格納する div の HTML 要素を取得します。 var imageThumbs = document.getElementById("image-thumbs");
  6. ギャラリー内の 10 個の画像をそれぞれループする for ループを追加します。 for (var i = 1; i <= 10; i++) {

    }

  7. ループ内で、画像ごとに新しい img 要素を作成します。 var thumb = document.createElement("img");
  8. 「src」および「alt」属性の値を追加します。この場合、「src」属性は、「images」フォルダー内の同じインデックスにある画像へのファイル パスです。 thumb.src = "images/image" + i + ".jpg";
    thumb.alt = "Image " + i;
  9. CSS ファイル内に新しいクラスを追加して、画像のサムネイルのスタイルを設定します。サムネイルに他のホバーまたはトランジショナル CSS スタイルを追加して、Web サイトをレスポンシブでインタラクティブにすることもできます。 .thumb {
      width: 80px;
      height: 80px;
      object-fit: cover;
      margin-right: 10px;
      cursor: pointer;
    }
  10. JavaScript ファイル内で、上記のクラスを新しいサムネイルに追加します。 thumb.classList.add("thumb");
  11. サムネイルのリストを含む HTML 要素に新しいサムネイルを追加します。 imageThumbs.appendChild(thumb);

ユーザーがサムネイルをクリックしたときに画像を変更する方法

ユーザーがいずれかのサムネイルをクリックすると、ページ中央の拡大画像が選択した画像に変更されます。この機能を JavaScript ファイル内に追加できます。

  1. JavaScript ファイルの先頭で、現在選択されている画像の HTML 要素を取得します。 var currentImage = document.getElementById("current-image");
  2. for ループ内に、ユーザーがページの下部にあるいずれかのサムネイルを選択したときにトリガーされるイベント ハンドラーを追加します。 thumb.addEventListener(
      "click", function() {

      }
    );

  3. イベント ハンドラー内で、現在の画像の「src」属性を新しく選択した画像に変更します。「alt」属性を更新することもできます。 currentImage.src = this.src;
    currentImage.alt = this.alt;
  4. 「index.html」ファイルをクリックして、Web ブラウザで開きます。
    最初の画像が選択された画像ギャラリー
  5. サムネイルのいずれかを選択して、画像を表示します。
    他の画像が選択された画像ギャラリー

JavaScript の知識を広げ続ける

経験に関係なく、知識を広げるためにプロジェクトを構築し続けることが重要です。チェス ゲーム、電卓、To Do リストの作成など、他のプロジェクトを引き続き検討してください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です