【CSS】画像を簡単に横並びにする方法を初心者にもわかりやすく解説

WEBサイト制作において、画像を横並びにするという機会は多々あります。

そのままでは縦積みになってしまう画像を、横向きに並べるために必要なのがCSSです。

CSSで画像を横並びにする方法は一つだけではありません。それぞれの方法を理解し、場面によって使い分けましょう。

よく使われる方法も紹介していますので、最後までご覧ください。

画像を横並びにするfloatプロパティ

floatは要素を横に寄せるプロパティです。

HTML
<ul>
<li><img
src="sample1.png"></li>
<li><img
src="sample2.png"></li>
<li><img
src="sample3.png"></li>
</ul>

CSS
li {
list-style:none;
/*デフォルトの指定解除*/
float:left;
}

このように横並びにしたい要素にfloatを指定します。値は以下の3つです。

leftを指定すると、要素がすべて左寄せで横並びになります。rightは逆に右寄せです。

要素の並び順も変わります。leftの場合、先頭の画像が一番左ですが、rightの場合は先頭が右になります。

左右どちらかのみで、中央に揃えるということはできません。

どうしてもfloatで中央揃えを実現したい場合は、親要素に横幅を指定し、「margin:0auto」をかけるなどしてください。

noneは初期値で、通常は指定しても何も起きません。floatがかかっている要素に指定すると、floatを解除できます。

中の画像の合計の幅が親要素の幅を上回る場合、収まりきらなかった画像が下に折り返します。折り返した画像もfloatの値を継承し、leftの場合は左寄せ、rightの場合は右寄せとなります。

それを意識すれば、画像の大きさはそのままに、画面のサイズによってレイアウトが変わるフレキシブルなページを作成可能です。

floatを指定するだけだと、画像同士がくっついた状態ですが、marginやpaddingを指定することで、余白を設けることができます。

CSS
li {
list-style:none;/*デフォルトの指定を解除*/
float:right;
margin:10px;/*余白を指定*/
padding:10px;/*余白を指定*/
}

上下、両端であれば、親要素にpaddingを指定することでも余白を設けられます。

floatの欠点

floatは簡単に横並びを実現できるプロパティですが、気を付けなければならない点もあります。

指定した要素の後に続く要素まで、横並びにしてしまうのです。

HTML
<ul>
<li><img
src="sample1.png"></li>
<li><img
src="sample2.png"></li>
<li><img
src="sample3.png"></li>
</ul>
<p>テキスト</p>

このような場合、テキストがsample3.pngに続いて横に並んでしまいます。

ulが終わった時点で、横並びを解除しなければなりません。

それを実現するのがclearfixです。

HTML
<ul
class=”clearfix”>
<li><img
src="sample1.png"></li>
<li><img
src="sample2.png"></li>
<li><img
src="sample3.png"></li>
</ul>

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

ulに「clearfix」というクラスを指定し、CSSには上記のような記述を行ってください。これで横並びの指定がulの中のみになります。

この「clearfix」は非常に有名なテクニックで、floatとセットで使われています。

画像を横並びにするdisplay:inline-block

実は画像はCSSで指定を行わなくても、下記のようにソースを並べるだけで横並びになります。

HTML
<div>
<img
src="sample1.png">
<img
src="sample2.png">
<img
src="sample3.png">
</div>

これはimgがインライン要素だからです。インライン要素はタグが終わった後に改行が入りません。そのため画像を並べても縦には積まれず、横並びになるのです。

便利なようですが、縦方向の余白、幅や高さが指定できないといった難点があります。

要素が終わった後に改行が入るのが、ブロックレベル要素です。縦方向の余白、幅や高さの指定が可能です。

この2つの特徴を併せ持つのがインラインブロック要素です。改行が入らないため横並びになりますが、縦方向の余白、幅や高さの指定が可能です。

以下のように記述します。

HTML
<ul>
<li><img
src="sample1.png"></li>
<li><img
src="sample2.png"></li>
<li><img
src="sample3.png"></li>
</ul>

