img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

iframe(インラインフレーム)


インラインフレームを作る

  ie6 nn7 op8

<iframe>はinline frameの略です。
<iframe>は<frameset>とは違い、画面を縦や横に分割するのではなくページ内にフレームを表示することができます。
<iframe>タグは<body></body> 内で使用します。
src属性でフレーム内に表示する内容を指定し、name属性でフレームに名前を付けることでインラインフレームを
リンクの表示先として指定することができます。

属性 説明 サポート
align="数値" iframeを表示する位置を指定(top,middle,bottom,left,right) ie3〜,html4.0〜
src="url" iframe内に表示するurlを指定 ie3〜,html4.0〜
name="*" iframeの名前 ie3〜,html4.0〜
frameborder="*" iframe枠線の有無(yes,no,auto,1,0) ie3〜,html4.0〜
bordercolor="色名" iframe枠線の色を指定 ie4〜
scrolling="*" スクロールバーの有無(yes,no,auto 省略時はauto) ie3〜,html4.0〜
marginheight="数値" iframe内の上下の余白(ピクセル数) ie3〜,html4.0〜
marginwidth="数値" iframe内の左右の余白(ピクセル数) ie3〜,html4.0〜
height="数値" iframeの高さ(ピクセルまたはパーセンテージで指定) ie3〜,html4.0〜
width="数値" iframeの横幅(ピクセルまたはパーセンテージで指定) ie3〜,html4.0〜

■ iframe使用例



<iframe>〜</iframe>の間にはインラインフレーム未対応ブラウザへのメッセージを記述します。
<iframe src="***.html" name="フレーム名" width="横幅" height="高さ"> この部分はiframe対応のブラウザで見てください。</iframe>

○ スタイルを指定するとborderの線種や太さを変えることができます。

<iframe src="***.html" name="フレ−ム名" style="border:枠の太さpx 枠の種類 枠の色;" frameborder="0" width="横幅" height="高さ">
この部分はiframe対応のブラウザで見てください。
</iframe>


例:

例:<iframe src="***.html" name="sample" style="border:3px dotted #00cc66;" frameborder="0" width="300" height="200">
この部分はiframe対応のブラウザで見てください。
</iframe>





透過インラインフレームを作る

  ie6 nn7

ページの背景を透過するiframeを表示できます。
背景画像を共有する事によって、ページに統一感を持たせることができます。
opera7ではiframeを表示することはできますが、透過はできません。

■ 透過 iframe使用例



 背景を透過して枠内に別ページが表示されています。

iframeを挿入するページの表示位置にタグ↓
<iframe src="***.html" name="フレ−ム名" style="border:枠の太さpx 枠の種類 枠の色;" frameborder="0" width="横幅" height="高さ" allowtransparency="true">
この部分はiframe対応のブラウザで見てください。
</iframe>


iframeの中に表示させるペ−ジの<body>タグを↓のように変える。
<body style="background-color:transparent;">

○ フレ−ム名はリンクに使う場合、必ず付けて下さい。
○ iframe外からリンクを貼る場合はリンクにタ−ゲット指定をします。"フレ−ム名"に付けた名前をタ−ゲット指定して下さい。
  (リンクが<a href="リンク先url" target="フレ−ム名">になります。)

例:


click return




半透明インラインフレームを作る

  ie6 nn7

ページの背景を淡く透過するiframeを表示できます。
iframe内に表示するページの背景(色・画像)・文字色・画像も半透明になります。透過の度合いを大きくし過ぎたり、
色の薄い文字や画像は見栄えを損ないますので使用にご注意下さい。

■ 半透明 iframe使用例



 背景を半透明化して枠内に別ページが表示されています。(60 % )


<iframe src="***.html" name="フレーム名" style="border:枠の太さpx 枠の種類 枠の色;filter:alpha(opacity=A);-moz-opacity:B;opacity:C;" frameborder="0" width="横幅" height="高さ">
この部分はiframe対応のブラウザで見てください。
</iframe>



filter:alpha(opacity=A) →IEの透明度を指定
  → 0〜100 0に近いほど透明に、100に近いほど不透明になります。
-moz-opacity:B →NNとFirefoxの透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。
opacity:C →OperaやSafari、GoogleChromeなどwebkit系の透明度を指定
  → 0〜1 0.6などの小数点で指定。0に近いほど透明に、1に近いほど不透明になります。

ほとんどのブラウザで半透明を実現するには、3つとも指定する必要があります。