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>
<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

æ–‡ç«
æ–‡ç«
æ–‡ç«

æ–‡ç«
æ–‡ç«
æ–‡ç«
<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
<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>