ほんっとにはじめての HTML5 と CSS3

displayプロパティは、各要素の表示形式を指定します。
display は「表示」という意味。

例えば、インラインの要素をブロックに変えたり、その逆もOK。
リストと関係ない要素を リスト風に表示したり、テーブルじゃない要素をテーブル風にしたりもできます。
Flexbox も、この displayプロパティで display: flex と指定して作ります。

テーブル風なモノは、以前「display: table」「display: table-cell」を使ったサンプルを紹介しましたね。画面の縦中央に配置したい時にはテーブルの性質を使うというサンプル↓
（vhという単位の紹介の記事です）

displayプロパティは、かなり内容が盛りだくさんなので、記事を数回に分けます。
こんなかんじで↓

【17-1】display でボックスの表示形式を自由に変えよう　←今日はココ

displayプロパティと値の一覧／display: inline／block／inline-block／none／run-in

【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく

display:list-item で、<li>要素じゃない要素を<li>要素のように扱えます

【17-2-2】リスト関連の要素のためのCSSプロパティ

リスト関連の要素だけに使えるCSSプロパティをまとめます

【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく

display:table などで、テーブル関連じゃない要素にテーブルの性質を与えます

【17-3-2】テーブル関連の要素のためのCSSプロパティ

テーブル関連の要素だけに使えるCSSプロパティをまとめます

【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに

display:ruby で、要素にルビ（ruby）を表示する機能を与えます

【17-4-2】ルビ関連の要素のためのCSSプロパティ

ルビ関連の要素だけに使えるCSSプロパティをまとめます

display: flex に関しては、Flexbox として仕切り直します。

display: flex で「Flexboxコンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります。【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）から5回くらいでまとめる予定です。

1. 各HTML要素の ブラウザデフォルトのdisplayの値
2. displayプロパティの値一覧
3. displayプロパティのベーシックな値
   1. display: inline でパンくずリストを作る
   2. display: block でリンクボタンを作る
   3. display: inline-block でメニューを作る
   4. display: none でプルダウンメニューを作る
4. display:run-in を使ってみたけど...

参考資料：W3C - CSS Display Module Level 3

各HTML要素の ブラウザデフォルトのdisplayの値

HTML要素のスタイルには大きく分けて「インライン」と「ブロック」がありましたね。
横に並ぶのが「インライン」、幅や高さを持ち縦に並ぶのが「ブロック」ですが、これらのスタイルは displayプロパティで決められているんです。

ブラウザのデフォルトスタイルが display: inlineだったらインライン、display: block だったらブロックです。

また、ブラウザデフォルトでその要素特有の display の値を持つ要素もあります。
<li>要素は display: list-item、
<table>は display: table、
<th> や <td> は display: table-cell といったかんじです。

主な HTML要素が持っている デフォルトの displayの値 を一覧にしてみました。

HTML要素	ブラウザデフォルトのdisplayの値
a（中身がフレージング・コンテンツのとき） span　ruby　sub　sup　strong　em　mark　b　i　small　br　u　s　ins　del cite　q　abbr　dfn　code　kbd　samp　var　bdo　label （フレージング・コンテンツに分類される要素はインラインですね） ★以下は置換要素★ img　area　audio　canvas　embed　iframe　object　video　menu など （エンベッディド・コンテンツの要素（外部コンテンツを組み込む要素）ですね）	display: inline
input　textarea　select　button （インタラクティブ・コンテンツに分類される要素（フォームの部品の要素））	display: inline-block
●ヘディング・コンテンツに分類される要素 h1〜h6 ●セクショニング・コンテンツに分類される要素 section　article　aside　nav ●フロー・コンテンツで他のカテゴリに含まれないもの header　footer　div　p　address　pre　figure　hr　blockquote　 ul　ol　dl　li　table　form　fieldset ●このほか、html要素、body要素も	display: block
li（リストアイテム。ul や ol の子要素）	display: list-item
table（テーブル）	display: table
tr（テーブルの行）	display: table-row
th　td（テーブルのセル）	display: table-cell
thead（tableの横列をグループ化する要素）	display: table-header-group
tbody（tableの横列をグループ化する要素）	display: table-row-group
tfoot（tableの横列をグループ化する要素）	display: table-footer-group
colgroup（tableの縦列をグループ化する要素）	display: table-column-group
col（tableの縦列をグループ化する要素）	display: table-column

