インラインフレームの枠

HTMLを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>フレームサンプルページ</title>
</head>
<body>
<p><a href="red.html" target="i_sample">赤画面</a>
<a href="blue.html" target="i_sample">青画面</a>
<a href="green.html" target="i_sample">緑画面</a></p>
<iframe src="yellow.html" name="i_sample" width="300" height="300"
 title="サンプルフレーム" frameborder="0">
<p>インラインフレームを使用しています</p>
</iframe>
</body>
</html>

表示サンプル

表示サンプル（別窓でフレームサンプルが開きます）

解説

フレームウインドウの区切り線のタイプを指定することができます。

1 ：区切り線あり（既定値）

0 ：区切り線なし（ただし、隣のフレームが区切り線ありの場合は引かれる）

フレームについての詳細は「フレームってなに？」を参照下さい。

インラインフレームについては「インラインフレームの作成」を参照下さい。

ＣＳＳを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
iframe.pink { border: 5px dotted #ff00ff; }
iframe.blue { border: 1px solid #0000ff; }
-->
</style>
</head>
<body>
<iframe src="yellow.html" name="i_sample" width="200" height="200"
 title="サンプルフレーム" frameborder="0" class="pink">
インラインフレームを使用しています
</iframe>
<iframe src="yellow.html" name="i_sample" width="200" height="200"
 title="サンプルフレーム" frameborder="0" class="color2">
インラインフレームを使用しています
</iframe>
</body>
</html>

表示サンプル

表示サンプル（別窓でフレームサンプルが開きます）

解説

スタイルシートの「border」を使用することにより、インラインフレームの周りの線をいろいろと変更することができます。スタイル、太さ、色を任意の順番にスペースで区切って指定をします。ただし、「border」では上下左右の線を個別に指定することはできません。もし、個別に上下左右の線をいろいろと変更したい場合は

上の線に関する指定：border-top
左の線に関する指定：border-left
右の線に関する指定：border-right
下の線に関する指定：border-bottom

をそれぞれ使用してください（記述方法は「border」と同様です）。

スタイルに関する指定

スタイルに関する指定は以下のキーワードのいずれかを指定します。

none: 線は表示されず、太さも0になります。表のセル等線が重なり合う場合は他の値が優先されます（初期値）。

hidden: 線は表示されず、太さも0になります。表のセル等線が重なり合う場合はこの値が優先されます

solid: 1本線で表示されます。

double: 2本線で表示されます。

dashed: 破線で表示されます。

dotted: 点線で表示されます。

groove: 立体的にくぼんだ線で表示されます。

ridge: 立体的に隆起した線で表示されます。

inset: 上と左の線が暗く、下と右のボーダーが明るく表示されます。

outset: 上と左の線が明るく、下と右の線が暗く表示されます。

線の太さに関する指定

線の太さは単語もしくは数値で指定します。単語は

thin ：細い
medium ：普通
thick ：太い

を指定することができます。ただし、単語で太さを指定した場合、実際に表示される太さはブラウザによって異なりますので注意が必要です。

線の色に関する指定

色の指定の際にはＲＧＢカラーを使用してください（ＲＧＢカラーの詳細はこちらを参照ください）。

フレームについての詳細は「フレームってなに？」を参照下さい。

インラインフレームについては「インラインフレームの作成」を参照下さい。