• ベストアンサー

インラインフレームのボーダーとスクロールのデザイン

いつもお世話になっております。 ホームページに一言コーナーのようなものをインラインフレームで表示しておりますが、ボーダーとスクロールのデザインが周りのデザインにそぐわなくて浮いております・・・。CSSで設定などできるのでしょうか?どのようにするのか例のようなタグを教えていただけるとありがたいです。またそのようなことを解説しているページなどあるようでしたら教えてください。どうぞよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • mello
  • ベストアンサー率66% (2/3)
回答No.2

スクロールは、IFRAMEの中に表示するページのスクロールをCSSで指定すれば変えられますよ。 <style type="text/css"> <!-- body{ scrollbar-face-color:バ-の表面の色;scrollbar-highlight-color:バーの左と上の線の色; scrollbar-track-color:バ-の後ろの色;scrollbar-shadow-color:バ-の右と下の線の色; scrollbar-3dlight-color:外側の左と上の線の色;scrollbar-arrow-color:▲▼の色; scrollbar-darkshadow-color:外枠の右と下の線の色; } --> </style> <HEAD>~</HEAD>に入れます。 上手く説明できないんですけれど;いろいろ試してみてくださいね。 IFRAMEのボーダーですが、私はIFRAMEのボーダーを0にして、テーブルで囲ってデザインを変えています。 中に表示するページが黒の場合、ボーダーとページの間に白い隙間が出来てしまいますけれど。 IFRAME自体でも、<IFRAME~>のタグの中で指定できたと思いますよ。 <iframe src="初めのペ-ジのURL" name="フレ-ムの名前" width="横の長さ" height="高さ" frameborder="0" scrolling="スクロールバ-の有無(yesかno)" style="border:枠の種類 枠の太さpx 枠の色;"></iframe> 枠の種類とかのところの半角シフトは消しちゃだめです。 線の種類は、下のURLを参考にしてください。

参考URL:
http://chips.jpnet.biz/tagg/border.html
yashiron
質問者

お礼

詳しく教えていただいてありがとうございました。テーブルで囲うっていうのもひとつの手ですね。

その他の回答 (1)

  • 345itati
  • ベストアンサー率48% (795/1639)
回答No.1

ボーダーについては、iframeのボーダーは表示しない設定にして、CSSで境界線の形状や色を指定すれば出来ると思います。 //前略// <style type="text/css"> <!-- body { background-color: #000089; } iframe#A1 { margin-top: 20px; margin-left: 20px; border: dotted 5px #ffffff; } --> </style> </head> <body> //中略// <iframe src="a.html" id="A1" name="main" width="300" height="300" scrolling="auto" scrollbars="yes" frameborder="0"></iframe> //後略// という感じでしょうか。 border:の所で色々設定をいじれます。 スクロールバーのデザインは基本的に変更出来ません。IEのみが勝手に変更出来る独自拡張を入れていますが、FirefoxやMac Safariなどでは全く無効でも構わないとお考えならやっても構わないと思いますけど。 スクロールバーに色をつける →http://www.okanoweb.net/sample/scrollbars.htm

yashiron
質問者

お礼

具体的にタグを書いてくださって、ありがとうございました。スクロールバーはおっしゃる通りIEしか対応していないようですね。