【HTML・CSS】画像をリスト形式で表示する方法

2019年5月3日

画像を以下のようにリスト形式で表示する方法です。

暫定的にサイドバーを設置し、空いた左側を利用して
1行あたり3枚の画像を表示するようにします。

尚、サイドバーの幅は固定、画像の大きさは画面幅によって可変です。

1. コード
2. ポイント
3. 終わりに

コード

HTMLコードは以下の通りです。

<div id="wrapper">
	<div id="right-wrapper">
	右領域
	</div>
	<ul id="gallery">
		<li><img src = "images/img1.jpeg" width="350" height="200" alt="画像1"></li>
		<li><img src = "images/img2.jpeg" width="350" height="200" alt="画像2"></li>
		<li><img src = "images/img3.jpeg" width="350" height="200" alt="画像3"></li>
		<li><img src = "images/img4.jpeg" width="350" height="200" alt="画像4"></li>
		<li><img src = "images/img5.jpeg" width="350" height="200" alt="画像5"></li>
		<li><img src = "images/img6.jpeg" width="350" height="200" alt="画像6"></li>
	</ul>
</div>

CSSコードは以下の通りです。少々長いですが、ポイント自体は短いので後ほど説明します。

/* 領域の設定 */
html{
	height:100%;
}
body{
	height:100%;
}
#wrapper{
	height:100%;
}
#right-wrapper{
	background-color:yellow;
	float:right;
	width:300px;
	height:100%;
	text-align:center;
	font-size:25px;
	vertical-align:middle;
}
/* ギャラリー設定 */
#gallery{
	list-style:none; /*箇条書きの・を削除*/
	overflow:hidden;
	padding-left:0;
}
#gallery li{
	float: left; 
	width: calc(100%/3); /*リスト幅をビューポートの1/3で設定*/
	line-height: 0;/*行間をなくす⇒上下を詰める*/
}
#gallery img{
	display: block; /*imgタグの初期値はinline⇒blockで幅指定を出来るように*/
	width: 100%;    /*親要素liの幅：calc(100%/3)に合わせる*/
	height:auto;
}