CSSリファレンス
実践向けCSSリファレンス

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

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>メニュー1</li>
  <li>メニュー2</li>
  <li>メニュー3</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インライン要素を生成します
tableHTML要素の「table」タグと同じ振る舞いをする、ブロック要素を生成します
flexブロック要素のような振る舞いで、その中のコンテンツはflexboxモデルにしたがってレイアウトされます
list-itemHTML要素の「li」要素と同じような振る舞いをする、ブロック要素を生成します
table-row-groupHTML要素の 「tbody」と同じような振る舞いをします
table-header-groupHTML要素の 「thead」と同じような振る舞いをします
table-footer-groupHTML要素の 「tfoot」と同じような振る舞いをします
table-rowHTML要素の 「tr」と同じような振る舞いをします
table-cellHTML要素の 「td」と同じような振る舞いをします
table-column-groupHTML要素の 「colgroup」と同じような振る舞いをします
table-columnHTML要素の 「col」と同じような振る舞いをします
table-captionHTML要素の 「caption」と同じような振る舞いをします
none要素を非表示にします。指定された要素の中身は存在しなかったようにレンダリングされます
inline-blockインラインレベルのブロック要素を生成します
inline-list-item list-itemを指定した場合の振る舞いをインラインで生成します
inline-tabletableを指定した場合の振る舞いをインラインで生成します
inline-flexflexを指定した場合の振る舞いをインラインで生成します

使用例

スマートフォンサイトでみられるような縦積みメニューの例です。どの幅でみても横幅いっぱいに広がり、<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>

仕様書

関連CSSプロパティ

閉じる