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>
