CSSのdisplayプロパティの使い方

CSSのdisplayはレイアウトを行う上で重要なプロパティです。

要素によって初期値が設定されており、それらを知らないで使うと思うように指定できない場合があるので注意が必要です。早速見ていきましょう。

ブロックレベル要素とインライン要素

displayプロパティを語る前にまずはブロックレベル要素とインライン要素をいう二つの要素について知る必要があります。

ブロックレベル要素

初心者の誰もが「なんでdiv要素には勝手に改行が入るのか？」と、不思議に思ったことではないでしょうか。その理由はdiv要素はブロックレベル要素だからです。

divやp、formなどの要素はブロックレベル要素で、新しい行から始まり、原則他の要素と隣り合わせになりません。平たく言うと改行されてしまう要素です。また、横幅もできる限りまで伸びます。

インライン要素

ブロックレベルに対して、インラインはその名のとおり「ラインの中」、つまり文章の中に組み込むことのできる要素です。改行されてしまうdivに対して改行されないのがspanですが、spanはインライン要素にあたります。

ブロックレベルとインラインについて説明が終わったところで、早速displayタグの値についてご紹介します。

displayの値

block

指定の要素をブロックレベル要素にします。

inline

指定の要素をインライン要素にします。

none

こちらはよく要素を隠すときに使います。Javascriptなどではこの値を切り替えて要素のオン・オフをコントロールしています。実際コードから消えるわけではないのですが、HTMLとして表示される際には除外して表示されます。

例

例えばリスト要素を横に並べてメニューを作りたい時など、display:inlineを使います。

まとめ

上記の例や、要素の表示／非表示など、何かと使う機会の多いdisplayプロパティ、しっかり理解して使っていきましょう！