1. Home
  2. HTMLタグ
  3. フレームタグ
  4. インラインフレームに並ぶテキストの位置を指定する

インラインフレームに並ぶテキストの位置を指定する


<iframe src="" align=""></iframe>

ブラウザ
IE
Fx
Sf
Cr
O
分類
インライン要素
非推奨属性
要素
iframe要素

iframe要素align="" を追加すると、インラインフレームに並ぶテキストの位置を指定できます。また、インラインフレームをフロートさせることもできます。



<iframe src="example.html" align="left"></iframe>


属性 説明
align="" top 上端揃え
middle 中央揃え
bottom 下端揃え (初期値)
left 左フロート
right 右フロート

上記の属性は、HTML 4.01では非推奨とされています。

【インラインフレームに並ぶテキストの位置】

topmiddlebottom は、 インラインフレームに並ぶテキストの位置(垂直方向)を指定します。

  • top … インラインフレームの上端とテキスト行の上端を揃えます。
  • middle … インラインフレームの中央とテキスト行のベースラインを揃えます。
  • bottom … インラインフレームの下端とテキスト行のベースラインを揃えます。

【フロートの指定】

leftright は、インラインフレームのフロート(浮動化)を指定します。

  • left … インラインフレームを左に配置して、後続の内容を右側に回り込ませます。
  • right … インラインフレームを右に配置して、後続の内容を左側に回り込ませます。

フロートを指定する場合は、「回り込みを解除する」もご覧ください。

【並ぶテキストの扱いについて】

  • topmiddlebottom … インラインフレームの横には1行分のテキストが並びます。
  • leftright … インラインフレームの横に複数行のテキストを回り込ませることができます。

top を指定している場合は、
改行されたテキストはインラインフレームの下に続きます。

left を指定している場合は、
改行されたテキストもインラインフレームの横に続きます。

【ベースラインについて】

英文などの場合、例えば xy では下辺の位置が異なります。

[ベースラインの表示例]

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>

表示例

インラインフレームを右に配置して、
左側にテキストを回り込ませます。
回り込みを解除しました。


フレームタグ

ページの先頭へ


inserted by FC2 system