Webサイトを作る際に文字や画像を横並びにしたい場合どう設定したらいいんだろう」

「そもそも文字の画像の配置設定ってどうなってるんだろう」

こう言った疑問に答えます。

HTML・CSSでは、要素を横並びにする方法が大きく分けて6つあります。

それら全てについて解説します。

目次【本記事の内容】

 

HTML・CSSで要素を横並びにする方法6

以降ではHTML・CSSで横並びにする6つの方法のメリット・デメリットについて紹介します。

inline

1つ目のinlineは横並びにしたい要素にたった一行display: inlineを指定するだけなので超お手軽です。

しかし、インライン要素にするとwidth・heightを指定できないことや上下のmarginを指定できないことがデメリットです。

要素間に隙間ができるというデメリットもありますが、それに関しては親要素にfont-size: 0を設定し、子要素で再度font-sizeを設定することで回避することができます。

ピクセルパーフェクトなデザインには不向きだとですが、パンくずリストなどのテキストを横並びしたい時に使えると思います。

inline-block

2つ目のinline-blockは子要素同士の高さが異なり、親要素の幅が狭まった場合でもレイアウトが崩れることがないがメリットです。

また、inline同様に超お手軽でブロック要素と同様にwidth・height・上下のmarginも指定できるいいとこ取りです。

さらに、サンプルにある通りtext-alignvertical-alignの両方が使えます。

しかし、子要素の間に改行による隙間ができてしまうことや子要素同士の並びをcssのみで調整することはできないことや子要素の内容は基本上揃えになり、vertical-alignが使用できないがデメリットです。

改行による隙間を解消するためには、親要素のfont-size0にして子要素でfont-sizeを指定し、子要素の改行を取り払って以下のように一行で記述しなければなりません。

inline-blockもピクセルパーフェクトなデザインにしたい場合は後述のfloatの方が手軽かですが、text-alignvertical-alignの両方が使いたい時が使い所になると思います。

float

3つ目のfloatは子要素の左右の順番を変えたい場合にcssのみで調整できるメリットはありますが、左右のみなので大々的な修正はしづらいです。

また、子要素の内容により高さが変わる場合は上揃えになるので、子要素の高さの増減に対応しやすいです。

古いブラウザでもきちんと表示されるのもまたメリットです。

しかし、子要素は文字通り浮いた状態になるので親要素の高さが0になってしまいます。

それに加え、子要素の内容は基本上揃えになるつまりvertical-alignが使用できないことや親要素の幅(width・padding・marginなど)を正確に指定しないとレイアウトが崩れる場合があるがあります。

後続の要素が隙間に入り込むためfloatを解除したい場合は後続要素にclearを設定するといいでしょう。

適切な後続要素が無い場合は親要素にoverflow: hidden、もしくはclearfixハックを使う必要があります。

シンプルな「上揃え」の横並びを出したいときに使えます。

table

4つ目のtablevertical-alignが使えることや古いブラウザにも対応していて(IE8以降)、ベンダープレフィックスも不要なことがメリットです。

また、子要素にtable-layout: fixedを設定することで幅を等間隔に自動調整してくれるので、子要素の増減によるwidthの調整が不要な保守性の高いCSSの実現できます。

しかし、折返しができないことや子要素にdisplay: table-cellを設定するため、子要素をflexコンテナにできないのがデメリットです。

vertical-alignを使いたい場合やサンプルにもあるような項目数が増減する可能性のある等間隔のメニューなどが使い所になるでしょう。

正直使い勝手が悪くflexboxでも同様の表現ができるので、古いブラウザへの対応やCSSの簡素化をしたい場合でもない限り積極的に使う理由はないでしょう。

table-cell

5つ目のtable-cellは子要素の幅を設定しなくても親要素の幅を指定するだけで自動的に子要素の幅が割り付けられることや親要素にtable-layout:fixedを指定することで、子要素の幅が内容によって増減しても子要素の幅は均等に割り付けられることがメリットです。

また、子要素の内容の高さを揃えるのにvertical-alignを設定できます。

しかし、paddingはできるもののmarginによる子要素同士の調整ができないないことやborder-spacingによる調整もできますが、子要素全てで均等にしかできないことがデメリットです。

親要素の幅を変更してのレイアウト調整に対応しづらいのもデメリットです。

flexbox

6つ目のflexboxは親要素にjustify-contentを指定することで子要素全体の水平位置を設定でき、align-itemsを指定することで子要素全体の垂直位置を設定でき、flex-directionを指定することで子要素全体の並びを設定でき、子要素にflexを指定することで子要素の幅をリキッドに設定できるのメリットです。

また、横方向・縦方向・逆方向など柔軟な整列が可能で等間隔の整列の場合、親要素・子要素のサイズを適切に設定すればmarginを気にする必要はありません。

さらに要素の表示上の順番の入れ替えが可能になったことでデザインに縛られにくいセマンティックなHTMLの記述が可能になります。

しかし、IE9以前など古いブラウザには未対応であることやベンダープレフィックス地獄によるCSSの肥大化がデメリットです。

ボックス要素を利用する

直接要素を横並びする方法ではありませんが、figuredivを使うことで横並びにしやすくなります。

figure

figurefigure要素というキャプションの図などを示すための要素を利用する方法です。

figure要素は横並びの場合だけではなく、画像などにキャプションを付ける際に利用されます。

HTMLでは、画像と文章をfigureで囲み、class名を指定します。

キャプションの文章は(p要素ではなく)figcaption要素とします。

CSSでは、グループに利用したfigure要素にfloat: leftを指定します。

float: leftを指定したボックスが(通常の表示から独立し)左に移動し、以下、横並びに表示されます。

float: leftを指定した以降、後続する要素が全て横に並ぶので、横並びを解除したい要素に、clear: bothを指定します。

div

キャプションはp要素としたdiv要素を利用する方法は旧来の方法です。

HTMLでは、画像と文章をdiv要素で囲み、クラスを指定します。

CSSでは、グループに利用したdiv要素にfloat: leftを指定します。

float: leftを指定したボックスが(通常の表示から独立し)左に移動し、以下、横並びに表示されます。

float: leftを指定した以降、後続する要素が全て横に並ぶので、横並びを解除したい要素に、clear: bothを指定します。

まとめ

flexboxの登場により要素の横並べ・整列は格段に楽になりました。

古いバージョンでは使えないと言いましたが、IE10以前は20174月にマイクロソフトのサポートが切れたことにより現在はflexboxを遠慮無く使ってもいい環境が整ったと言ってもいいと思います。

とはいえflexboxはベンダープレフィックスをちゃんと書くとCSSが肥大化しますし、floatなどの枯れた技術”でレイアウトが再現可能であればそちらを優先するほうがCSSのシンプルさ・古いブラウザの対応への両面でベターだと考えます。

他におすすめするのなら、レイアウト全体など子要素の内容が大きく増減しそうな場合や子要素の左右の入れ替えが発生しそうな場合はfloat、ナビゲーションなど子要素の内容が小さく増減しなさそうな場合はinline-blockvertical-alignが必要になりそうな場合はtable-cellというところでしょう。