【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://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html
ディスカッション
コメント一覧
まだ、コメントがありません