一覧

ブロックレベル

・縦に積まれていく(改行される)
・width/height が指定できる
・上下左右に margin/padding を指定できる
・text-align は要素の中身に適応される。
・vertical-align は指定できない。
<address>
<div>
<fieldset>
<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>
<em>
<big>
<small>
<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

１週間でできる会員サイト「Limited」

1週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能

概要、お問い合わせ、資料のダウンロードはこちら