インラインフレームと文字の位置関係

広告

文字列とインラインフレームが含まれる文書を作成した場合に、インラインフレームと文字列の縦方向の位置関係を指定します。位置関係を指定するにはiframe要素のalign属性を使います。

<iframe src="HTML文書のURI" width="幅" height="高さ" align="位置関係">
</iframe>

align属性には「top」「middle」「bottom」のいずれかの値を指定します。(他に「left」及び「right」も指定可能ですが、こちらは次のページで確認します)。それぞれの値を指定した場合の位置関係は次のようになります。

align属性位置関係
topインラインフレームの上辺と文字の上辺を合わせる
middleインラインフレームの中央と文字のベースラインを合わせる
bottomインラインフレームの下辺と文字のベースラインを合わせる

なおデフォルトでは「bottom」となっています。

サンプル

では実際に試してみます。下記のようなサンプルページを作成しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>インラインフレーム</title>
  </head>

  <body>
    <h1>インラインフレーム</h1>

    <p>
    この下にインラインフレームを表示します。
    </p>

    <p>
    ここから<iframe src="inline.html" width="150" height="80" align="top">
    </iframe>ここまでです。
    </p>

    <p>
    ここから<iframe src="inline.html" width="150" height="80" align="middle">
    </iframe>ここまでです。
    </p>

    <p>
    ここから<iframe src="inline.html" width="150" height="80" align="bottom">
    </iframe>ここまでです。
    </p>

    <p>
    このようにインラインフレームは、ページ内に任意の位置に
    フレームを設置させることが可能です。
    </p>

  </body>
</html>

ブラウザで表示すると次のように表示されます。

p9-1

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)