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

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

暫定的にサイドバーを設置し、空いた左側を利用して
1行あたり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;
}

ポイント

今回のポイントは以下の点です。

・liタグ⇒width: calc(100%/3);
・imgタグ⇒width: 100%;

imgの親要素であるli要素では、width:calc(100%/3)と記述しています。

calcは関数の1つで、()内の結果が反映されます。
画面の幅を変えると、それに合わせて画像の大きさも変わります。

これは、calc関数の式の100%が可変であり、状況により計算結果が変わるからです。

右領域を除いた幅の余白について、3等分した幅がそれぞれliの幅となります。

そして、imgタグの「width: 100%;」の記述で親要素の幅、すなわち計算結果の幅に合わせるようにします。

終わりに

画像をリスト形式で表示する方法でした。

画像元
https://www.photo-ac.com/

その他参考サイト
https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html

IT, HTML・CSSIT, HTML, CSS

Posted by 行未