displayプロパティの値一覧

上記の displayプロパティの 値 以外にも「flex」「inline-flex」という値もあります。
displayプロパティの値を一覧に整理しました。

display の値
none	要素を非表示に。領域も無くなります。	Basic (CSS1)
inline	要素はインラインの性質になります。これがデフォルト値。 ただし、ブラウザのデフォルトスタイルは各要素ごとに決まっているので、displayを省略したら全部 inline になるわけではありません。 （→各要素のブラウザデフォルト）
block	要素はブロックレベルの性質になります。
list-item	要素は<li>要素の表示になり、リストマーカーが付けられます。
inline-block	要素はインラインプロックの性質に。幅や高さはあるけど、インラインのように横に並びます。	Extended (CSS2.1)
table	要素は<table>要素と同じ性質になります。	Table model (CSS2.1)
table-cell	要素はテーブルのセル = <td>要素と同じ性質になります。
table-row	要素は<tr>要素と同じ性質になります。
table-header-group	要素は<thead>要素と同じ性質になります。
table-row-group	要素は<tbody>要素と同じ性質になります。
table-footer-group	要素は<tfoot>要素と同じ性質になります。
table-column-group	要素は<colgroup>要素と同じ性質になります。
table-column	要素は<col>要素と同じ性質になります。
table-caption	要素は<caption>要素と同じ性質になります。
inline-table	要素は<table>要素と同じ性質だけど、インラインの並び方になります。
flex	要素を Flexboxコンテナにします。	Flexbox model (CSS3)
inline-flex	インラインの性質を持つ Flexboxコンテナにします。
ruby	要素は<ruby>要素と同じ性質になります。	Ruby Model (CSS3) ドラフト
ruby-base	要素は<rb>要素と同じ性質になります。
ruby-text	要素は<rt>要素と同じ性質になります。
ruby-base-container	要素は<rbc>要素と同じ性質になります。
ruby-text-container	要素は<rtc>要素と同じ性質になります。
run-in	要素はランインボックスになります。後に続く要素によってブロックかインラインかに変化して表示されます。	Run-In (CSS3) ドラフト

上記の値のほかに、CSS3のドラフトで新たに flow　flow-root　grid　inline-grid　contents という値も登場しているようですが、まだ対応ブラウザが無いっぽいので今回は省略します。（2016年3月記）

displayプロパティの値の継承と適用要素です。

値の継承	なし	適用できる要素	全部

displayプロパティのベーシックな値

今回は displayの値の中でもベーシックな inline, block, inline-block, none を使ってみましょう。（過去記事にもう何度か出てきてたけど）

display: inline でパンくずリストを作る

ブロックレベルの要素をナビゲーションとして横並びにしたい時、display: inline が便利。ヘッダーのメニューとか、パンくずリストでよく使います。

パンくずリストを作ってみましょう。
★パンくずリスト（breadcrumb list）とは、ユーザにウェブサイトの階層（の今どこを見ているか）を教えるナビです。

• Top page
• 2nd page
• Current page

上のサンプルの HTMLです。

<ul id="smp2_1">
<li><a href="#">Top page</a></li>
<li><a href="#">2nd page</a></li>
<li>Current page</li>
</ul>

サンプルの CSSです。

ul#smp2_1 {
	margin:0;
	padding:0;
    font-size:0; /*親のulのフォントサイズを0に初期化しておきます*/
    border:solid 1px #ccc;}
ul#smp2_1 li {
	display: inline;
	font-size:0.8rem;
	line-height:3;
	margin:0 0.2em; 
	padding:0;}
ul#smp2_1 li::before {content: "> "}
ul#smp2_1 li:first-child::before {content: ""}

インラインレベルの要素は、親の font-size を継承するので、要素の周りにスペースができてしまいます。それを解消するために、親に「font-size:0」を指定しています（4行目）子要素に改めて font-size を指定する必要があるけどね。
★値の継承についての詳細は【5】CSSの値の継承（Inheritance）のルール で。
また、8行目の「0.8rem」は、ルート（html要素）に対しての em という単位です。
★rem についての詳細は【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）で。

