【CSS】displayプロパティ、初心者から実戦的なレベルまで。

現在CSSの勉強中で、displayプロパティで色々な指定ができるみたいだけど、指定方法が多すぎて、いまいちよく分からない。重要な点を分かりやすく教えてほしい。

この記事は、上記のような方を想定して書きました。

HTMLとCSSの基礎的な知識が備わっている方向けなので、もし自信がない方はまず、下記の記事をお読み下さい。HTML,CSSについてまとめてあります。

そして最初にお伝えしたいのは、「実務レベルでのコーディングでも、実際に使う知識はそんなに多くない」ということです。

基本的な知識から入り、その使い方までを解説しますので、この記事の読了後は、基本的などんなレイアウトも作ることが可能となります。

僕は三年前にプログラミングの独学を開始して、今では個人でお仕事を取ってきて、実務をこなせるまでに成長しました。そんな僕が、CSSのdisplayプロパティについて丁寧に解説しますので、ぜひ最後までお読み下さい。

displayに関する基礎知識。

まず、「displya」というのはCSSのプロパティの一つです。

上の画像で紫の下線が引いてある箇所です。

そして、全てのHTML要素には、何らかのdisplayプロパティが設定されています。そこからも分かる様にとても重要です。

役割は、その要素自体と、その要素の内側を「どの様に配置するか？」を指定するものです。より厳密に書くと、その要素の外側と内側に対して表示種別を設定できます。

これだけでは、イメージしにくいと思うので、例を提示しながら解説しますね。

また、displayに設定できる値は様々なものがあります。例えば下記のようなものです。全てではありません。

などがあります。この中で、重要な値である「block」「inline」の２つをまず先に紹介します。

block

blockにすると要素を縦並びにレイアウトできます。

それでは、例を提示してより詳しく解説しますね。

<p>こんばんは！</p>
<p>こんばんは！</p>
<p class="point">こんばんは！</p>
<p>こんばんは！</p>
<p>こんばんは！</p>
<p>こんばんは！</p>

この様なHTMLのコードを用意しました。

p {
    display: block;
    background-color: brown;
}

.point {
    background-color: blue;
}

p要素のdisplayプロパティの値をblockに設定しました。また分かりやすいように背景色をbrownに設定。

そして、pointクラスがついた要素だけ、背景色をblueに設定しました。

すると、下の様になります。

注目してほしいのは、下記の２つです。

それぞれのp要素の中身であるコンテンツは「こんばんは！」の文字列だけですが、要素の幅が親要素の中に入ることが可能なギリギリの幅まで広がっています。

そして、「改行」されて、その行にはその要素しかない状態になっています。

※上下に改行が入るからといって、スペースが空いたりはしない。

この様に表示されるのがdisplayをblockにした時に挙動です。では、inlineの方も書いて、比べてみますね。

inline

inlineにすると要素を横並びにレイアウトできます。

それでは、例を提示してより詳しく解説しますね。

.point {
    background-color: blue;
    display: inline;
}

この様に、さっきのコードからpointクラスのついた要素だけをinlineにしてみました。すると下の様になります。

displayがblockの要素は、幅が親要素いっぱいに広がっていますが、displayがinlienの要素は、要素の幅が「コンテンツの幅」となっているのが分かります。コンテンツとは、中に入っている文字列なり要素なりです。

また、displayがblockの要素は、要素の上下に改行が入ることで、縦並びになりましたが、inlineでは改行が入らないので要素を横並びにレイアウトできます。

<p>こんばんは！</p>
<p>こんばんは！</p>
<p class="point">こんばんは！</p>
<p class="point">こんばんは！</p>
<p>こんばんは！</p>
<p>こんばんは！</p>

この様に、pointクラスがついたp要素を増やしてみました。

すると下記のようになります。

改行される訳ではないので、スペースがあるかぎり、詰めて表示されます。

displayの初期値はinline

厳密には全ての要素のdisplayの初期値は「inline」です。

ですが、p要素など、いくつかの要素は、こちらからdisplayをCSSで指定しない場合は、「user agent stylesheet」ユーザーエージェントスタイルシートによって、displayがblockとCSSが当てられています。

「user agent stylesheet」とは、ブラウザ側が設定するCSSのことですね。

この様な仕組みで何も指定しなくても、displayがblockになる要素は下記の様なものがあります。これも全てを挙げた訳ではありません。他にも沢山あります。

などは、こちらでCSSを当てなくても、ユーザーエージェントスタイルシートによって、displayがblockになります。

blockとinlineの違い。

blockとinlineの違いを先に箇条書きにしてみます。

このような違いがあります。

paddingとmarginの挙動が違う。

簡潔にまとめると、上の画像の様な関係があります。