CSS
li {
list-style:none;/*デフォルトの指定を解除*/
display:inline-block;/*liをインラインブロック要素に*/
padding:10px 0; /*縦の余白を指定*/
width:400px;/*幅を指定*/
height:400px;/*高さを指定*/
vertical-align:middle;/*縦方向を中央揃え*/
text-align:center;/*横方向を中央揃え*/
}

liはもともとブロックレベル要素ですが、インラインブロック要素にしたことで横並びになります。余白や幅、高さの指定も可能です。

また、縦方向、横方向の配置も指定できます。

floatと同様に、中の要素の合計の幅が親要素の幅を上回る場合、収まりきらない画像は下に折り返します。

要素同士の隙間に注意

インライン要素、インラインブロック要素を並べると、要素と要素の間に隙間ができてしまいます。HTMLの改行が原因です。

HTML
<ul>
<li><img
src="sample1.png"></li><li><img
src="sample2.png"></li><li><img
src="sample3.png"></li>
</ul>

このようにコードの改行をなくせば、見た目上の隙間が解消されます。

HTML
<ul>
<li><img
src="sample1.png"></li><!--
--><li><img
src="sample2.png"></li><!--
--><li><img
src="sample3.png"></li>
</ul>

このように改行の部分を、コメントタグで無効化してしまうという方法もあります。

CSSでも解決できます。

CSS
ul {
font-size:0;
/*フォントサイズを0にすると隙間がなくなる*/
}
li {
display:
inline-block;
font-size:14px;/*liのフォントサイズを再度設定*/
}

親要素のフォントサイズを0にすると、隙間も0になります。中身が画像ならばこれだけで問題ありませんが、テキストだと0のままでは見えないので、liに再度フォントサイズを設定してください。

画像を横並びにするdisplay:table

要素にtableの特徴を持たせ、行の感覚で画像を横並びにするという方法です。

HTML
<ul>
<li><img
src="sample1.png"></li>
<li><img
src="sample2.png"></li>
<li><img
src="sample3.png"></li>
</ul>

CSS
ul {
display:table;
}
li {
display:table-cell;
}

ulがtable、liがtdとなり、1行の表のように画像が横並びになります。tableの特徴をもっているので、以下のような指定が可能です。

CSS
ul {
list-style:none;/*デフォルトの指定を解除*/
margin:0;/*デフォルトの指定を解除*/
padding:0;/*デフォルトの指定を解除*/
display:table;
width:400px;/*幅を指定*/
table-layout:fixed;/*中の要素の幅を均等に*/
}
li {
display:table-cell;
padding:10px;/*余白を指定*/
height:400px;/*高さを指定*/
vertical-align:middle;/*縦方向を中央揃え*/
text-align:center;/*横方向を中央揃え*/
}

table-layout:fixedはtableにのみ使用可能なプロパティで、中の要素の幅を均等にすることができます。

liがtableのセルと同じ特徴をもっているので余白、高さ、縦横の配置指定も可能です。

floatやinline-blockとは違い、要素が収まり切らない場合でも下に折り返すことはありません。

なにも設定しなければ、親要素からはみ出してしまいますが、以下のように指定することで、親要素と大きさを合わせることが可能です。

CSS
ul {
list-style:none;/*デフォルトの指定を解除*/
margin:0;/*デフォルトの指定を解除*/
padding:0;/*デフォルトの指定を解除*/
display:table;
width:100%;/*幅を100%に*/
}
li {
display:table-cell;
}
img {
max-width:100%;/*画像の幅を最大100%に*/
}

100%は、親要素に対してということです。100%以上にならないので、はみ出しません。もともとの幅が親要素より上回る場合は、親要素に合わせて小さくなります。

画像には最大幅100%を指定しています。

親要素の幅に余裕があるときは画像本来の大きさで表示され、親要素の方が小さくなった場合はそれに合わせて収縮するという仕組みです。

どんな大きさのデバイスでも、横並びを崩したくないというときに便利な記述法です。

2行にする

display:table-cellも通常のテーブルと同じように2行にすることができます。

