2026-1 Blog Entry List

画像を2x2の配列にする「フレックスボックス」

posted : 01/25  システム管理者 

HTML
<div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL①" alt="画像1の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文①が入ります。</p>
</div>
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL②" alt="画像2の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文②が入ります。</p>
</div>
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL③" alt="画像3の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文③が入ります。</p>
</div>
<div style="width: calc(50% - 10px); box-sizing: border-box;">
<img src="画像のURL④" alt="画像4の説明" style="width: 100%; height: auto; display: block;">
<p style="font-size: 0.8rem; margin-top: 5px;">ここに短い説明文④が入ります。</p>
</div>
</div>