iframe background scrollbar etc / css

ｉフレームの背景色

ｉフレームの背景画像

ｉフレームの背景を透過

ｉフレーム内のマージン

スクロールバーの色

インラインフレーム内の背景色を指定する(CSS)

background-color: ***;

　background-color は、全てのタグ（要素）に適用できます。

　background-color は、背景色を指定するプロパティです。このプロパティを「インラインフレームに読み込むページ」の<body>タグ（要素）に設定し、インラインフレーム内の背景色を指定します。

　body { background-color: #f8f8f8; }

プロパティ名	値	説　　明
backGround-color	カラーコード or カラーネーム	背景色を指定（初期値は transparent）

※ 色の指定は、カラーコード（#ffffff,#fff,rgb(255,0,0)）または、カラーネーム（red,blue）で行います。詳細は、「カラーネーム」のページをご覧下さい。

＊背景色の指定は、「ページの背景色を指定する」も参考にして下さい。

　★ 使用例とブラウザでの表示 (h3-1)スタイルシートの書き方（基本）は、こちらです。


サンプルコード		ブラウザの表示

■インラインフレームを設定するページ <html><body> <iframe src="Sample1.htm">サンプル</iframe> </body></html> ■インラインフレームに読み込むページ <html><body style="background-color:beige;"> iframe sample .... </body></html>		サンプル

関連するページ

CSS スタイルシート

：ページの背景色を指定する

HTML タグページ

：インラインフレーム（ｉフレーム）の基本
HTML タグページ

：インラインフレームの背景を透明にする

ｉフレームの背景画像

インラインフレーム内の背景に画像を使う(CSS)

backGround-image: url(URI);

　このプロパティは、全てのタグ（要素）に適用できます。

　backGround-image は、背景画像を指定するプロパティです。このプロパティを「インラインフレームに読み込むページ」の<body>タグ（要素）に設定し、インラインフレーム内の背景画像を指定します。

　body { backGround-image: url(back.gif); }

プロパティ名	値	説　　明
backGround-image	url(URI)	表示する画像ファイルを指定（初期値は none）

＊ url( ) … ( ) 内に画像のURIを指定します。

＊背景画像の指定は、「ページの背景に画像を使う」も参考にして下さい。

　★ 使用例とブラウザでの表示 (h3-2)スタイルシートの書き方（基本）は、こちらです。


サンプルコード		ブラウザの表示

■インラインフレームを設定するページ <html><body> <iframe src="Sample2.htm">サンプル</iframe> </body></html> ■インラインフレームに読み込むページ <html><head><style type="text/css"> body { background-image: url(wall.gif); } </style></head> <body>iframe sample .... </body></html>		サンプル

関連するページ

CSS スタイルシート

：ページの背景に画像を使う

HTML タグページ

：インラインフレーム（ｉフレーム）の基本
HTML タグページ

：インラインフレームの背景を透明にする

ｉフレームの背景を透過

インラインフレーム内の背景を透過する(CSS)

background-color: transparent;

　background-color は、全てのタグ（要素）に適用できます。

　background-color は、背景色を指定するプロパティです。このプロパティを「インラインフレームに読み込むページ」の<body>タグ（要素）に設定（値：transparent）し、インラインフレーム内の背景を透過（透明化）させます。

　body { background-color: transparent; }

プロパティ名	値	説　　明
background-color	transparent	透過（透明に）する（初期値）

＊ Firefox は、この指定がなくても透過します。Internet Exp. や Opera は、この指定が必要です。

　【Internet Exp.での透過方法】

＊ Internet Exp.の場合は、このプロパティ（background-color）の設定に加えて、<iframe>タグ（要素）に allowtransparency 属性の指定が必要になります。

　★ 使用例とブラウザでの表示 (h3-3)スタイルシートの書き方（基本）は、こちらです。


サンプルコード		ブラウザの表示

■インラインフレームを設定するページ <html><body style="background:url(wall.gif);"> <ifarme allowtransparency="true" src="Sample3.htm">サンプル</iframe> </body></html> ■インラインフレームに読み込むページ <html><head><style type="text/css"> body { background-color: transparent; } </style></head> <body>iframe sample .... </body></html>		サンプル

☆ の部分が全体の表示領域です。 ☆ background: は、背景をまとめて指定する方法です。

関連するページ

CSS スタイルシート

：背景をまとめて指定する

HTML タグページ

：インラインフレーム（ｉフレーム）の基本
HTML タグページ

：インラインフレームの背景を透明にする

ｉフレーム内のマージン

インラインフレーム内のマージンを指定する(CSS)

margin: *px *px;

　margin は、全てのタグ（要素）に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。

　margin は、上下左右のマージン（外側の余白）をまとめて指定するプロパティです。このプロパティを「インラインフレームに読み込むページ」の<body>タグ（要素）に設定し、インラインフレーム内のマージンを指定します。

　body { margin: 5px 10px; padding: 0; }

プロパティ名	値	説　　明
margin	数値＋単位（px 等） or パーセント	マージンの大きさを指定

　【指定方法】

　次の４タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。

① margin: 2px; … 「上下左右」をまとめて指定
② margin: 2px 3px; … 「上下」と「左右」を指定
③ margin: 2px 3px 4px; … 「上」､「左右」､「下」を指定
④ margin: 2px 3px 4px 5px; … 「上」､「右」､「下」､「左」を指定（時計回り）

　【パディングについて】

　body { } や <body>タグにマージンを設定する場合は、同時に padding: 0; を指定して下さい。（一部のブラウザで余白の大きさが異なってしまうため）
　body { margin: 5px; padding: 0; }

　★ 使用例とブラウザでの表示 (h3-4)スタイルシートの書き方（基本）は、こちらです。


サンプルコード		ブラウザの表示

■インラインフレームを設定するページ <html><body> <iframe src="Sample4a.htm">サンプル</iframe> <iframe src="Sample4b.htm">サンプル</iframe> </body></html> ■インラインフレームに読み込むページ１ <html><body style="margin: 2px; padding: 0;"> Sample4a.htm iframe sample .... </body></html> ■インラインフレームに読み込むページ２ <html><body style="margin: 20px; padding: 0;"> Sample4b.htm iframe sample .... </body></html>		サンプル
		サンプル

☆ の部分が「インラインフレームに読み込むページ」の表示領域です。

関連するページ

HTML タグページ

：インラインフレーム（ｉフレーム）の基本
HTML タグページ

：枠と表示内容の間にマージンを指定する

スクロールバーの色

スクロールバーの色を変える(CSS)

scrollbar-***-color: #0000ff;

　このプロパティは、body(または html) タグ（要素）やtextareaタグ（要素）に指定します。

　scrollbar-***-color は、スクロールバーの色を指定するプロパティです（*** の部分には、base、face、track、arrow、3dLight、highLight、shadow、darkShadow が入ります）。
　このプロパティを「インラインフレームに読み込むページ」の<body>(または<html>) タグ（要素）に設定すると、インラインフレームのスクロールバーの色を変更できます。

■基本色だけで指定する場合
body, html { scrollbar-base-color: blue; }

■細かく設定する場合

body { scrollbar-face-color: #ffbc60; scrollbar-track-color: #fff8dc;
scrollbar-arrow-color: white; scrollbar-3dlight-color: #ffebcd;
scrollbar-highlight-color: #fff8dc; scrollbar-shadow-color: #d2691e;
scrollbar-darkshadow-color: #8b0000; }　《オレンジ色になります》

プロパティ名	値	説　　明	メ　モ
scrollbar-base-color:	カラーコードやカラーネームで指定します。色の指定は、こちらをご覧下さい。	基本色を指定	一括指定

scrollbar-face-color		ボタン部分を指定	セットで指定
scrollbar-track-color		レール部分を指定
scrollbar-arrow-color		矢印を指定
scrollbar-3dLight-color		外側のハイライトを指定
scrollbar-highLight-color		内側のハイライトを指定
scrollbar-shadow-color		内側の影を指定
scrollbar-darkShadow-color		外側の影を指定

　【指定する場合の留意点】

■ <body>タグ（要素）と<html>タグ（要素）
　DOCTYPE宣言（表示モード）が「互換モード」の場合は<body>タグ（要素）に指定しますが、「標準モード」の場合は<html>タグ（要素）に指定します。

■ インラインフレーム（<iframe>）のスクロールバー
　インラインフレームのスクロールバーは、そのフレームに読み込まれるページの<body>(または<html>) タグ（要素）に指定します。

この属性は、Internet Exp. が独自に拡張した機能で、Internet Exp. 以外では Opera など特定のブラウザに限定されます。

＊スクロールバーの設定は、「スクロールバーの色を変える（ページ全体）」も参考にして下さい。

　★ 使用例とブラウザでの表示 (h3-5)スタイルシートの書き方（基本）は、こちらです。


設定例： .b-khaki { scrollbar-base-color: khaki; } .f-green { scrollbar-face-color: #bbffbb; scrollbar-track-color: #99cc99; scrollbar-arrow-color: black; scrollbar-3dlight-color: #e6ffe6; scrollbar-highlight-color: #ccffcc; scrollbar-darkshadow-color: #336633; scrollbar-shadow-color: #66cc66; }

サンプルコード		ブラウザの表示

■インラインフレームを設定するページ <html><body> <iframe src="Sample5a.htm">サンプル</iframe> <iframe src="Sample5b.htm">サンプル</iframe> </body></html> ■インラインフレームに読み込むページ１ <html><body class=b-khaki> b-khaki iframe sample .... </body></html> ■インラインフレームに読み込むページ２ <html><body class=f-green> f-green iframe sample .... </body></html>		サンプル
		サンプル

☆ このプロパティは、Internet Exp.の独自拡張機能です。

関連するページ

CSS スタイルシート

：スクロールバーの色を変える（ページ全体）

HTML タグページ

：スクロールバーを指定する（iフレーム）