- 締切済み
フレームページとCSSについて。
ホームページ作成での質問です。 1、フレームページで、横スクロールを無くす方法。 2、CSSで指定したlinkの色（link、visited、hover共に）が変わらない。 どなたか宜しくお願いします。
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- Pagan
- ベストアンサー率70% (101/143)
ＣＳＳをコピーして使ってみたら、私の環境では反映されました。homupeさんはWindowsXPでブラウザはＩＥ6をお使いではないかと思いますが、実際はどのバージョンを使っているのですか？ HTMLとCSSのサンプルを書いてみました。このサンプルで表示できたら、HTMLの方に問題があると思われます。 あと、ＣＳＳの記述でいくつか気になったことがあります。 bodyは１つにまとめた方がよいです。見やすいし、万が一、あるセレクタ(例えばbody)のある属性(例えばcolor)を複数指定してしまった場合、片方が反映されなくなるためです。（たしか、前に記述した方が無視される。） CSSではhtmlは指定できません。普通はスクロールバーはbodyでのみ指定します。 リンクは普通の文字と同じになっていると、リンクだとわかりにくいのです。下線や別の色になっている方が、閲覧者にとっては使いやすいです。 frame.css ----------------------------------------------- a:link{ text-decoration:none; color:white; } a:visited{ text-decoration:none; color:white; } a:active{ text-decoration:none; color:white; } body{ line-height:15pt; background: black; color: white; font-face:HGPゴシックE; font-size:11pt; scrollbar-base-color: #000000; scrollbar-track-color: #000000; scrollbar-face-color: #000000; scrollbar-shadow-color: #FF0099; scrollbar-darkshadow-color: #000000; scrollbar-highlight-color: #FF0099; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #FF0099; } ----------------------------------------------- frameset.html ----------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <title>フレームセット</title> </head> <frameset cols="50%,50%"> <frame src="frame_left.html" name="left"> <frame src="frame_right.html" name="right"> </frameset> </html> ----------------------------------------------- frame_left.html ----------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="frame.css"> </head> <body style="margin-bottom:3000px"> フレーム左ページです。<br> このページはスタイルシートでスクロールバーが出るように設定しています。<br></body> </html> ----------------------------------------------- frame_right.html ----------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="frame.css"> </head> <body> フレーム右ページです。<br> （<a href="http://okweb.jp/" target="_blank">この括弧内はOKWebへのリンクです。</a>） </body> </html> -----------------------------------------------
- Pagan
- ベストアンサー率70% (101/143)
スタイルシートの記述に関しては、内部でも外部でもＣＳＳはＣＳＳなので、変わらないでしょう。 No.4では削除していると回答したのですが、実際は ドキュメントタイプを、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> と宣言しています。当方の環境、Win98+IE6ではこれでフレームページで横スクロールも消えます。ＣＳＳ（外部）でスクロールバーの色、背景色の変更などできるのですが……。 （このDOCTYPE宣言は自己流だと思っていたので紹介しなかったのですが、調べてみたら「Quirks mode」という正式なものでした。） DOCTYPE http://okweb.jp/kotaeru.php3?q=387403 過去ログより。ここからたどれるリンク先に、DOCTYPEの切り替えについて詳しく載っています。
補足
フレーム有りの場合のドキュメントタイプ宣言をつかってみたのですが、やっぱりCSSが反映されません。CSSのソースなんですが、どこか間違ってるんでしょうか？↓ <!-- a:link {text-decoration:none;color:white;} a:visited {text-decoration:none;color:white;} a:active {text-decoration:none;color:white;} --> body { line-height:15pt; background: black; color: white; font-face:HGPゴシックE; font-size:11pt; } html,body { scrollbar-base-color: #000000; scrollbar-track-color: #000000; scrollbar-face-color: #000000; scrollbar-shadow-color: #FF0099; scrollbar-darkshadow-color: #000000; scrollbar-highlight-color: #FF0099; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #FF0099; }
- Pagan
- ベストアンサー率70% (101/143)
実は私もWindows98+IE6でフレームページで横スクロールが出る現象に悩まされていました。 そこで、横スクロールが出てしまうHTMLのドキュメントタイプ宣言 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/loose.dtd"> を削除して回避しています。（WIN+IEでこのバグが起きなくなったら、ちゃんと宣言するつもりです。） この質問を見てからHTMLに <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/loose.dtd"> を設定し、スタイルシートで body { overflow-x: hidden; } を設定してみたのですが、やはり横スクロールが出てしまいました。ファイルサイズの小さいページだとoverflow設定をしなくても横スクロールが出ないので、CSSかHTMLのどこかに原因があるんだと思うんだけど、私はめんどくさいのでドキュメントタイプを宣言しない方向でやっています。
お礼
ドキュメントタイプ宣言を消したら、横スクロール消えました！ありがとうございます。ただ、ドキュメントタイプ宣言を消したら、一部CSSファイルが反映されないようなので、外部CSSではなく、内部に毎回記述したほうが、正確なのでしょうか？
- Pagan
- ベストアンサー率70% (101/143)
ソースを見れば原因がわかるかもしれないので、CSSファイルとそのCSSへリンクしているHTMLファイルのソースを載せてください。 （#個人情報が載っていると削除されてしまうので、内容から個人が特定できないようにしておいてくださいね。）
補足
スタイルシートの方は、解決しました。ありがとうございました。ですが、横スクロールの方が、まだ解決できません。教えていただいた、過去の質問を参照してみたのですが、<style type="text/css"> <!-- body { overflow-x: hidden; } --> </style> を使っても、消えません。
- Pagan
- ベストアンサー率70% (101/143)
「指定を白にすると白にはなるのですが、他の色は出ません」ということは、スタイルシートが反映されていないことも考えられます。 HTMLで <body text="white"> 文字色を白に指定していていたりしませんか？ あるいは、もともとの文字の色が黒でスタイルシートでは白に設定できるのであれば、スタイルシートがちゃんと反映されているはずです。 となると、色指定のスペルが間違っていることも考えられます。 a:link, a:visited, a:hover{ color: #CCFFCC; } のようにRGB値で指定しても、色が出ませんか？ とほほの色入門・色見本 http://tohoho.wakusei.ne.jp/wwwcolor.htm にRGB値あります。
補足
スタイルシートで、背景を黒、文字を白に指定しているのですが、例えば、リンクを赤に設定しても反映されないんです。RGB値でも同じでした。ただし、設定白の場合だけ反映されるんです。
- Pagan
- ベストアンサー率70% (101/143)
1 過去ログを検索しましょう。HTMLカテゴリで「フレーム 横スクロール」で検索すると28件の質問がありますよ。 横スクロールバーが消えません http://okweb.jp/kotaeru.php3?q=935188 スクロールバー表示の仕方 http://okweb.jp/kotaeru.php3?q=159844 2 CSSファイルの記述は、 a:link, a:visited, a:hover{ color: red; } のようになっていますか？ CSSの記述が正確ならば、考えられるのは表示されるHTMLファイルに記述された外部CSSファイルへのパスがリンク切れとか、ＣＳＳファイルを「.css」で保存していないとか。 外部スタイルシートについて・・・ http://okweb.jp/kotaeru.php3?q=910115 外部スタイルシートについて分からない場合は、過去ログを参照してください。（念のため。）
補足
CSSファイルの記述は、 a:link, a:visited, a:hover{ color: red; } になっています。ただ、指定を白にすると白にはなるのですが、他の色は出ません。外部CSSにしても、中に記述しても変わらないんです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
補足
バージョンは、Win2000とIE6です。CSSが反映されないのは、ドキュメント宣言を削除した（<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> に変えた）ページです。そのページ以外は、反映されてます。テーブル内・テーブル外共にです。ドキュメント宣言を消す以外には、ウィンドウのサイズを指定することでしょうか？