それについて例を提示しながら、実際に試して解説していきます。

paddingを使うかどうか。

displayの値をblockにした要素と、inlineにした要素の違いの一つは、paddingとmarginをつけた時の挙動です。

結論から書くと、displayがbloclkの時は上手く機能しますが、inlineでpadding設定すると、上下のpaddingが上下の要素と重なってしまいます。

<p>こんばんは！</p>
<p>こんばんは！</p>
<p class="point">こんばんは！</p>
<p>こんばんは！</p>
<p>こんばんは！</p>
<p>こんばんは！</p>

このようなHTMLのコードを書きました。

p {
    display: block;
    background-color: brown;
    width: 400px;
}

.point {
    background-color: blue;
    padding: 20px;
}

そしてこの様なCSSコードを書きました。すると下記のように、paddingが効いているのが確認できます。

上記のコードから、pointクラスがついた要素だけ、displayをinlineに設定してみました。

p {
    display: block;
    background-color: brown;
    width: 400px;
}

.point {
    background-color: blue;
    padding: 20px;
    display: inline;
}

このような感じです。それ試してみると下の画像の様になります。

画像をみるとpaddingは設定できていますが、上の要素と重なってしまって、レイアウトが崩れています。

なので設定できない訳ではなく、厳密にはdisplayがinlineの要素にpaddingを設定することは可能だけどレイアウトが崩れるので使わないというのが正解ですね。

左右のpaddingは問題なく効きます。

<p>こんばんは！</p>
<p>こんばんは！</p>
<p class="point">こんばんは！</p>
<p class="point">こんばんは！</p>
<p class="point">こんばんは！</p>
<p>こんばんは！</p>
<p>こんばんは！</p>
<p>こんばんは！</p>

このようにpointクラスがついた要素を増やしました。

p {
    display: block;
    background-color: brown;
    width: 400px;
}

.point {
    background-color: blue;
    display: inline;
    padding-right: 50px;
}

そしてこのように、pointクラスがついた要素にpadding-rightだけ設定してみました。するとどうなるか試してみます。

pointクラスがついた要素(背景色が青)に問題なく「padding-right」が設定されていることが確認できます。

marginを使うかどうか。

displayの値をblockにした要素と、inlineにした要素は、paddingとmarginをつけた時の挙動も違います。

displyaがblockの時は上手くmarginが機能しますが、inlineの時は、上下のmarginが効きません。

.point {
    background-color: blue;
    margin: 50px;
}

まずdisplayがblockの要素に上のようにmarginを設定してみました。すると下の画像のようになります。

このように、pointクラスがついた要素にmarginが上下左右に効いているのが確認できます。

上記のコードから、pointクラスがついた要素だけ、displayをinlineに設定してみました。

.point {
    background-color: blue;
    margin: 50px;
    display: inline;
}

このような感じです。ではどうなるか試してみたいと思います。

このように、上下のmarginが効いていないのが確認できます。それと同時に、左右はしっかり効いているのも確認できると思います。

widthとheightが設定できるかどうか。

displayの値をblockにした要素と、inlineにした要素の大きな違いは、widthとheightが設定できるかどうかです。

displayがblockの要素はwidthとheightが設定できる

displayがblockの要素はwidthとheightが設定「できます」。CSSによって自由にサイズをカスタマイズ可能です。

displayがinlineの要素はwidthとheightが設定できない。

displayがblockの要素はwidthとheightが設定「できません」。

CSSのコードを書いても無効化されます。全く効きません。

横並びかつwidthとheightが設定するには、inline-blokcに設定する。

要素を横並びにしたいのと同時に、widthとheightも設定したい場面もあるかと思います。

その時は、displayの値をinline-blockに設定します。

そうすることで実現可能です。

none

displayの値を「none」とすることで、要素を消すことができます。

.point {
    background-color: blue;
    display: none;
}

この様に、CSSのコードを書きました。

背景色が青の要素が消えているのが確認できます。

参考サイト

Firefoxというブラウザを作成しているMozillaという組織が運営しているMDNというサイトが信頼できるので、もっと詳しく知りたい方は、下記のリンク先のサイトから調べてみて下さい。

MDN-display

まとめ　慣れが必要なのでコードを書こう。

この記事で、blockとinlineの違いや、inline-block、noneを紹介し、使い方を解説しました。

この記事の知識を上手く使えば、様々なレイアウトが可能なかと思います。

ですが、実際にコードを書くと、「あれ、どうだっけ？」となることも多いかと思いますが、何度もこの記事を読み直して、繰り返しているうちに、覚えてきて素早くコードを書けるようになると思うので、たくさん作りたいものを作ってみて下さい！

何か不明な点がありましたら、僕のTwitterにお気軽に連絡下さい。

ではまた。