CSSでdiv要素を横に並べてレイアウトする方法/displayプロパティ(inline-block)の使い方

cubes IT

インライン要素とは何かというと、雑に言えば「いちいち改行されない要素」のことです。aやspan、img、q、brなどがインライン要素です。改行されるものをブロックレベル要素と言います。divやh1~h6、p、center、tableなどがブロックレベルです。
div要素をインライン要素にすることで、作ることのできるレイアウトのバリエーションはさらに広がります。

Advertisements

divを横に並べる方法

通常のdivは、このように横一列を自動的に占有します。

div要素
div要素
div要素
<div style = "border:solid black 1px;">div要素</div>

ブロックレベル要素とはそうしたもの、横一列単位のブロックを占有することが前提の要素だからです。pもtableも見出しも、横にふたつ並べることは通常できません。
しかしそんなブロックレベルに、次のように記述すると話が変わります。

要素をインラインブロックにする
display:inline-block;
div要素
div要素
div要素
<div style = "border:solid black 1px; display:inline-block;">div要素</div>

自動的に横に広がらず、横にくっつくようになりました。

displayには他に幾つか種類がある

inline、block、noneという値が用意されています。div要素はデフォルトでblock、aやspanはデフォルトでinlineです。
inlineとinline-blockがどうちがうかというと、inlineではwidthやheight、margin、paddingなどを自由に指定することができません。そういう仕様です。
不便そうに見えるかも知れませんが、例えばinline-blockでwidthとheightを指定するとこういうことも起こります。

width:50px; height:50px; display:inline-block;
width:50px; height:50px; display:inline-block;
width:50px; height:50px; display:inline-block;

これがinlineだとこうなります。

width:50px; height:50px; display:inline;
width:50px; height:50px; display:inline;
width:50px; height:50px; display:inline;

inlineではwidthやheightは使えず、その代わり文字数に合わせてサイズが自動的に調整されますので崩れません。
今度はmarginとpaddingを指定してみます。

margin:10px; display:inline-block;
margin:10px; display:inline-block;
margin:10px; display:inline-block;

padding:10px; display:inline-block;
padding:10px; display:inline-block;
padding:10px; display:inline-block;

inlineではこうなります。

margin:10px; display:inline;
margin:10px; display:inline;
margin:10px; display:inline;

margin:20px; display:inline;
margin:20px; display:inline;
margin:20px; display:inline;

まずmarginは、inlineでは左右だけにしか効きません。上下の間隔はinline要素では調整できませんが、inline-blockでは可能です。

padding:10px; display:inline;
padding:10px; display:inline;
padding:10px; display:inline;

padding:20px; display:inline;
padding:20px; display:inline;
padding:20px; display:inline;

paddingはinlineでも可能ですが、他の要素とかぶります。このようにinline要素の「サイズの指定ができない」という点だけはblock要素に近づけて、レイアウトに使いやすくしたものがinline-block要素となります。

display:none?

これについてはまた別で書くかもしれません。display:noneの要素はブラウザ上で表示されなくなります。
特定の環境化では表示したくない場合などに使用するようです。

CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント