iframeダグ/フレーム

<iframe>タグはフレームを示します。

説明

 <iframe>タグはページの中にフレームを作り、別ファイルを表示します。

フレームの利用例

構文

 <iframe>タグはHTMLボディー内に記述します。構文は以下の通りです。

<iframe src="ファイル名" height="高さ" width="幅" scrolling="スクロール表示指定" frameborder="枠の有無" ></iframe>

 heightはフレームの高さ、widthは幅をpxで指定します。scrollingはスクロールバーを表示する場合はyes、表示しない場合はno、高さや幅が大きい場合だけ表示する場合はautoを指定します。

 スマートフォン等ではスクロールバーが表示されませんが、フリック、又はスワイプする事でスクロール出来ます。フリックは画面を指でタッチしてから上下左右に払う事、スワイプとは画面を指でタッチしてから上下左右にスライドさせる事です。

 frameborderはフレームに枠を付ける場合は1、付けない場合は0を指定します。

 高さや幅は30%等、%で指定する事も出来ます。

利用例

 通常の利用方法は以下です。

<iframe src="example.html" height="180" width="90%" scrolling="auto" frameborder="1" ></iframe>

 上記を表示すると以下になります。

 frameborderを0にして適切な高さと幅を指定すると以下のようにフレームと分からないように表示出来ます。

 高さを100px、幅を100pxとし、scrollingをyes、frameborderを0に指定した表示例は以下です。

 上記では枠がないため、スマートフォン等ではスクロール出来る事が分かりにくくなります。

 高さを60%、幅を50%とし、scrollingをyes、frameborderを1に指定した表示例は以下です。

 上記のようにするとスマートフォン等でもスクロール出来る事が分かり易くなります。

 又、%で指定する場合、周りのボックスで高さや幅が決められていないと有効になりません。上記では点線の枠で高さ150px、幅600pxに指定しており、その60%、50%の範囲でフレームが表示されています。

ディスプレイ

 <iframe>タグで囲むとインラインボックスを示すため、改行されません。

 フレームを横に複数並べるといった使い方が出来ます。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加