display: block でリンクボタンを作る

<a>要素をブロックレベルにする基本中の基本の使い方です。

<a>要素はインラインなので、普通はこんなかんじでテキストの領域のみにリンクができますよね。
CLICK!

<a>要素を display:block でブロックレベルにすると幅や高さを持たせることができるし、テキスト以外の背景領域も反応するので、クリックしやすくなります。

上のサンプルの HTMLです。

<a href="#">CLICK!</a>

サンプルの CSSです。

a {
	-webkit-box-sizing: border-box;
    box-sizing: border-box; /*box-sizing*/
	display: block;
	text-align:center;
	line-height:1;
	margin:0;
	padding:1em;
	width:80px;
	background:#fdf5a0;
	border-radius:10px}

display: inline-block でメニューを作る

<li>要素を display:inline-block で横に並べてメニューを作ります。
<li>要素を inline-block にすることで、blockの性質を持ったまま横に並べることができます。

• MENU1
• MENU2
• MENU3

上のサンプルの HTMLです。

<ul>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
</ul>

サンプルの CSSです。

ul#smp2_3 li {
    -webkit-box-sizing: border-box;/*box-sizing*/
    box-sizing: border-box;
	display: inline-block;
	text-align:center;
	line-height:1;
	margin:0 5px 0 0;
	padding:0;
	width:80px;
	background:#fdf5a0;
	border-radius:10px}
ul#smp2_3 li a {display:block; padding:1em}  /*a要素にdisplay:blockして背景領域もリンクさせます*/
ul#smp2_3 li:nth-child(2) {background:#fed5f4}
ul#smp2_3 li:nth-child(3) {background:#c9f0ff}

display: none でプルダウンメニューを作る

display:none を指定すると、領域ごと無くなります。
HTMLソースで「表示したくないけど、また使うかもしれないから削除しないでとっておきたい」ときコメントアウト（HTMLのコメント（<!-- -->）で囲む）をしたりしますが、これと同じように非表示にしたい要素に display:none を指定すれば見えなくなり、領域（スペース）も無くなります。

同じく「非表示」になる指定で visibility:hidden がありますが（これは【19】で紹介する予定です）、こちらは領域はそのまま残ります。ただ隠すだけ。
編集用語で言うと、display:none は「トルツメ」、visibility:hidden は「トルママ」です。

display:none と display:block を切り替えて、サブメニューを通常時は非表示、マウスオーバーで表示にしてプルダウンメニューも作れます。CSSだけで簡単に作れるプルダウンメニューは便利なのでサンプルを貼っておきますね。

＊ご注意＊
ただしコレは「:hover」を使ってサブメニューを表示させるので、PCサイト限定。スマホでは見れません。
スマホの場合のプルダウンメニューは、jQueryの「.toggleClass」などを使うとイイですね。
jQueryの「.toggleClass」に関しては、ドロワーメニュー（ハンバーガーメニュー）を簡単な jQueryとCSSだけで作る手順 | ＊Web Design 覚え書き＊をご覧ください。

• MENU1
  • Sub menu1
  • Sub menu2
  • Sub menu3

上のサンプルの HTMLです。

<ul id="smp2_4">
  <li><a href="#">MENU1</a>
    <ul>  <!-- li要素の中に ulを入れ子にします。これが肝心-->
      <li><a href="#">Sub menu1</a></li>
      <li><a href="#">Sub menu2</a></li>
      <li><a href="#">Sub menu3</a></li>
    </ul>
  </li>
</ul>

サンプルの CSSです。

ul#smp2_4 {
	position:relative; /*親のulにposition:relativeを指定しておきます*/
	z-index:10;        /*他のコンテンツより上のレイヤーにしておきます。*/
	margin:0;
	padding:0}
ul#smp2_4 li {         /*子孫セレクタで、すべてのli（孫も）への指定です*/
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
	display:inline-block; /*親のliは横に並ぶ指定です*/
	text-align:center;
	line-height:1em;
	margin:0 5px 0 0;
	padding:0;
	width:110px;
	background:#fdf5a0;
	border-radius:0.5em}
