要素の表示形式を指定する

CSS - display

概要

CSSプロパティ｢display｣は、要素の表示形式を指定できます。表示形式というのは、要素にはブロック要素とインライン要素があり、タグによって初期値が異なっています。このプロパティはそれらの要素に特定の値を指定することで振る舞いを変えることができるのです。

ブロック要素とインライン要素

前提として、この二つがどのようなものなのかを理解しておく必要がありますので、ここで簡単に確認しておきましょう。

ブロック要素は、見出し、段落、表などの文章の骨組みとなる要素です。かならず新しい行から始まり（改行される）、横幅いっぱいに広がります。ブロック要素扱いのHTMLタグの種類では、段落タグの<p>タグや、大見出しを指定する<h1>タグなどがあります。

一方インライン要素は、文章の一部として扱われる要素です。文章の装飾であったりリンクなどが該当、こちらは改行されません。インライン要素扱いのHTMLタグの種類としては、リンクを指定する<a>タグや、画像を挿入する際に使用する<img>タグなどがあります。

<p>Pタグはブロックレベル要素</p>
<p>Pタグはブロックレベル要素</p>
<a href="#">aタグはインライン要素</a>
<a href="#">aタグはインライン要素</a>
<style>
p {
  background-color: #def;
}
</style>

値と解説

よく使用される代表的な値｢block｣, ｢inline｣, ｢inline-block｣, ｢none｣について解説していきます。

値：block

この値を指定すると、ブロック要素を生成します。ブロック要素は高さや幅が指定できたり、改行が入るようになります。これをインライン要素である<a>タグに指定してみます。そうすると、<a>タグはブロック要素として生成されているので、高さを指定できるプロパティ height が効くようになりました。

<p>display:block 指定なし</p>
<a href="#">aタグはインライン要素</a>
<a href="#">aタグはインライン要素</a>

<p>display:block 指定あり</p>
<a href="#" class="block">aタグはインライン要素</a>
<a href="#" class="block">aタグはインライン要素</a>
<style>
a {
  border: 1px solid #000;
  height: 50px;
  background-color: #def;
}
a:hover {
  opacity: 0.4;
}
.block {
  display: block;
}
</style>

値：inline

この値を指定すると、インライン要素を生成します。インライン要素は文章の一部として扱われる特性から改行を伴わないなどの特徴があります。これをブロック要素である<p>タグに指定してみます。そうすると、<p>タグはインライン要素として生成されているので、<p>要素が改行されずそのまま並列に表示されているのがわかります。

<div>display:inline 指定なし</div>
<p>Pタグはブロック要素</p>
<p>Pタグはブロック要素</p>

<div>display:block 指定あり</div>
<p class="inline">Pタグはブロック要素</p>
<p class="inline">Pタグはブロック要素</p>

<style>
p {
  border: 1px solid #000;
  background-color: #def;
}
.inline {
  display: inline;
}
</style>

値：inline-block

この値を指定すると、インライン要素でありながらブロック要素の特徴を持ちます。表示関してはインライン要素のように改行されませんが、ブロック要素のように高さや幅、余白などを指定することができます。

よくみられる例として、ナビゲーションバーなどにおける横並びリストがあります。横並びで表示させたいが、デザインとしては要素の余白が必要、といった例です。ブロック要素扱いの<li>タグが、表示としてはインライン要素扱いなので、並列に表示されますが、ブロック要素の特性も備えているので余白を指定するプロパティの padding が効くようになっています。

<ul>
  <li>メニュー１</li>
  <li>メニュー２</li>
  <li>メニュー３</li>
</ul>
<style>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  padding: 16px;
  background-color: #def;
  display: inline-block;
}
</style>

値：none

最後に、noneです。読み方はカタカナで書くと、｢ノン｣ではなく｢ナン｣と言います。この値を指定すると、要素が表示されません。要素そのものが生成されないのでレイアウトに影響を与えません。何かの条件の時に、要素を非表示にしたい、といったケースで使います。

<p>表示したい文章</p>
<p class="none">非表示にしたい文章</p>
<p>表示したい文章</p>
<p>表示したい文章</p>
<style>
.none {
  display: none;
}
</style>

値

値	説明
block	ブロック要素を生成します
inline	インライン要素を生成します
table	HTML要素の「table」タグと同じ振る舞いをする、ブロック要素を生成します
flex	ブロック要素のような振る舞いで、その中のコンテンツはflexboxモデルにしたがってレイアウトされます
list-item	HTML要素の「li」要素と同じような振る舞いをする、ブロック要素を生成します
table-row-group	HTML要素の「tbody」と同じような振る舞いをします
table-header-group	HTML要素の「thead」と同じような振る舞いをします
table-footer-group	HTML要素の「tfoot」と同じような振る舞いをします
table-row	HTML要素の「tr」と同じような振る舞いをします
table-cell	HTML要素の「td」と同じような振る舞いをします
table-column-group	HTML要素の「colgroup」と同じような振る舞いをします
table-column	HTML要素の「col」と同じような振る舞いをします
table-caption	HTML要素の「caption」と同じような振る舞いをします
none	要素を非表示にします。指定された要素の中身は存在しなかったようにレンダリングされます
inline-block	インラインレベルのブロック要素を生成します
inline-list-item	list-itemを指定した場合の振る舞いをインラインで生成します
inline-table	tableを指定した場合の振る舞いをインラインで生成します
inline-flex	flexを指定した場合の振る舞いをインラインで生成します

使用例

スマートフォンサイトでみられるような縦積みメニューの例です。どの幅でみても横幅いっぱいに広がり、<a>タグに値:blockを指定することでタップ（クリック）できる範囲を全体に広げています。

<ul>
  <li><a class="block" href="#">新着記事をみる</a></li>
  <li><a class="block" href="#">月別一覧をみる</a></li>
  <li><a class="block" href="#">画像一覧をみる</a></li>
  <li><a class="block" href="#">トップに戻る</a></li>
</ul>
<style>
*{
  margin: 0;
  padding: 0;
  list-style:none;
}
li {
  border-bottom: 1px solid #ccc;
}
a {
  text-decoration: none;
}
a:link,
a:hover,
a:focus,
a:visited {
  color: #ddca7e;
}
a:hover,
a:focus {
  background-color: #ccc;
  color: #fff;
}
.block {
  padding: 16px;
  display: block;
}
</style>