<iframe src="" align=""></iframe>
| ブラウザ |
|
|---|---|
| 分類 | |
| 要素 |
iframe要素に align="" を追加すると、インラインフレームに並ぶテキストの位置を指定できます。また、インラインフレームをフロートさせることもできます。
<iframe src="example.html" align="left"> ～ </iframe>
| 属性 | 値 | 説明 |
|---|---|---|
align="" |
top |
上端揃え |
middle |
中央揃え | |
bottom |
下端揃え （初期値） | |
left |
左フロート | |
right |
右フロート |
上記の属性は、HTML 4.01では非推奨とされています。
インラインフレームに並ぶテキストの位置
top、middle、bottom は、 インラインフレームに並ぶテキストの位置（垂直方向）を指定します。
top… インラインフレームの上端とテキスト行の上端を揃えます。middle… インラインフレームの中央とテキスト行のベースラインを揃えます。bottom… インラインフレームの下端とテキスト行のベースラインを揃えます。
フロートの指定
left と right は、インラインフレームのフロート（浮動化）を指定します。
left… インラインフレームを左に配置して、後続の内容を右側に回り込ませます。right… インラインフレームを右に配置して、後続の内容を左側に回り込ませます。
フロートを指定する場合は、回り込みを解除するもご覧ください。
並ぶテキストの扱いについて
top、middle、bottom… インラインフレームの横には1行分のテキストが並びます。left、right… インラインフレームの横に複数行のテキストを回り込ませることができます。
top を指定している場合は、
改行されたテキストはインラインフレームの下に続きます。
left を指定している場合は、
改行されたテキストもインラインフレームの横に続きます。
ベースラインについて
英文などの場合、例えば x と y では下辺の位置が異なります。
x 文字のように、下側にはみ出ていない文字の下辺ラインを、ベースラインといいます。
- 日本語の場合はベースラインは存在しません。
使用例
<p>
<iframe src="iexample_a.html" width="200" height="130" align="top">代替内容</iframe>
右側の上部にテキストを表示します。
</p>
- 表示例
-
右側の上部にテキストを表示します。
<p>
<iframe src="iexample_a.html" width="200" height="130" align="middle">代替内容</iframe>
右側の中央にテキストを表示します。
</p>
- 表示例
-
右側の中央にテキストを表示します。
<p>
<iframe src="iexample_a.html" width="200" height="130" align="bottom">代替内容</iframe>
右側の下部にテキストを表示します。（デフォルト）
</p>
- 表示例
-
右側の下部にテキストを表示します。（デフォルト）
<p>
<iframe src="iexample_a.html" width="200" height="130" align="left">代替内容</iframe>
インラインフレームを左に配置して、
<br>
右側にテキストを回り込ませます。
<br clear="left">
回り込みを解除しました。
</p>
- 表示例
-
インラインフレームを左に配置して、
右側にテキストを回り込ませます。
回り込みを解除しました。
<p>
<iframe src="iexample_a.html" width="200" height="130" align="right">代替内容</iframe>
インラインフレームを右に配置して、
<br>
左側にテキストを回り込ませます。
<br clear="right">
回り込みを解除しました。
</p>
- 表示例
-
インラインフレームを右に配置して、
左側にテキストを回り込ませます。
回り込みを解除しました。