ul#smp2_4 li a {display:block; padding:1em}
ul#smp2_4 li ul li a {display:block; padding:0.5em 1em}
ul#smp2_4 li ul {
	display:none;      /*通常は非表示にしておきます*/
    position:absolute; /*親のul内に絶対位置指定すれば、表示されても他の要素に影響を与えずに済みます*/
	top:2.5em;
	margin:0;
	padding:0}
ul#smp2_4 li ul li {
	display:block;     /*サブメニューのliはブロックレベルに戻して縦に並べます*/
	border:solid 2px #fdf5a0;
	border-top:none;
	background:#fff;
	border-radius:0}
ul#smp2_4 li ul li:last-child {border-radius:0 0 0.5em 0.5em}
ul#smp2_4 li:hover > ul {
	display:block} /*親のliにマウスオーバーしたら、その中のulを表示します*/

positionプロパティについて
プルダウンメニューは、サブメニューに「display:none」を指定しておいて、親メニューにマウスオーバーしたら「display:block」で表示するという理屈です。
が、ただ単に「display:block」にしたら、サブメニューの領域が無かったところに突然その領域ができるので、それ以降の要素がドカッと下がるよね。で、マウスが他に行ったらまたガって上がって、なんとも見にくいサイトになります。
それを防ぐために、サブメニューの<ul>要素に position:absolute を指定（21行目）して、親の<ul>要素に対して絶対位置で配置します。それで親以外の他の要素との関係が絶たれて、ドカ下がりを防げるんです。＊positionプロパティについては、後日詳しくやるつもりです。

display:run-in を使ってみたけど...

display: run-inって、大昔（CSS1の頃）にあって、一度廃止され、また今のドラフトに登場しているようです。ただ、今のところ実装しているブラウザは無いみたい（2016年3月記）

run-inって「突っ込む」という意味らしく、display:run-inを指定した要素は、すぐ後に続く要素がブロックレベルだったらインラインになって、その後続の要素の冒頭にに突っ込むらしいです。
ブラウザプレビューが今のところ見れなくて、なんとも言えませんが。

とりあえず、W3Cのサンプルソースをそっくりそのまま書いておきますね。
（参考資料：CSS Display Module Level 3__4. Run-In Layout）
<dl>（記述リスト）で構成されていて、<dt>要素に display:run-in を指定しています。↓
（今のところ単なる dlの表示のままだけど、これがいつかちゃんと run-in になるかも）

dictionary

a book that lists the words of a language in alphabetical order and gives their meaning, or that gives the equivalent words in a different language.

glossary

an alphabetical list of terms or words found in or relating to a specific subject, text, or dialect, with explanations; a brief dictionary.

これ↑が、このように↓表示されたいらしい。（コレ↓は画像だけどね）

run-inのサンプルの HTMLはこちら。

<dl id='smp_ri'>
  <dt>dictionary</dt>
  <dd>a book that lists the words of a language in ...（略）</dd>
  <dt>glossary</dt>
  <dd>an alphabetical list of terms or words found in ...（略）</dd>
</dl>

run-inのサンプルの CSSソースです。

dl#smp_ri > dt {display:run-in}
dl#smp_ri > dt::after {content: ": "}

次回予告

今回は displayプロパティの基本的な値を使ってみましたが、他の値もどんどんいきますよ。
次回は、<li>要素じゃない要素を <li>要素っぽく表示できる display: list-item を使ってみよう。
また、リストのためのスタイルを指定する list-styleプロパティ も一緒に紹介します。

関連記事

• 【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）
• 【17-4-2】ルビ関連の要素のためのCSSプロパティ
• 【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに
• 【17-3-2】テーブル関連の要素のためのCSSプロパティ
• 【17-3-1】display:table でテーブルじゃない要素をテーブルっぽく
• 【17-2-2】リスト関連の要素のためのCSSプロパティ
• 【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく
• 【17-1】displayプロパティでボックスの表示形式を自由に変えよう
• （ちょっとメモ）スマホで background-attachment: fixedが効かない場合の対処法
• 【16-2】下限の min-width, min-height 上限の max-width, max-height
• 【16-1】幅の width、高さの heightプロパティ
• 【15-5】backgroundのショートハンド まとめ
• 【15-4】background関連のプロパティ（4/4　clip と origin）
• 【15-3】background関連のプロパティ（3/4　background-size）
• 【15-2】background関連のプロパティ（2/4　background-position）