画像を並行に配置する方法
- 前のページ スクロール時に背景を切り替える
- 次のページ 角丸画像
CSSを使用して画像を並行に配置する方法を学びます。
並べ替え画像ギャラリー
画像を並べる方法
ステップ1 - HTMLを追加：
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
ステップ2 - CSSを追加：
CSSの使い方 フロート 並べ替え画像を生成する属性：
フロートインスタンス
/* 画像コンテナが3つ（4つのコンテナは25%、2つのコンテナは50%、など） */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* 画像コンテナの後のフロートをクリアする */
.row::after {
content: "";
clear: both;
display: table;
}
CSSの使い方 flex 並べ替え画像を生成する属性：
フレックスボックスインスタンス
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
注意：フレックスボックスはInternet Explorer 10およびそれ以前のバージョンをサポートしていません。三列レイアウトを作成する際にはfloatまたはflexを使用するかどうかは自分次第ですが、IE10およびそれ以下のバージョンをサポートする必要がある場合は、フロートを使用するべきです。
ヒント：フレックスボックスレイアウトモジュールに関する更多信息を知りたい場合は、私たちの CSSフレックスボックスチュートリアル。
レスポンシブ性を追加
または、特定のスクリーン幅で画像を並べる代わりに並べ替えるメディアクエリを追加することができます。
次の例では、500px幅またはそれ以下のスクリーンで画像を垂直に並べます：
レスポンシブインスタンス
/* レスポンシブレイアウト - 三列を並べ替えて並排にする */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
メディアクエリに関する更多信息を知りたい場合は、私たちの CSSメディアクエリチュートリアル。
関連ページ
チュートリアル：CSS画像
チュートリアル：CSSフロート
チュートリアル：CSS画像ライブラリ
- 前のページ スクロール時に背景を切り替える
- 次のページ 角丸画像
