display: inline

display: inline は指定した要素をインライン要素にする

Last update: 2008-09-09

インライン要素は、行内 (inline) に指定した箇所に対して許可されたプロパティ値を設定する [a], [br], [img], [span] などのセレクタのグループ。block 要素との見分け方は display: blocl を参照、この他にどういったものが含まれているかは参考書やネットで調べてください。

display: inline によってどういったことが期待できるかというと、通常は逆さ積み木の様に重なっていくボックス要素を、ブロック内のエレメントとして横方向に並べ替えることができる。
分かりやすい例としては、ul のようなリスト要素を生成するセレクタでは、内包する子要素 (li など) を改行で下に送り、縦型の構造を作る。この li 要素に display プロパティの inline を値として定義すると、構造は縦型ではなく行内に並ぶ横型構造へと変化する。

display: inline の活用方法だが、実は私もリストで作ったナビゲーションメニューをインライン表示することでしか使ったことがない。これは定番中の定番だろうから、あえてここで説明するのもなんだろうから、上手く説明されている方は沢山おられるので、google 先生に聞いてみた方が良いかも。

li 要素に display: inline を使ったメニュー

サンプルとしては、このページの上部にあるナビゲーションも、li 要素に display: inline を設定して横方向へのリストで表示させているが、それはこんな構造。

display: inline を使ったメニューのサンプル

HTML はこんな感じ

<ul>
	<li><a href="doko">ホーム</a></li>
	<li><a href="soko">お問い合わせ</a></li>
	<li><a href="asoko">リンク集</a></li>
</ul>

CSS の基本はこれ

ul {
 list-style-type: none; /* 先頭のマーカーを非表示にする */
 margin-bottom: (任意の設定);
 padding-left: (任意の設定);
 }
li {
 display : inline; /* これが必須プロパティ */
 margin-left: (任意の設定);
 padding: (任意の設定);
 border-left: dotted 1px; /* メニュー間のセパレータ */
 }
li a:link {
 text-decoration: none; /* アンダーラインを表示したければ underline */ 
 color: (任意の設定);
 background-color: (任意の設定);
 }
lii a:visited {
 text-decoration: none; /* アンダーラインを表示したければ underline */ 
 color: (任意の設定);
 background-color: (任意の設定);
 }
lii a:hover {
 text-decoration: none; /* アンダーラインを表示したければ underline */ 
 color: (任意の設定);
 background-color: (任意の設定);
 }
li a:active {
 text-decoration: none; /* アンダーラインを表示したければ underline */ 
 color: (任意の設定);
 background-color: (任意の設定);
 }

で、これだけでは面白くないから、Firefox 3 と Webkit を使う Safari なら効果のある設定で見栄えを変えてみる。これは IE は当然だが Firefox 2 と Opera もサポートしていないので、該当するユーザにはあしからず。

border に角丸を設定したサンプル

HTML は上と同じ、CSS は以下を付け足す。

li a {
 padding: 0 12px; /* 適当な値を入れる */
 color: (任意の設定);
 background-colo: (任意の設定);
 /* border-radiusの値はpaddingの値の半分以下にする */
 -webkit-border-radius: 6px; /* Webkit用の設定 */
 -moz-border-radius: 6px; /* Firefox 3用の設定 */
 border-radius: 6px; /* CSS3 に向けた設定 */
 }

border-radius は別ページで取り上げることにするが、この設定には padding との兼ね合いが重要なので、色々実験して良い結果を探ってみて欲しい。

▲ Return to Top