<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>
表示例
インラインフレームを右に配置して、
左側にテキストを回り込ませます。
回り込みを解除しました。
- サイト内検索