HTML
<div
class="table">
<div
class="row">
<div
class="cell">内容1</div>
<div
class="cell">内容2</div>
<div
class="cell">内容3</div>
</div>
<div
class="row">
<div
class="cell">内容4</div>
<div
class="cell">内容5</div>
<div
class="cell">内容6</div>
</div>
</div>

CSS
.table {
display:table;
}
.table .row {
display:table-row;
}
.table .cell {
display:table-cell;
}

「table」が<table>、「row」が<tr>、「cell」が<td>にあたります。

列の幅を崩さず、複数行にわたり画像を表示させたいときなどに重宝するでしょう。

画像を横並びにするflexbox

flexboxはもっとも頻繁に使われている横並びの指定方法です。

簡単に横並びにできるだけでなく、独自の詳細な指定法を多数有しています。

HTML
<ul>
<li><img
src="sample1.png"></li>
<li><img
src="sample2.png"></li>
<li><img
src="sample3.png"></li>
</ul>

CSS
ul {
list-style:none;/*デフォルトの指定解除*/
display:flex;
}

横並びにするだけであれば、display:flexと1行記述するだけですが、flexboxには特有のプロパティがいくつもあり、並べ方についてさまざまな設定が可能です。

今回は横並びに関係するプロパティに絞って紹介していきます。

flex-direction

CSS
ul {
list-style:none;
/*デフォルトの指定解除*/
display:flex;
flex-direction:row-reverse;/*要素を右から順に配置*/
}

flex-directionは要素の並び方を指定するプロパティです。初期値はrowで左寄せですが、row-reverseによって右寄せになります。

縦積みにするcolumnという値もあります。

PCサイトでは横並び、スマートフォンサイトでは縦積みなど、レイアウトを使い分けるレスポンシブデザインのサイトなどを作成するときに便利です。

flex-wrap

要素の折り返しを指定するプロパティです。

CSS
ul {
list-style:none; /*デフォルトの指定解除*/
display:flex;
flex-wrap:wrap; /*要素を折り返す*/
}

デフォルトはnowrapで折り返さず1行に配置されますが、wrapを指定することで折り返すようになります。

flex-flow

flex-directionとflex-wrapを一括で指定できるプロパティです。

CSS
ul {
list-style:none; /*デフォルトの指定解除*/
display:flex;
flex-flow:row-reverse wrap; /*要素を右から順に配置し折り返す*/
}

justify-content

要素の水平方向の配置を指定するプロパティです。

CSS
ul {
list-style:none;/*デフォルトの指定解除*/
display:flex;
justify-content:space-around;/*均等に間隔を空けて要素を横幅いっぱいに配置*/
}

space-aroundは左右に均等に間隔を空けて、要素を横幅いっぱいに配置するという値です。

justify-contentの他の値も紹介します。

flex-start	要素が左寄せで表示されます。初期値です。
flex-end	要素が右寄せで表示されます。row-reverseとは違い、要素の並び順までは変わらず左から始まります。
center	要素が中央揃えで配置されます。
space-around	要素の左右に均等に余白が空けられ、横幅いっぱいに配置されます。
space-between	要素の間に均等な余白が空けられ、横幅いっぱいに配置されます。space-aroundとは違い、両端には余白が設けられません。

align-items

要素の垂直方向の配置を指定するプロパティです。

CSS
ul {
list-style:none;/*デフォルトの指定解除*/
display:flex;
align-items:center;/*要素を上下中央揃えに*/
}

centerを指定することで、画像が上下中央揃えで配置されます。

他には以下のような値があります。

stretch	要素が親要素の高さに合わせて伸縮しますが、画像の場合は無効です。初期値です。
flex-start	要素が上揃えで配置されます。
flex-end	要素が下揃えで配置されます。
center	要素が上下中央揃えで配置されます。
baseline	要素がベースラインに合わせて配置されます。画像の場合は下揃えです。

まとめ

画像を横並びにする方法について解説しました。

それぞれに特徴があるということをご理解いただけたでしょうか。

中でもflexboxはさまざまな指定が可能で、幅広いシチュエーションに対応可能です。

覚えることは多いけれど、使いこなせるようになれば、大変心強い存在となるでしょう。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！