HTML | 画像を横並びにする
HTMLで画像を横並びにする方法とサンプルコードを紹介しています。
HTMLで画像を横並びにする
HTMLで画像を横並びにするタグや専用の属性はありませんが、「style」を指定する事でいくつかの方法があります。
imgタグは「display」プロパティのデフォルト値が「inline」ですので、imgタグのままでしたらそのまま横並びになり、親要素のサイズまたはウィンドウサイズで折り返されます。
imgタグは何もしなくても横並びになりますが、プロパティの変更や親要素を持たせる事も少なくない為、横並び指定する事が多いです。
親要素で「display」プロパティの値を「flex」にして子要素を横並びにするのが簡単です。
「gap」プロパティで画像と画像の余白を指定できます。（デフォルトは0）
<div style="display: flex; gap:5px;">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
</div>
画像を領域サイズに合わせて折り返す必要がある場合は「flex-wrap」プロパティで「wrap」を指定します。
<div style="display: flex; flex-wrap: wrap;">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
</div>また、縦横中央に配置したい場合は「justify-content: center」と「align-items: center」を追加すれば上手くいくはずです。
<div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center;">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
<img src="https://1-notes.com/wp-content/uploads/2019/02/profile.png" alt="画像の説明">
</div>