CSSで画像を横に並べる方法

ざっくり言うとfloatを使う方法とinline-bockを使う方法があります。

まずfloatを使う方法

<ul>
<li><img src="images/sample_image01.jpg"></li>
<li><img src="images/sample_image01.jpg"></li>
<li><img src="images/sample_image01.jpg"></li>
<li><img src="images/sample_image01.jpg"></li>
</ul>

<div class="clearfix"></div>

li {

list-style: none;
　float: left;
}

.clearfix::after {
content: '';
display: block;
clear: both;
}

floatを使った後はclearfixでfloatを解除しておかないとデザインがおかしくなります。

続いて、inline-blockを使う方法。

li {
　display: inline-block;
}

これだけ。めっちゃ簡単。