CSSだけで作る!メディアクエリを使ったレスポンシブ画像ギャラリーの実装方法
CSSでレスポンシブ画像ギャラリーを作るには?
画面幅に応じてレイアウトが自動的に変化するレスポンシブ画像ギャラリーは、CSSの@media(メディアクエリ)とfloatを組み合わせることで、JavaScript不要で簡単に実装できます。
基本的な仕組みは以下のとおりです。
- 各画像をラップする要素にパーセンテージ指定の幅(例：24.99999%)を設定し、横並びに配置する
- メディアクエリで画面幅ごとに表示列数を切り替える(デスクトップは4列、タブレットは2列、スマートフォンは1列)
clearfixでfloatによる回り込みを解除し、レイアウト崩れを防ぐ
それでは、実際に動作するサンプルコードを見てみましょう。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
div.myGallery {
border: 2px solid orange;
}
div.myGallery:hover {
border: 1px solid blue;
}
div.myGallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 20px;
text-align: center;
}
.responsive {
padding: 0 5px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 5px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class = "responsive">
<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 = "mydiv">3D Animation Tutorial</div>
</div>
</div>
<div class = "responsive">
<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 = "mydiv">Swift Video Tutorial</div>
</div>
</div>
<div class = "responsive">
<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="mydiv">CSS Tutorial</div>
</div>
</div>
<div class = "clearfix"></div>
</body>
</html>コードのポイント解説
1. 画像を可変幅にする
div.myGallery img { width: 100%; height: auto; } を指定することで、画像が親要素の幅に合わせて自動的に拡大・縮小されます。height: auto を併記することで、縦横比が崩れるのを防げます。
2. メディアクエリで列数を切り替える
- 通常時：
width: 24.99999%により、1行に4枚の画像が並びます。わずかに100%未満にしているのは、padding分の余白を考慮して横にはみ出すのを防ぐためです。 - 700px以下(タブレット想定)： 幅を約50%に変更し、2列表示に切り替わります。
- 500px以下(スマートフォン想定)： 幅を100%にして、1列の縦積み表示になります。
3. ホバー効果でインタラクティブ性を追加
:hover 疑似クラスを使い、マウスオーバー時に枠線の色と太さが変化するようにしています。ユーザーに「クリックできる要素」であることを直感的に伝えられます。
4. clearfixでfloatを解除
float: left を使ったレイアウトでは、親要素の高さが崩れる問題が発生します。最後に空の <div class="clearfix"></div> を置き、:after 疑似要素で回り込みを解除することで、レイアウトを正しく閉じています。
補足：FlexboxやGridを使うさらに現代的な方法
上記のfloat方式は古典的ですが広く使われる手法です。近年では、display: flex や display: grid を使えば、clearfixなしでより柔軟なギャラリーを実装できます。特にGridの repeat(auto-fit, minmax(250px, 1fr)) を使うと、メディアクエリを書かずに自動的に列数が調整されるレスポンシブギャラリーが作れます。用途に応じて使い分けるとよいでしょう。
-
CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法
Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。 この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。 実装のポイント 基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。 円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。 float の解除：
-
CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】
CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <