| インラインフレームに並ぶテキストの位置（垂直方向）を指定する(CSS) |
vertical-align: top; |
vertical-align は、img要素、td要素、th要素、iframe要素に適用できます。 |
|
vertical-align は、垂直方向の揃え方を指定するプロパティです。このプロパティを<iframe>タグ（要素）に設定すると、インラインフレームに並ぶテキストの位置を指定できます。 |
|
iframe { vertical-align: middle; } |
| プロパティ名 | 値 | 説 明 |
|---|
| vertical-align |
baseline |
ｲﾝﾗｲﾝﾌﾚｰﾑの下端と、親要素のベースラインを揃える（初期値） |
| top |
ｲﾝﾗｲﾝﾌﾚｰﾑの上端と、行の上端を揃える |
| middle |
ｲﾝﾗｲﾝﾌﾚｰﾑの中心と、親要素の文字の中心を揃える |
| bottom |
ｲﾝﾗｲﾝﾌﾚｰﾑの下端と、行の下端を揃える |
| text-top |
ｲﾝﾗｲﾝﾌﾚｰﾑの上端と、親要素のフォントの上端を揃える |
| text-bottom |
ｲﾝﾗｲﾝﾌﾚｰﾑの下端と、親要素のフォントの下端を揃える |
| 数値＋単位（px等） |
任意の位置に揃える（baseline を基準にし、
正の値は下方向、負の値は上方向に表示） |
| パーセント |
|
＊ 「数値＋単位」と「パーセント」の指定は、baseline が基準の位置となります。
＊ 「パーセント」の指定は、行の高さ（line-height）に対する割合となります。 |
 bottom の指定は、Internet Exp.7 以前と Opera は top と同じになります。 |
