CSS display属性

一覧

ブロック要素 インライン要素 インラインブロック要素 備考
改行 × ×
width/height ×
上下マージン ×
左右マージン
子要素に対するtext-align × 〇 ※ ※親要素に指定した場合
子要素に対するvertical-align ×
タグ例 <div>
<form>
<h1>~<h6>
<p>
<table>
<ul><li>
<span>
<a>
<img>
<input>
<label>
<select>

ブロックレベル

縦に積まれていく(改行される)
・width/height が指定できる
・上下左右に margin/padding を指定できる
・text-align は要素の中身に適応される。
・vertical-align は指定できない。
<div>
<form>
<h1>~<h6>
<hr>
<ol>
<p>
<table>
<ul>
通常のリンク(文字の上だけが有効)
ブロックレベルのリンク(ブロック全体が有効)

<a href=”http://~”>通常のリンク(文字の上だけが有効)</a><br/>
<a href=”http://~” class=”block”>ブロックレベルのリンク(ブロック全体が有効)</a>
<style>
  .block {
    /* 本来「インライン」レベルであるリンクを「ブロック」レベルに変更 */
    display: block;
    padding: 5px;
    border:1px solid #888;

  }
</style>

インラインレベル

横に並んでいく(改行されない)
・width/height は指定できない。
 (幅や高さは文字列の長さや文字の大きさ等の内容物のサイズ)
・左右だけ margin を指定できる
・左右に padding を指定できる。
 (上下に指定すると、前後の行や要素にかぶる)
・text-align を親ブロックに付けることで指定できる。
・vertical-align を指定できる。
<br>
<span>
<strong>
<a>
<img>
<input>
<label>
<select>
<textarea>

メニュー1
メニュー2
メニュー3
メニュー4
メニュー5

<div class=”parent”>
  /* ↓ 要素は「インライン」レベルなので自動改行されない(横に並ぶ) */
  <div class=”inline”>メニュー1</div>
  <div class=”inline”>メニュー2</div>
  <div class=”inline”>メニュー3</div>
  /* ↓ 要素は「ブロック」レベルなので自動改行される(縦に並ぶ) */
  <div >メニュー4</div>
  <div >メニュー5</div>
</div>
<style>
  .parent {
    padding: 15px;
    border:1px solid #888;
    width: 80%;

    /* 子要素を中央寄せ */
    text-align: center;
  }
  .inline {
    /* 本来「ブロック」レベルである<div>を「インライン」レベルに変更 */
    display: inline;
    padding: 5px;
    border:1px solid #888;

    /* 「インライン」要素には ↓ は効かない */
    width: 100px;
    height: 100px;
  }
</style>

入れ子の配置

ブロックレベル要素への配置
 ブロックレベル要素:OK
 インライン要素:OK
インライン要素への配置
 ブロックレベル要素:NG
 インライン要素:OK
 

インライン-ブロックレベル

例1

<div class=”parent”>
  <div class=”inlineblock”>メニュー1</div>
  <div class=”inlineblock”>メニュー2</div>
  <div class=”inlineblock”>メニュー3</div>
</div>
<br/>
<style>  
  .parent {
    padding: 15px;
    border:1px solid #888;
    width: 80%;

    text-align: center;
  }
  .inlineblock {
    /* 本来「ブロック」レベルである<div>を「インライン-ブロック」レベルに変更 */
    display: inline-block;
    padding: 5px;
    border:1px solid #888;

    /* 「インライン-ブロック」要素には ↓ は有効 */
    width: 100px;
    height: 100px;
  }
</style>

例2
アイキャッチ(PC)
文章
文章
文章
デザイン
文章
文章
文章

<div class=”parent”>
  <div class=”box”>
    <img src=http://~.gif” width=”128″ /><br/>
    文章<br/>
    文章<br/>
    文章
  </div>
  <div class=”box”>
    <img src=”http://~.gif” width=”128″ /><br/>
    文章<br/>
    文章<br/>
    文章
  </div>
</div>
<style>
  .parent {
    /* 自身は<div>でブロック要素なのでmargin有効 */
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    /* 子要素のインラインブロックを中央寄せ(左右) */
    text-align: center;
    /* 分かりやすくする為に線を付ける */
    border:1px solid #888;

  }
  
  img {
    /* 画像を左寄せ。文章を右側に回り込ませる */
    float: left;
  }
  
  .box {
    /* inline-block:インライン要素とブロック要素の機能を兼ねた要素に変更 */
    (「」参照)
    display: inline-block;
    width: 250px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    max-width: 35%;
    margin: 15px;
    /* 分かりやすくする為に線を付ける */
    border:1px solid #888;

  }
</style>

table/table-row/table-cell

対象 機能
table 親要素 <table>または<tr>と同じ働きに
table-row 子要素 <tr>と同じ働きに
table-cell 子要素 <td>と同じ働きに
ul/li

<ul class=”navi”>
 <li>メニュー1</li>
 <li>メニュー2</li>
 <li>メニュー3</li>
</ul>
<style>
 .navi {
  display: table;
  width: 100%;
  text-align: center;
 }
 .navi li {
  display: table-cell;
  border: 1px solid gray;
 }
</style>

div
1
2
3
4

<div class=”table_table”>
 <div class=”table_row”>
  <div class=”table_col”>1</div>br>
  <div class=”table_col”>2</div>
 </div>
 <div class=”table_row”>
  <div class=”table_col”>3</div>br>
  <div class=”table_col”>4</div>
 </div>
</div>

<style>
 .table_table {
  display: table;
  width: 100%;
 }
 .table_row {
  display: table-row;
 }
 .table_col {
  display: table-cell;
  border: 1px solid gray;
 }
</style>

table
1 2
3 4

<table>
 <tr><td>1</td><td>2</td></tr>
 <tr><td>3</td><td>4</td></tr>
</table>

<style>
 #table_div table {
  display: table;
  width: 100%
 }
 #table_div td {
  display: table-cell;
  border: 1px solid gray;
 }
</style>