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>

Follow me!