【CSS】display：表示方法を指定する

（例）【CSS】displayの使用方法

See the Pen
display by linlin (@linlin098765)
on CodePen.

<div>インライン→ブロック</div>
<p>display:block;<a class="sample1" href="http://www.htmq.com/">リンク</a></p>
<div>ブロックレベル→インライン</div>
<p>display:inline;<h3 class="sample2">見出し</h3></p>

<ul class="sample3">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>

.sample1 {display:block; background-color:gray;}
.sample2 {display:inline; background-color:gray;}

ul.sample3 {
display:-webkit-flex;
display:flex;
width:100%;
list-style-type:none;
margin:0; padding:0;
}
ul.sample3 li {
width:25%;
}
ul.sample3 a {
display:block;
margin:2px; padding:5px; font-size:12px;
background-color:gray; color:white;
text-align:center;
text-decoration:none;
}

【CSS】display：表示方法を指定する

　CSSのdisplayは、要素（ブロック、インライン、テーブル等）の表示方法を指定するプロパティです。

インラインとブロック

• inline
  インラインボックスを生成（初期値）
• block
  ブロックボックスを生成
• list-item
  liタグに近いリスト内容のブロックボックスとマーカーボックスを生成
• run-in
  コンテンツによりブロックまたはインラインボックスのどちらかを生成
• inline-block
  インラインブロック生成

テーブル

• table
  table風の表示
• inline-table
  インラインのtable風表示
• table-row-group
  tbodyタグ風の表示
• table-header-group
  thead風の表示
• table-footer-group
  tfoot風の表示
• table-row
  tr風の表示
• table-column-group
  colgroup風の表示
• table-column
  col風の表示
• table-cell
  td風の表示
• table-caption
  caption風の表示

ルビ

• ruby
  ruby風の表示
• ruby-base
  rb風の表示
• ruby-text
  rt風の表示
• ruby-base-container
  rbc風の表示
• ruby-text-container
  rtc風の表示

非表示・継承

• none
  非表示
• inherit
  親要素の値を継承

フレックスコンテナ

• flex
  ブロックのフレックスコンテナの生成
• inline-flex
  インラインのフレックスコンテナの生成

グリッドレイアウト

• grid
  ブロックのグリッドコンテナの生成
• inline-grid
  インラインのグリッドコンテナの生成