HTML、CSS、JavaScript を使用してシンプルな画像ギャラリーを作成する方法
HTML、CSS、および JavaScript を使用して単純な画像ギャラリーを作成することは、Web 開発の基礎を学ぶのに最適な方法です。画像ギャラリーでは、サムネイルを選択して画像をフリックし、ウェブページ上の画像を拡大できます。
ギャラリーを作成するには、HTML を使用して Web ページのコンテンツを追加し、CSS を使用してスタイルを追加します。JavaScript を使用して、ユーザーがいずれかのサムネイルをクリックしたときにギャラリーをインタラクティブにすることができます。
イメージ ギャラリーの UI を作成する方法
HTML と CSS を使用して、画像ギャラリーの UI を追加します。これには、Web ページの中央に大きな画像を追加することが含まれます。これは、選択したサムネイルに基づいて変化します。GitHub で完全なサンプル ソース コードを表示することもできます。
- 「index.html」という名前の新しいファイルを作成します。
- このファイル内に、基本的な 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> - 「images」というサブフォルダーを作成します。いくつかの画像を入力し、「image1.jpg」から「image10.jpg」までの名前を付けます。
- HTML ファイルに、画像ギャラリーの div を追加します。
<div id="image-gallery">
</div>
- 画像ギャラリー div 内に画像タグを追加して、選択した画像を拡大して表示します。デフォルトでは、「images」フォルダー内の最初の画像を表示します。
<img id="current-image" src="images/image1.jpg" alt="Image 1">
- HTML ファイルと同じフォルダーに、次の CSS を含む「styles.css」という新しいファイルを追加します。これらの CSS のヒントとコツを使用して、自由に CSS を変更してニューモーフィック デザイン コンポーネントを追加したり、その他のデザインを微調整したりしてください。
-
.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%;
} - HTML ファイルの head タグに CSS ファイルへのリンクを追加します。
<link rel="stylesheet" type="text/css" href="styles.css">
ギャラリーの他の画像にサムネイルを追加する方法
現在、画像ギャラリーには最初の画像のみが表示されます。選択した画像の下に、サムネイルのリストを追加します。これらのサムネイルには、「images」フォルダ内のすべての画像のプレビューが表示されます。
- HTML ファイルの画像ギャラリー div 内に別の div を追加して、他の画像のサムネイルを表示します。
<div id="image-thumbs"></div>
- CSS ファイル内で、サムネイルのリストのスタイルを追加します。
#image-thumbs {
display: flex;
justify-content: center;
margin-top: 20px;
} - HTML および CSS ファイルと同じフォルダーに、「script.js」という新しいファイルを追加します。
- HTML body タグの下部に JavaScript ファイルへのリンクを追加します。
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - JavaScript ファイル内で、サムネイルのリストを格納する div の HTML 要素を取得します。
var imageThumbs = document.getElementById("image-thumbs");
- ギャラリー内の 10 個の画像をそれぞれループする for ループを追加します。
for (var i = 1; i <= 10; i++) {
}
- ループ内で、画像ごとに新しい img 要素を作成します。
var thumb = document.createElement("img");
- 「src」および「alt」属性の値を追加します。この場合、「src」属性は、「images」フォルダー内の同じインデックスにある画像へのファイル パスです。
thumb.src = "images/image" + i + ".jpg";
thumb.alt = "Image " + i; - CSS ファイル内に新しいクラスを追加して、画像のサムネイルのスタイルを設定します。サムネイルに他のホバーまたはトランジショナル CSS スタイルを追加して、Web サイトをレスポンシブでインタラクティブにすることもできます。
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
} - JavaScript ファイル内で、上記のクラスを新しいサムネイルに追加します。
thumb.classList.add("thumb");
- サムネイルのリストを含む HTML 要素に新しいサムネイルを追加します。
imageThumbs.appendChild(thumb);
ユーザーがサムネイルをクリックしたときに画像を変更する方法
ユーザーがいずれかのサムネイルをクリックすると、ページ中央の拡大画像が選択した画像に変更されます。この機能を JavaScript ファイル内に追加できます。
- JavaScript ファイルの先頭で、現在選択されている画像の HTML 要素を取得します。
var currentImage = document.getElementById("current-image");
- for ループ内に、ユーザーがページの下部にあるいずれかのサムネイルを選択したときにトリガーされるイベント ハンドラーを追加します。
thumb.addEventListener(
"click", function() {
}
); - イベント ハンドラー内で、現在の画像の「src」属性を新しく選択した画像に変更します。「alt」属性を更新することもできます。
currentImage.src = this.src;
currentImage.alt = this.alt; - 「index.html」ファイルをクリックして、Web ブラウザで開きます。
- サムネイルのいずれかを選択して、画像を表示します。
JavaScript の知識を広げ続ける
経験に関係なく、知識を広げるためにプロジェクトを構築し続けることが重要です。チェス ゲーム、電卓、To Do リストの作成など、他のプロジェクトを引き続き検討してください。
コメントを残す