CSSを使った画像ギャラリーの作成とカスタマイズ方法

画像ギャラリーは、ウェブサイト上で画像を表示する方法の一つです。

基本構造
スタイル
カスタマイズ
おまけ

基本構造

画像ギャラリーを作るために、まずはHTMLを作成します。

<div class="gallery">
  <img src="image1.jpg" alt="画像1">
  <img src="image2.jpg" alt="画像2">
  <img src="image3.jpg" alt="画像3">
  <img src="image4.jpg" alt="画像4">
</div>

スタイル

次に、画像ギャラリーにCSSスタイルを適用します。

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

.gallery img {
  width: 300px;
  height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.gallery img:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

この例では、画像ギャラリー内の画像に影を追加し、マウスオーバー時に影の大きさが変化するように設定しています。また、画像は自動的に整列され、適切な間隔が確保されています。

カスタマイズ

必要に応じて、さまざまなスタイルを追加して画像ギャラリーをカスタマイズできます。

例えば、画像のアスペクト比を維持しながら、一定のサイズに収まるようにすることができます。また、画像にカーソルを合わせたときに、キャプションが表示されるように設定することもできます。

おまけ

レスポンシブの画像ギャラリーです。画面幅が767px未満の場合、各行に2つの画像が表示されます。

表示例

ここに画像テキストの説明を追加します

ここに画像テキストの説明を追加します

ここに画像テキストの説明を追加します

ここに画像テキストの説明を追加します

HTML

<div class="gallery-container">
<div class="gallery">
    <a target="_blank" href="リンク先のパス">
      <img src="https://codinghaku.com/wp-content/uploads/2023/02/hp01.jpg" width="300" height="200">
    </a>
    <div class="gallery-desc">ここに画像テキストの説明を追加します</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="リンク先のパス">
      <img src="https://codinghaku.com/wp-content/uploads/2023/02/hp02.jpg" width="300" height="200">
    </a>
    <div class="gallery-desc">ここに画像テキストの説明を追加します</div>
  </div>
 
<div class="gallery">
    <a target="_blank" href="リンク先のパス">
      <img src="https://codinghaku.com/wp-content/uploads/2023/02/hp03.jpg" width="300" height="200">
    </a>
    <div class="gallery-desc">ここに画像テキストの説明を追加します</div>
  </div>

<div class="gallery">
    <a target="_blank" href="リンク先のパス">
      <img src="https://codinghaku.com/wp-content/uploads/2023/02/hp04.jpg" width="300" height="200">
    </a>
    <div class="gallery-desc">ここに画像テキストの説明を追加します</div>
  </div> 
</div>

CSS

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 300px;
}

.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

.gallery:hover {
    border: 1px solid #777;
}

.gallery img {
    width: 100%;
    height: auto;
}

.gallery-desc {
    padding: 15px;
    text-align: center;
  	font-size:14px;
}

CSS 画像ギャラリー

基本構造

スタイル

カスタマイズ

おまけ

表示例

HTML

CSS

コメント