CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像ギャラリーを作成する方法【サンプルコード付きで解説】

CSSを使えば、画像ギャラリーはとても簡単に作成できます。特別なJavaScriptやライブラリは不要で、floatやborder、:hoverなどの基本的なCSSプロパティを組み合わせるだけで、見栄えの良いギャラリーを短いコードで実現できます。

以下のサンプルでは、3枚の画像を持つシンプルなギャラリーを作成しています。さらに、画像にマウスカーソルを合わせると枠線の色が変化するインタラクティブな効果も加えています。

実装例（サンプルコード）

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.myGallery {
            margin: 3px;
            border: 2px solid orange;
            float: left;
            width: 220px;
         }
         div.myGallery:hover {
            border: 1px solid blue;
         }
         div.myGallery img {
            width: 100%;
            height: auto;
         }
         div.desc {
            padding: 20px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <div class = "myGallery">
         <a target = "_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
            <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg" alt="3D Animation Tutorial" width="600" height="500">
         </a>
         <div class = "desc">3D Animation Tutorial</div>
      </div>
      <div class = "myGallery">
         <a target="_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg">
            <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" alt="Swift Video Tutorial" width="600" height="500">
         </a>
         <div class = "desc">Swift Video Tutorial</div>
      </div>
      <div class = "myGallery">
         <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg">
            <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" alt="CSS Video Tutorial" width="600" height="500">
         </a>
         <div class = "desc">CSS Tutorial</div>
      </div>
   </body>
</html>

コードのポイント解説

  • div.myGallery：各ギャラリーアイテムのコンテナとなる要素です。marginでアイテム間の余白を確保し、borderでオレンジ色の枠線を設定しています。また、float: leftによってアイテムを横並びに配置し、width: 220pxで幅を統一しています。
  • div.myGallery:hover：マウスホバー時のスタイルです。枠線の色が青色に変化するため、ユーザーに視覚的なフィードバックを与えることができます。
  • div.myGallery img：width: 100%を指定することで、画像がコンテナの幅に自動的にフィットします。height: autoにより、縦横比を維持したまま高さが調整されるため、画像が歪みません。
  • div.desc：画像下のキャプション（説明文）用のスタイルです。padding: 20pxで余白を設け、text-align: centerでテキストを中央揃えにしています。

応用のヒント

画像の枚数を増やしたい場合は、同じ構造の<div class="myGallery">ブロックを追加するだけで簡単に拡張できます。また、よりモダンなレイアウトを目指す場合は、floatの代わりにFlexbox（display: flex）を使用すると、折り返しや間隔の制御がより柔軟に行えます。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSだけでチェックマークを作成する方法【サンプルコード付き】

    CSSを使えば、画像ファイルやアイコンフォントに頼ることなく、独自デザインのチェックマークを作成できます。この記事では、::before／::after の疑似要素を活用する方法と、border＋transform を使うシンプルな方法の2つの実装例を、サンプルコードと実行結果あわせて紹介します。 方法1：疑似要素（::before / ::after）を使う方法 1つ目の例では、正方形のボックスに対して ::before と ::after の2つの疑似要素を配置し、それぞれを回転させることで、チェックマークを構成する「短い線」と「長い線」を描画しています。 <!DOCTYPE htm