<iframe>インラインフレームを作る

<iframe>はInline Frameの略です。インラインフレームを作ります。インラインフレームとは、HTML文書の中にフレームを埋め込む方法です。

<iframe></iframe>タグ内には、対応していないブラウザで表示する内容を記述します。インラインフレームは大変便利で使いやすいフレームですが、Netscape Navigator4.x以下は対応していませんが、
<ilayer>タグを使用することで<iframe>と同様の表示にすることができます。

属性 機能
<iframe src="URL"> 表示するURL
<iframe name="名前"> フレームの名前
<iframe align="left"> 左揃えで表示(初期値)
<iframe align="center"> 中央揃えで表示
<iframe align="right"> 右揃えで表示
<iframe scrolling="yes"> スクロールバーを表示
<iframe scrolling="no"> 表示しない
<iframe scrolling="auto"> 自動切換え(初期値)
<iframe frameborder="1"> 境界線を表示(初期値)
<iframe frameborder="0"> 境界線を非表示
<iframe width="数値/%"> フレームの幅幅
<iframe height="数値/%"> フレームの高さ
<iframe marginwidth="数値"> フレームの左右の余白
<iframe marginheight="数値"> フレームの上下の余白
<iframe noresize> フレームのリサイズを禁止

■注意点
リンク先をインラインフレームにしたい場合、target属性をインラインフレームで設定したname属性の値にします。

<noframes>フレームが表示できない場合の表示内容を指定

<noframes>タグは、フレームを利用する際に、フレームが表示できない環境用の表示内容を指定します。

<noframes>タグは、<frameset></frameset>内に記述します。

フレームに対応していないブラウザを使用している場合や設定でフレームを表示しないようにしている場合などは、<noframes></noframes>内に書かれた内容が表示されます。

<noframes></noframes>範囲内の内容は、フレームを表示する環境では無視されます。

■注意点

フレームに対応していないブラウザは、<frameset>タグ、<frame>タグや<noframes>タグも認識できないため、<noframes>タグ内にある<body>タグを認識して、それを表示します。

<frame>フレームに表示するファイル指定

<frame>タグは、<frameset>タグで定義したフレームに表示するファイルを指定します。

name属性を設定することで、リンク先の表示するフレームを変えることができます。

<frame>タグには終了タグはありません。

<frameset></frameset>の中に配置して、src属性により表示するファイルのURIを指定します。

属性 機能
<frame src="frame.html"> 表示するURL
<frame name="leftframe"> フレームの名前
<frame scrolling="yes"> スクロールバーを表示
<frame scrolling="no"> 表示しない
<frame scrolling="auto"> 自動切換え(初期値)
<frame frameborder="1"> 境界線を表示(初期値)
<frame frameborder="0"> 境界線を非表示
<frame marginwidth="数値"> フレームの左右の余白
<frame marginheight="数値"> フレームの上下の余白
<frame noresize> フレームのリサイズを禁止

■注意点
リンク先のフレームを別フレームにしたい場合は、target属性をフレームに設定したname属性の値にします。

<frameset>ウィンドウをフレームに分割

<frameset>タグは、ウィンドウをフレームに分割し定義します。

HTMLでは、ブラウザの表示領域をフレームに分割し、複数の異なるページを表示することができます。

例)フレームを使って左右に2分割する場合

  • フレーム定義HTML
  • 左フレームHTML
  • 右フレームHTML

の3つのHTMLファイルが必要になります。

フレーム定義HTMLにアクセスすると、分割されたページが表示されます。

<bodyタグの内に<frameset>タグを記述します。

<frameset>でウィンドウを分割する際には、 ウィンドウをどのように分けるかを指定するファイルが1枚と、分割する各フレーム数分のファイルが必要です。

リンク先を別フレームに表示させたい場合には、 各<frame>タグのname属性で名前を付けておき、 <a>タグでリンク先を指定する際にtarget属性でリンク先フレーム名を指定します。

属性 機能
<frameset cols="20%,40%"> フレームの横幅
<frameset rows="200,*"> フレームの縦幅
<frameset border="2"> 境界線の幅
<frameset bordercolor="red"> 境界線の色
<frameset frameborder="1"> 境界線の表示する
<frameset frameborder="no"> 境界線を表示しない
<frameset framespacing="2"> 境界線の幅

■注意点

  • フレームは便利な反面、ノートパソコン等の小さな画面では見づらいなどの短所もあります。
  • <frameset>タグが対応していないブラウザでは、<noframeset>タグ内に書いた内容が表示されます。
  • フレームをさらに分割したい場合や水平分割と垂直分割を組み合わせる場合には、<frameset>タグ内にさらに<frameset>タグを記述することができます。

<script>スクリプトの埋め込み

<script>タグは、HTML中にスクリプトを埋め込むためのタグです。

スクリプトの言語のタイプを示すtype属性は必須属性です。 type属性には、以下のようなスクリプト言語名を指定します。

  • JavaScript
  • JavaScript1.1
  • JavaScript1.2
  • VBScript

など。

<script>タグに対応していないブラウザで、 スクリプト部分がそのままテキストとして表示されることを避けるために、スクリプトをHTML内に記述する際には、スクリプト部分全体を<!-- -->(コメント)で囲みます。

また、スクリプトが長くソースが複雑になる場合や、 スクリプト部分をユーザーから見られにくくしたい場合には、スクリプト部分を外部ファイル(jsファイルなど)にして、<script>タグのsrc属性で読み込みます。

のように記述します。

<noscript>スクリプトが動作しない環境の表示内容を指定

<noscript>タグは、スクリプトが動作しない環境で表示内容をスクリプトの代わりに表示させる内容を指定します。

<noscript>タグ範囲内に記述された内容は、ユーザーの使用しているブラウザがスクリプトに対応していない場合や、 スクリプトを実行しない設定にしている場合などに表示され、スクリプトに対応しているブラウザでは表示されません。

■注意点

<noscript>タグは、<head></head>内ではなく、 <body></body>内に記述する。

<style>埋め込みスタイルシート

<style>タグは、HTML文書の中にスタイルシートを埋め込みます。

◎スタイルシートの利用方法

  • <link>タグで拡張子が .css の外部スタイルシートファイルを読み込む
  • <head></head>内に<style>タグを用いてスタイルシートを記述する方法
  • 各タグにstyle属性の値としてスタイルを指定する方法があります。

■注意点

<style>タグを用いてスタイルシートをHTML内に記述する場合には、 スタイルシート全体を<!-- -->でコメントにします。これは、スタイルシートに対応していないブラウザで、 スタイルシートがそのままテキストとして表示されることを避けるためです。