プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：yashiron
  • 質問日時：
  • 回答数：2件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1

  • 回答者： 345itati
  • 回答日時：

ボーダーについては、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
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/09/29 09:23

No.2ベストアンサー

  • 回答者： mello
  • 回答日時：

スクロールは、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
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/09/29 09:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報