CSSでブロック要素や画像を横並びにする方法

2021年4月1日 20:39

HTMLでブロック要素や画像をリストで記述すると縦に並ぶと思います。しかし、ＰＣで表示しようと思うと横長の画面になるため、横に並べたいですよね。

本記事ではブロック要素や画像を横に並べる方法を解説します。

floatを使う

まず、簡単な方法はfloatを使うことです。基本コードは以下の通りです。

・HTML

 <div>
   <ul>
     <li><img src="画像１"></li>
     <li><img src="画像２"></li>
     <li> <img src="画像３.jpg"></li>
   </ul>  
 </div>

・CSS

  li{
   float:left;
 }

liに並べた画像をfloatで横並びにしています。

floatを使うと次の要素に画像がかぶることがあります。floatには「浮かす」という意味があるため、その要素が浮いた状態となり、被りが発生します。そんなときはすぐ下の要素に「clear:both」というCSSを入れましょう。

もう一つの方法はdisplay:flex;を使います。基本コードは以下の通りです。

・HTML

 <div>
   <ul>
     <li><img src="画像１"></li>
     <li><img src="画像２"></li>
     <li> <img src="画像３.jpg"></li>
   </ul>  
 </div>

・CSS

  ul{
   display:flex;
 }

display:flex;は横並びにしたい兄弟要素の親要素のCSSに着けます。flexはレスポンシブデザインでも使いやすいため、floatよりもよく使われます。

また、clear:both;が無くてもいいので、概念的にもわかりやすいです。