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

• メニュー1
• メニュー2
• メニュー3

<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

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