記事内に商品プロモーションが含まれる場合があります
今回はCSSのdisplayプロパティをマスターしましょう。少し分かりづらい内容ではありますが、Webサイトを作るためには必ず理解しておく必要があります。
この記事では「要素」という言葉を連発します。要素というのは、<タグ>〜</タグ>のカタマリを表します。たとえば、<p>これは例文です<p>は１つの要素です。
1. displayとは？
1-1. CSSのプロパティの1つ
CSSの基本文法はセレクタ・プロパティ・値の3つから書かれるんでしたね。
「display」というのはプロパティの1つで、ざっくりというと要素の表示形式を決めるものです。たとえばp {display: block}や、span {display: inline}のように使われます。
1-2. 取ることのできる値
displayに対する値として、まず次の4つを覚えましょう。
覚えておきたい4つの値
- block p、div、ul、h1〜h6などのタグの初期値はコレ
- inline a、span、imgなどのタグの初期値はコレ
- inline-block
- none
他にもdisplayの値はありますが（参考）、まずはこの4つを覚えておけば良いかと思います。この中で「pタグはblock」「aタグはinline」というようにタグごとにdisplayプロパティの初期値が決まっています。ほとんどのタグはblockもしくはinlineが初期値となっています。
1-3.それぞれの値のイメージ
displayプロパティにより要素の表示のされ方や高さ・幅の設定が変わってきます。下図にざっくりとそれぞれの値の表示のされ方をまとめました。
まずはイメージで理解しましょう。
- block⇒要素が横までいっぱいに広がり、縦に並んでいく
- inline⇒要素が平ぺったく横に並んでいく
- inline-block⇒blockとinlineの中間
- none⇒非表示になる
一般的なのはblockとinline
ウェブページでは、ほとんどの要素がdisplay: blockかinlineのどちらかとなっています。
1-4. 今から解説すること
これから説明する内容の結論をまとめた図をはじめに紹介しておきます。
ぱっと見ても何のことだか分からないと思いますが、ひとつひとつ例を出しながら解説していくのでご安心ください。
2. display: blockとは？
divタグやpタグ、h1~h6の見出しタグなどは、指定しなくてもはじめからblockになっています。以前はこれらの要素は“ブロック要素”と呼ばれていましたが、この呼び方は最新のHTML5で廃止されました。
2-1. 要素は縦に並ぶ
ウェブページを大まかにみるとdisplay:blockの要素が上から下へと並ぶことで構成されています。blockの要素の前後には改行が入り、縦に並んでいきます。
試しに、初期値がblockであるpタグを２つ並べてみましょう。分かりやすくするために背景には色をつけることにします。
<p class="block1">これはブロック1です</p> <p class="block2">これはブロック2です</p>CSSコード
.block1 {
background: orange;
}
.block2 {
background: skyblue;
}
これはブロック1です
これはブロック2です
このように要素の前後には改行が入り、縦に並んでいきます。
2-2.幅と高さを指定できる
blockの要素には幅（width）と高さ（height）の指定ができます。つまり初期値がblockのdivタグやpタグは幅・高さが指定できるわけですね。
実際に試してみましょう。pタグの幅・高さをそれぞれ100pxずつ設定してみます。
<p class="block1">これはブロック</p>CSSコード
.block1 {
background: orange;
width: 100px;
height: 100px;
}
これはブロック
指定したwidthとheightがちゃんと反映されていますね。
2-3. 余白も上下左右に指定できる
blockの要素では、余白も自由に決めることができます。言い換えると、上下左右にpadding（要素の内側の余白）とmargin（要素の外側の余白）の値を自由に指定できます。
実際に試してみましょう。pタグにpaddingとmarginをそれぞれ10pxずつ設定してみます。
<p class="block1">これはブロック</p>CSSコード
.block1 {
background: orange;
padding: 10px;
margin: 10px;
}
これはブロック
きちんと余白が作られているのが分かりますね。
2-4. text-alignやvertical-alignの指定はできない
text-alignは横方向のテキストの揃え位置を指定するプロパティです。text-align:centerとすれば文章や画像を中央揃えにすることができます。vertical-alignは、これの縦方向バージョンですね。
blockの場合、text-align:centerやvertical-align:middleを指定しても、要素が真ん中に表示されるようにはなりません（要素の中身のテキストは中央揃えになりますが）。
実際に見てみるのが早いですね。初期値がblockのpタグを幅80pxにして、それをtext-alignで中央配置しようとしてみます。
<p class="block1">ブロック</p>CSSコード
.block1 {
background: orange;
width: 80px;
text-align: center;
}
ブロック
要素（オレンジの部分）は左に寄ったままです（要素内の“block”という文字は中央配置になっていますが）。
CSS中級者向けのお話です。blockの要素を中央に配置したいときにはmargin-right:auto; margin-left:autoという指定により横に中央配置にすることができます。blockの要素を縦に中央配置にする方法は以下の記事で解説しています。
3. display: inlineとは？
次はdisplay: inlineです。spanタグやaタグ、imgタグなどは指定しなくても、初期値がinlineとなっています。以前はこれらの要素は“インライン要素”と呼ばれていましたが、この呼び方は最新のHTML5で廃止されました。
3-1. 主に文章の一部として用いられる
inlineはおもに文中の一部として使われます。たとえば、テキストの装飾やリンクなどの要素に用いられるわけですね。
3-2. 要素の間には改行が入らず横に並ぶ
inlineの要素どうしの間には改行が入らず、横に並んでいきます。テキストと同じように右端までたどり着くと改行されます。
試しに、初期値がinlineであるaタグとspanタグを並べてみましょう。分かりやすくするために背景には色をつけることにします。
<p>これは<a href="https://saruwakakun.com/">aタグ</a>と<span>spanタグ</span>です。</p>CSSコード
a {
background: skyblue;
color:white;
}
span {
background: orange;
}
これはaタグとspanタグです。
このようにinlineの要素の前後には、改行が入らず横に並んでいきます。
3-3. 基本的にはblockの中で用いられる
inlineの要素は、基本的にはblockの要素の中に入ります。
逆にinlineの中にblockを入れることはほとんどありません。
3-4. 幅と高さを指定できない
inlineの要素は、CSSで幅（width）と高さ（height）を指定することができません。inlineの要素の幅と高さは「要素の中身」に応じて決まります。つまり「テキストの長さ」や「文字の大きさ」により幅と高さが自動で決まるわけですね。
試しに、初期値がinlineであるspanタグの幅と高さを調整しようとしてみます。
<p>これは<span class="example">spanタグ</span>です。</p>CSSコード
.example {
width:200px;
height: 200px;
background: skyblue;
}
これはspanタグです。
このようにinlineの要素に対してCSSで幅と高さを指定しても、要素の大きさはピクリとも変わりません。
3-5. 上下の余白を調整できない
inlineでは左右の余白（padding・margin）は自由に指定することができます。
しかし、上下のmarginを指定することはできません。また、上下のpaddingは指定できるものの、paddingを大きくすると、改行されたときに前後の行とかぶってしまい、デザインが崩れてしまいます。
inlineの要素で指定できる余白は左右だけと思っておけば良いでしょう。 試しにspanタグの余白を変えようとしてみましょう。
<p>これから書くのは<span class="example">margin20pxのspanタグ</span>の例文です。</p> <p>これから書くのは<span class="example2">padding20pxのspanタグ</span>の例文です。</p>CSSコード
.example {
margin: 20px;
background: skyblue;
}
.example2 {
padding: 20px;
background: skyblue;
}
これから書くのはmargin20pxのspanタグの例文です。
これから書くのはpadding20pxのspanタグの例文です。
横方向のpaddingとmarginはきちんと指定されています。一方で、上下のmarginは無効になっています。上下のpadding指定は反映されているものの、前の行とかぶってカオスなことになってしまいました。
3-6. text-alignが指定できる
inlineの要素では「text-align」や「vertical-align」を指定することができます（これはblockにはできないことでしたね）。ただし、inlineの要素にtext-alignを指定するときには、親要素に対して指定する必要があります。つまり、以下のように指定をします。
divタグの中にあるspanタグに対して、text-alignで中央寄せしたいとき div {text-align: center}と書く
試しに、inlineの要素を中央寄せにしてみましょう。
<div id="example"> <span>inline</span> </div>CSSコード
#example {
/*親要素のdivに対して指定する*/
text-align:center;
}
span {
background: skyblue;
}
一方でvertical-alignを指定するときには、親要素ではなくinlineの要素に対して直接指定すればOKです。
3-7. inline⇔blockはCSSで指定すれば変えられる
たとえば、初期値がblockのpタグをCSSでdisplay: inlineに指定して変えることができます。逆に、初期値がinlineのaタグをdisplay: blockに変えることもできます。
例として、aタグをblockに変えてみましょう
<p>これは<a href="https://saruwakakun.com/">aタグ</a>の例文です。</p>CSSコード
a {
display: block;
background: skyblue;
color:white;
}
これはaタグの例文です。
aタグがblockになりました。これで横幅や高さを自由に指定できるようになるわけですね。
4. display: inline-blockとは？
では、display: inline-blockというのはどんなものでしょうか。これはinlineとblockの間を取ったようなものです。ざっくりと言えば、要素の並び方はinline的で、要素の中身はblock的な性質を持ちます。
4-1. 改行が入らず横に並ぶ
inline-blockの並びはinlineと同じようになります。改行が入らず、横に並んでいくわけですね。
4-2. 幅・高さの指定ができる
一方で、幅・高さについてはblockと同じように自由に指定することができます。
4-3. 上下左右の余白の指定もできる
また、余白についてもblockと同じで、marginとpaddingの値を自由に指定することができます。
4-4. text-alignとvertical-alignの指定もできる
また、inline-blockでは「text-align」や「vertical-align」の指定をすることもできます。なんだかいいとこ取りという感じがありますね。
4-5. 使いどころは？
基本的にウェブページはdisplay:blockとdisplay:inlineの要素で構成されます。では、この便利そうなinline-blockは実際にどのようなところで使えるのでしょうか。
基本的にモノを横に並べたいときに使える！
基本的には要素を横にずらっと並べたいときに使うと便利です。
たとえば、ソーシャルシェアボタンを横並びに配置するときだったり…
メニューバー（ナビゲーションバー）でボタンを横に並べたいときなどですね。
これをblockでやろうとすると、通常だと1つ1つのボタンの間に改行が入ってしまい、「float:left」などの少し複雑なプロパティで対応する必要があります。また、これをinlineでやろうとすると、幅・高さ・余白を自由に指定できません。そこでinline-blockが便利なわけですね。
メニューバーを作ってみよう
実際にinline-blockで横並びのメニューバーらしきものをサクッと作ってみましょう。ここでは初期値がblockであるul・liを使ってみましょう。
<div id="nav"> <ul> <li>HOME</li> <li>HTML</li> <li>CSS</li> </ul> </div>CSSコード
/* ↓id="nav"の中のulに対してCSSを適用*/
#nav ul {
list-style-type: none; /*箇条書きのポッチを消す*/
text-align:center /*左右中央寄せは親要素に対して指定*/
}
/* ↓id="nav"の中のulの中のliに対してCSSを適用*/
#nav ul li {
display: inline-block;/*inline-blockにします*/
width: 80px;/*幅も指定できる*/
padding: 10px 0;/*余白も指定できる*/
margin: 10px 0;/*余白も指定できる*/
vertical-align: middle;/*縦の表示位置も指定できる*/
background: skyblue;/*背景を水色に*/
font-weight: bold;/*文字を太字に*/
color:white; /*文字色を白に*/
}
このコードをブラウザで表示すると以下のようになります。
ものすごく簡単ですね。このようにinline-blockを使うことで簡単に要素を横に並べることができるのです。
5. noneとは？
最後はdisplay: noneです。この値を指定された要素は、ブラウザ上で非表示になります。これについては実際に例を見てみるのがいちばん分かりやすいですね。
<p>これは残します。</p> <p class="invisible">これを非表示にします。</p>CSSコード
.invisible {
display :none;
}
これは残します。
このようにCSSでdisplay: noneを指定したものは、画像でも文字でも何でも非表示になります。
あくまでも非表示になるだけ
あくまでも非表示になるだけであり、ウェブページが開かれるときには普通に読み込まれています。非表示にしたからといって読み込み速度が早くなるわけではないことに注意しましょう。
使いどころは？
レスポンシブデザインを作るときに便利です。※レスポンシブデザイン：ウェブページを見る端末のサイズによって表示を変えるデザインのことたとえば「パソコンで見たときには表示させている要素を、画面の小さいスマホで見たときにだけdisplay:noneで非表示にする」という感じですね。
6. まとめ
ここまでdisplayの4つの値を見てきました。とくに理解しておきたいのはblock、inline、inline-blockですね。改めて以下の画像を見て、それぞれの値を理解しておきましょう。