|
| ★ 使用例とブラウザでの表示 (h2-1) |
|
設定例 ： .h2-1bas { vertical-align: baseline; } .h2-1top { vertical-align: top; }
.h2-1mid { vertical-align: middle; } .h2-1bot { vertical-align: bottom; }
.h2-1t-to { vertical-align: text-top; } .h2-1t-bo { vertical-align: text-bottom; }
.h2-1px10 { vertical-align: 10px; } .h2-1p50 { vertical-align: -50%; } |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
| <iframe src="sample1.htm" class=h2-1bas> サンプル</iframe>:baseline
<iframe src="sample2.htm" class=h2-1top>サンプル</iframe>:top |
|
| <iframe src="sample1.htm" class=h2-1mid> サンプル</iframe>:middle
<iframe src="sample2.htm" class=h2-1bot>サンプル</iframe>:bottom |
|
| <iframe src="sample1.htm" class=h2-1t-to> サンプル</iframe>:text-top
<iframe src="sample2.htm" class=h2-1t-bo>サンプル</iframe>:t-bottom |
|
| <iframe src="sample1.htm" class=h2-1px10> サンプル</iframe>:10px
<iframe src="sample2.htm" class=h2-1p50>サンプル</iframe>:-50% |
|
|
☆ bottom の指定は、Internet Exp.7 以前と Opera は top と同じになります。 |
|
|
|
| 関連するページ |
HTML タグページ  ：インラインフレーム（ｉフレーム）の基本
HTML タグページ ：インラインフレームに並ぶ文字の位置を指定する |
|
| インラインフレームのフロート（浮動化）を指定する(CSS) |
float: left; |
float は、全てのタグ（要素）に適用できます（positionプロパティで「absolute」または「fixed」が指定された要素を除く）。 |
|
float は、フロート（浮動化）を指定するプロパティです。このプロパティを<iframe>タグ（要素）に設定すると、インラインフレームをフロートさせる（インラインフレームを左か右に寄せて、テキストなどを逆側に回り込ませる）ことができます。 |
|
iframe { float: left; } |
| プロパティ名 | 値 | 説 明 |
|---|
| float |
none | フロートさせない（初期値） |
| left |
インラインフレームを左に配置し、テキストなどを右側に回り込ませる |
| right |
インラインフレームを右に配置し、テキストなどを左側に回り込ませる |
|
|
|
| ★ 使用例とブラウザでの表示 (h2-2)スタイルシートの書き方（基本）は、こちら です。 |
|
設定例 ： iframe.fle { float: left; width:220px; height:100px; }
iframe.fri { float: right; width:220px; height:100px; } |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
<iframe src="sample.htm" class=fle>
サンプル</iframe>ｉフレームを左に配置。 |
ｉフレームを
左に配置。 |
<iframe src="sample.htm" class=fri>
サンプル</iframe>ｉフレームを右に配置。 |
ｉフレームを
右に配置。 |
|
|
|
| 関連するページ |
HTML タグページ ：インラインフレーム（ｉフレーム）の基本
HTML タグページ ：インラインフレームに並ぶ文字の位置を指定する |
|
| インラインフレームの周囲にマージンを入れる(CSS) |
margin: ***; |
margin は、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。 |
|
margin は、上下左右のマージン（外側の余白）をまとめて指定するプロパティです。このプロパティを<iframe>タグ（要素）に設定すると、インラインフレームの周囲にマージンを入れることができます。 |
|
iframe { margin: 5px 10px; } |
| プロパティ名 | 値 | 説 明 |
|---|
| margin |
数値＋単位（px 等） or パーセント |
マージンの大きさを指定 |
|
|
【指定方法】 |
次の４タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
① margin: 2px; … 「上下左右」をまとめて指定
② margin: 2px 3px; … 「上下」と「左右」を指定
③ margin: 2px 3px 4px; … 「上」､「左右」､「下」を指定
④ margin: 2px 3px 4px 5px; … 「上」､「右」､「下」､「左」を指定（時計回り） |
|
| ★ 使用例とブラウザでの表示 (h2-3)スタイルシートの書き方（基本）は、こちら です。 |
|
設定例 ： .h2-3mar { margin: 0 15px 0 0; float: left; width:220px; height:100px; }
iframe.fle { float: left; width:220px; height:100px; } |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
<iframe src="sample.htm" class=fle>
サンプル</iframe>ﾏｰｼﾞﾝ無し：<br>
ｉフレームを<br>左に配置｡ |
ﾏｰｼﾞﾝ無し：
ｉフレームを
左に配置｡ |
<iframe src="sample.htm" class=h2-3mar>
サンプル</iframe>ﾏｰｼﾞﾝ15px：<br>
ｉフレームを<br>左に配置｡ |
ﾏｰｼﾞﾝ15px：
ｉフレームを
左に配置｡ |
|
☆ margin: 0 15px 0 0; … 値が 0 の場合は単位を省略できます。
☆ この使用例では、フロートの指定と組み合わせています。 |
|
|
|
| 関連するページ |
HTML タグページ ：インラインフレーム（ｉフレーム）の基本
HTML タグページ ：インラインフレームの周囲にスペース（余白）を入れる |
|
| 回り込みを解除する(CSS) |
clear: both; |
clear は、ブロックレベルのタグ（要素）に適用できます。 |
|
clear は、テキストなどの回り込みを解除するプロパティです。このプロパティは、 floatプロパティプロパティによる回り込みを 解除する場合に使用します。 |
|
div { clear: both; } br { clear: left; } |
| プロパティ名 | 値 | 説 明 |
|---|
| clear |
none | 回り込みを解除しない（初期値） |
| left | 左フロートに対する回り込みを解除 |
| right | 右フロートに対する回り込みを解除 |
| both | 左右の回り込みを解除 |
|
clearプロパティは、ブロックレベルの要素に対して指定します。<br>タグに指定した場合でも回り込みを解除できますが、<br>タグはインライン要素のため、文法的には誤った使い方となります。 |
|
| ★ 使用例とブラウザでの表示 (h2-4)スタイルシートの書き方（基本）は、こちら です。 |
|
| 設定例 ： .h2-4cl { clear: both; }
iframe.fle { float: left; width:220px; height:100px; } |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
<iframe src="sample.htm" class=fle>サンプル
</iframe>回り込みの<br>解除は、
<div class=h2-4cl>clear を使用します。</div> |
回り込みの
解除は、
clear を使用します。 |
|
☆ <div class=h2-4cl>は、 <br class=h2-4cl>と記述しても、回り込みを解除できます。 |
|
|
| 関連するページ |
| HTML タグページ ：文字の回り込みを解除する |
|
