今回は、displayプロパティについて解説します。
displayの仕様は頭に入れておかないと上手くレイアウトができないので、しっかりと覚えておきましょう。
display: block
displayにblockを指定すると、要素は横幅いっぱいに広がるボックス（ブロック要素）を形成します。
index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<div class="content">
<p>テキストテキストテキストテキスト</p>
</div>
<div class="content">
<p>テキストテキストテキストテキスト</p>
</div>
</body>
<!-- 省略 -->そして、style.cssを以下のように書き換えてください。
.content {
background-color: #eee;
}div要素は、displayの初期値がblockのため、横幅いっぱいに広がります。
次に、横幅を指定してみます。
.content {
background-color: #eee;
width: 200px;
}ブラウザを確認してみると、要素の右にスペースがあるにも関わらず、下の要素が右側に回り込みません。
このように、display:blockを指定した要素の前後に改行が生成されているのが分かります。
display: inline
display: inlineは、改行を生成しないボックス（インライン要素）を形成します。
テキストの中などで使用する要素に使うことがほとんどです。
index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<div class="content">
<p><span class="text-red">テキスト</span>テキストテキストテキスト</p>
</div>
</body>
<!-- 省略 -->span要素は汎用的な要素で、タグ自体に意味を持ちません。spanは文中で一部のテキストを装飾する時などに使用します。
次に、style.cssを以下のように書き換えてみてください。
.text-red {
color: #ff0000;
}spanで囲まれた部分だけが赤くなりました。
span要素はdisplayの初期値がinlineなので、改行は生成されず、一行に収まります。
では、span要素にdisplay:blockを当てるとどうなるでしょうか。
.text-red {
color: #ff0000;
display: block;
}改行が生成され、1行に収まらなくなりました。
span以外にもリンクを指定するa要素や、太字にして重要な要素を表すstrong要素など、文中で使うような要素はデフォルトがinlineになっています。
インライン要素に効かないプロパティ
インライン要素には効かないプロパティがいくつかあります。
index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<div class="content">
<p><span class="background-gray">テキスト</span>テキストテキストテキスト</p>
</div>
</body>
<!-- 省略 -->次に、style.cssを以下のように書き換えてください。
.background-gray {
background-color: #ddd;
width: 100px;
height: 100px;
}widthとheightを指定しましたが、サイズに変化がありません。display: inlineを指定した要素（デフォルトがdisplay: inlineの要素）には、widthとheightが効きません。
次に、index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<div class="content">
<p>テキストテキストテキストテキスト</p>
<p><span class="background-gray">テキスト</span>テキストテキストテキスト</p>
<p>テキストテキストテキストテキスト</p>
</div>
</body>
<!-- 省略 -->次に、以下のようにstyle.cssを記述してください。
.background-gray {
background-color: #ddd;
margin-left: 100px;
margin-right: 100px;
margin-top: 100px;
margin-bottom: 100px;
}marginは要素と要素の距離を指定するプロパティです（marginの詳しい解説は別のレッスンで行います）。
ブラウザで表示を確認すると、background-grayクラスの左右に広い余白ができましたが、上下の余白に変化はありません。
このように、インライン要素にmargin-top（上の余白）とmargin-bottom（上の余白）は効きません。
次に、index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<div class="content">
<p>
<span class="text-center">テキストテキストテキストテキスト</span>
</p>
</div>
</body>
<!-- 省略 -->そして、style.cssを以下のように書き換えてください。
.text-center {
text-align: center;
}text-align: centerを指定しても、テキストは中央揃えになりません。
index.htmlを以下のように書き換えてみるとどうでしょう。
<!-- 省略 -->
<body>
<div class="content">
<p class="text-center">
<span>テキストテキストテキストテキスト</span>
</p>
</div>
</body>
<!-- 省略 -->text-centerクラスをspanではなく親要素のp要素につけました。
こうすると、テキストは中央揃えになりました。
text-alignは、インライン要素ではなく親のブロック要素に指定します。
display:inline-block
inline-blockは、inlineとblock両方の特徴を合わせたような挙動をします。
index.htmlを以下のように書き換えてください。
<!-- 省略 -->
<body>
<div class="content">
<p class="text-center">
テキスト<span class="background-gray">テキスト</span>テキストテキスト
</p>
</div>
</body>
<!-- 省略 -->次に、style.cssを以下のように書き換えてください。
.background-gray {
background-color: #ddd;
display: inline-block;
}表示を確認すると、inlineと同様に前後に改行は生成されません。
次に、widthとheightを指定してみます。
.background-gray {
background-color: #ddd;
display: inline-block;
width: 100px;
height: 60px;
}inlineの場合はwidthやheightは効きませんが、inline-blockでは反映されています。
ブロックを形成するが、前後に改行が生成されないのがinline-blockです。
.background-gray {
background-color: #ddd;
display: inline-block;
width: 100px;
height: 60px;
text-align: center;
}widthを指定して要素内の左右に余白があれば、text-align: centerも効きます。
inline-blockは、一行に収めたいけど、サイズの指定をしたい時などに使います。
display: none
noneを指定すると要素が存在しなくなります。
style.cssを以下のように書き換えてください。
.content {
display: none;
}ブラウザを確認するとcontentクラスの要素がまるまる消えてなくなりました。
display:noneは以下のような時に使います。
- 端末のサイズによって要素を非表示にしたい時
- 一時的に要素を非表示にしたい時
- ボタンのクリックなどで要素を表示・非表示を切り替えられるようにしたい時
他にもnoneを使うパターンはありますが、大体が上記のような時に使います。
display:flex
flexを指定すると、自由度の高いレイアウトが可能になります。
ただ、説明が長くなるので別のレッスンで詳しく解説します。
display: contents
noneは子要素ごと非表示になりましたが、contentsを指定した要素は存在しないように振る舞いますが、その子要素は表示されたままになります。
style.cssを以下のように書き換えてください。
.content {
background-color: #ddd;
}ブラウザを確認すると、contentクラス要素に背景色がついています。
次に、style.cssにdisplay:contentsを指定します。
.content {
background-color: #ddd;
display: contents;
}display: contentsを指定した要素だけが存在しないようになり、その子要素は消えていません。
ただし、継承は行われます。
.content {
background-color: #ddd;
display: contents;
color: #ff0000;
}子要素のテキストカラーが赤くなります。
contentsはレスポンシブ対応する時に便利なので、覚えておきましょう。
displayの値は他にもありますが、今回はよく使われるのを紹介しました。