インライン要素とは何かというと、雑に言えば「いちいち改行されない要素」のことです。aやspan、img、q、brなどがインライン要素です。改行されるものをブロックレベル要素と言います。divやh1～h6、p、center、tableなどがブロックレベルです。
div要素をインライン要素にすることで、作ることのできるレイアウトのバリエーションはさらに広がります。
divを横に並べる方法
通常のdivは、このように横一列を自動的に占有します。
<div style = "border:solid black 1px;">div要素</div>ブロックレベル要素とはそうしたもの、横一列単位のブロックを占有することが前提の要素だからです。pもtableも見出しも、横にふたつ並べることは通常できません。
しかしそんなブロックレベルに、次のように記述すると話が変わります。
display:inline-block;
<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を指定するとこういうことも起こります。
これがinlineだとこうなります。
inlineではwidthやheightは使えず、その代わり文字数に合わせてサイズが自動的に調整されますので崩れません。
今度はmarginとpaddingを指定してみます。
inlineではこうなります。
まずmarginは、inlineでは左右だけにしか効きません。上下の間隔はinline要素では調整できませんが、inline-blockでは可能です。
paddingはinlineでも可能ですが、他の要素とかぶります。このようにinline要素の「サイズの指定ができない」という点だけはblock要素に近づけて、レイアウトに使いやすくしたものがinline-block要素となります。
display:none？
これについてはまた別で書くかもしれません。display:noneの要素はブラウザ上で表示されなくなります。
特定の環境化では表示したくない場合などに使用するようです。
コメント