- 締切済み
スタイルシートの文字色について
LLLunaの回答
- LLLuna
- ベストアンサー率35% (13/37)
colorプロパティは継承されるので、sideまで反映されるはずです。 反映されないのは、どこかで別の値に上書きされている為と思われます。 例えば、 body -div -div -（side） のような構造になっている場合、bodyの子孫かつsideの祖先である2つのdiv要素のどちらか（或いはどちらも）が、colorプロパティに別の値を設定していると考えられます。もしくはside自体が、何か別の値を指定している可能性もあります。 上書きする指定を消す、或いはsideに改めて指定すれば、解決されるはずです。
関連するQ&A
- スタイルシート
スタイルシートを使ってホームページを作り始めたんですが、左にメニューを作りたかったので body { margin: 0px; padding: 0px; } .main { width: 580px; position: absolute; left: 210px; } .side { width: 180px; margin-left:10px; } とcssファイルを作り何個かのページに記述したらトップページを除いて他のページは配置がおかしくなったりレンタルサーバの広告がど真ん中に重なったりしてしまいます。なぜでしょうか？ 配置がおかしいとはsideとmainが ■■という配置にして欲しいのですが ■ ■という風になってしまいます。 わかりにくくてすみません。
- 締切済み
- HTML
- スタイルシートの指定に関して
<body>タグにクラスを与えて、以下のようにしました。 <body class="home blog"> 一般的に、このような記述の場合、<body>に class="home"と、class="blog"の属性が与えられます。ここまでは理解出来ています。 2つのファイル home.html と index.html ファイルを作成しました。 html の記述は全て同じとします。参照する CSS ファイルを同一とします。 上記の条件で、home.html と index.html でデザインを変えたいと思います。希望として home.html には、class="home" のみを反映し、 index.html には、class="blog" のみを反映させたい。 以下にサンプルを表記します。 html ファイル home.html / index.html <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テストページ</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body class="home blog"> <div id="container"> <p>テストページ</p> </div> </body> </html> css ファイルは home.html / index.html で共通 @charset "UTF-8"; body { margin: 0; padding: 0; text-align: center; background-color: #FFF; } .home #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FFE; } .blog #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FEE; } 上記の記述だと home.html も CSS の記述順通り、バックグランドカラーが、#FEE になります。 <body class="home blog"> の記述は、WordPress が生成している記述です。デザインを別けることが出来るのかなと思っています。 自分のスキルでは無理だと思うのですが・・・。 CSS の記述でデザインを別けることが出来るのでしょうか。
- ベストアンサー
- CSS
- スタイルシートでの段組指定について
こんにちは。HTMLやCSSを初めて書いています。 スタイルシートの「float」指定を使って 左右の段組（合計で左右幅100％）をしたいと思います。 コードは以下のように書きました（背景色は適当）。 ---------------------------------------------- .column { float : left ;} #menu { width : 20% ; background-color : red ;} #main { width : 80% ; background-color : blue ;} ---------------------------------------------- タグ指定は <div class="column" id="menu"> 等です。 これを主なブラウザ（IE6.0／ネスケ7.1／Opera7）で 表示させると「20＋80＝100％」になるのですが、 ネスケ4.73は「20＋80*80＝84％」なのか、右に空白ができます。 では、と、#main の80％指定を削ったところ、今度は ネスケ7.1 や Opera7 で float が利いてくれません。 質問１）float については各ソフト、こういう解釈なのでしょうか？ それとも私の記述が間違っているのでしょうか？ 質問２）そういうものである場合、ネスケ4.73に対する ごまかしテクニックはあるのでしょうか？（テーブルの使用を除く） bodyの背景色を右段と同じにする方法はイマイチです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- 表の中の表にスタイルシートを適用したい
表の中の1セル内に文字列と表を配置しています。 その中のフォントカラーを統一させたいのですが… <TABLE> <TR><TD class="color"> ←1 ここに色々文字列 <TABLE> <TR><TD>ここにも文字列</TD></TR> ←2 <TR><TD>ここにも文字列</TD></TR> ←3 この場合、「ここに色々文字列」の方はちゃんと反映されます。 「ここにも文字列」の方が反映されません。(bodyで設定したフォントカラー) これを2や3のTDにclassを入れることなく1のTDで一括して変化させるようにするにはどのように記述したらよいでしょうか?
- ベストアンサー
- CSS
- スタイルシートでサイト作り
現在サイトをスタイルシートを使って作ってます。 まだまだ本＆辞書片手に勉強中の初心者です。 幅４５０px高さ１００％中央配置のテーブル内に ヘッダー部分に４５０px × １３０pxの画像 その左下にメニューバー 右にコンテンツ を作りたいと思います。 メニューバーは 幅１２８ｐｘ 高さ１００％です。 本を見ながらアレンジして作りました。次の通りです。 /* === サイドバー部分のスタイル === */ .side {width:128px; vertical-align:top; padding:0px; background-color:#999999} .side div {font-size:12px; font-weight:bold; letter-spacing:3px; border-bottom:solid 1px white} .side a {color:#333333; text-decoration:none; display:block; padding-top:5px; padding-bottom:5px; padding-left:13px} .side a:hover {color:ffffff; background-color:#666666} <!--=== サイドバー部分のソース ===--> <td class="side" rowspan="5" valign="top"> <div><a href="link.htm">about</a></div> <div><a href="link.htm">contents</a></div> <div><a href="link.htm">blog</a></div> <div><a href="link.htm">bbs</a></div> <div><a href="link.htm">link</a></div> </td> リンクにふれると色が変わるのが気に入ってます。 この「link」の下にコメントとリンクを入れたいんですが 「拍手」ボタン <form>・・・</form> 「返事はこちら」 というコメント（「こちら」部分がリンク） をセルで囲って、画面下までのばしたいです。 いろいろ試したんですが、新しく作ったセルが横に並んだり <side>の a の影響を受けてしまったりして思ったように出来ません。 どうぞ御指南お願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- MacIEだけに読込ませる外部スタイルシート
Band Pass Filterとやらを使って、MacIEだけに読込ませる外部スタイルシートを実現したいのですがうまくいきません。どこのが悪いのでしょうか。 下記の記述が間違っていなければ、IE6やFirefoxでは文字は赤に、MacIE5.xでは文字は黒になるはずなんですが… ご教授ください。 【html】 <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <p>あいうえお</p> </body> </html> 【main.css】 p{color:#FF0000;} /*\*//*/@import ("ie5mac.css");/**/ 【ie5mac.css】 p{color:#000000;}
- ベストアンサー
- HTML
- Firefox、Netscapeでレイアウトが崩れる(スタイルシート)
２段組レイアウト、 左がナビゲーションメニューで ロールオーバーボタンのような効果を出したくて、 IEとOperaでは正常に表示・動作したのですが FirefoxとNetscapeで、レイアウトが大きく崩れてしまいます。 メニュー箇所のソースは以下です。 【ＨＴＭＬ】 <div id="side"> <div id="sidelist"> <ul> <li><a href="#">メニュー１</a></li><br> <li><a href="#">メニュー２</a></li><br> </ul> </div> </div> 【ＣＳＳ】 #side{ float:left; position:absoulte; width:200px; height:100%; padding:0; background-color:#ffffff; } #sidelist ul{ margin:0; padding:0; list-style:none; } #sidelist li{ display:inline; } #sidelist a,#sidelist a:link #sidelist a:visited{ width:100%; height:100%; padding:10px 20px; border-bottom:1px solid #333333; background-color:#cccccc; color:#333333; text-decoration:none; } #sidelist a:hover{ width:100%; height:100%; paddint:0; margin:0; color:ffffff; background-color:#666666; } headerの幅を800px、mainの幅を600pxに指定したので ナビゲーションメニューとなるsideは 200pxに指定しましたが、 数値を減らしてみてもやはり崩れます。 FirefoxとNetscapeでも崩れずに 表示させる方法はあるでしょうか？ よろしくお願いします。 なお、ブラウザは全て最新バージョンです。
- ベストアンサー
- HTML
- CSSのスタイルシートについて教えて下さい。
現在、ASP.NETにてメイン画面に使用する４分割のアプリケーションを作りたいと考えているのですがWeb Developer 2005 ではframesetが使えないので代替案を模索していました。 そこでCSSのスタイルシートにて作成しているのですが、見ようみまねでサンプルを加工しても記述を見ても経験が浅い為全く分からなくて困っています。 勉強が足りず恐縮ですがご教示下さい。 ４分割フォームの詳細は ・ヘッダー部分「Title.aspx」→ 両端に画像が入った題名のみのファイル ・左部分「left.aspx」→ 検索ボックスと検索ボタンが４つあり。キーを入力して 次の検索結果フォームへ異動する。 ・右部分「right.aspx」→ left.aspxと全く同じ作りです。 （東日本と西日本が分かれているようなイメージです。） ・下部 → 署名（フォームではなく文字列） <BODY> <HEAD> <link rel="stylesheet" type="text/css" href="pseudoframe_lmr.css"> </HEAD> <DIV class="menu"> メニュー </DIV> <DIV class="bar"> タイトル </DIV> <DIV class="main"> メインコンテンツ </DIV> <DIV class="bar2"> <p align="right">Copyrigth © 2006-2007 Name all rights Reserved</p> </DIV> </BODY> <STYLE> /* Opera/mozilla/共通用CSS */ <!-- BODY{ background-color : #e0fef8; } .menu{ width : 50%; top : 15%; left : 50px; top : 15%; position : absolute; background-color : #e0fef8; z-index : 1; } .bar{ width : 100%; height : 15%; left : 0px; top : 0px; position : fixed; overflow: auto; z-index : 2; } .main{ width : 50%; top : 15%; left : 20%; position : absolute; background-color : #e0fef8; z-index : 1; } .bar2{ width : 100%; height : 15%; left : 0px; top : 85%; position : fixed; overflow: auto; z-index : 2; } --> </STYLE> <!--[if gte IE 5 ]> /* IE5以上に適用させるCSS */ <STYLE> BODY{ width : 100%; margin : 0px; overflow : hidden; padding : 0px; } .menu{ position : absolute ! important; } .bar{ position : absolute ! important; } .main{ height : 70%; overflow: auto; } .bar2{ position : absolute ! important; } </STYLE> <![endif]--> コードを載せましたのでどの様に記述すればよいのかご教示下さいませ。 皆様、宜しくお願い致します。
- 締切済み
- HTML
- スタイルシートのアンカー部分
スタイルシートを利用してのアンカー部分の指定についてです。 a:link {color: yellow; text-decoration: none; } a:visited {color: yellow; text-decoration: none; } a:active {color: yellow; text-decoration: none; } a:hover {color: red; font-weight: bold; text-decoration: underline; } 現在、このように記述しています。 今までは、ページ毎に<STYLE TYPE="text/css">タグを使用し、本文中に記述していたのですが、その代わりとして新たに外部読み込みのcssファイルを使用してみました。 ところが、未訪問リンクだけが反映されないのです。 青文字で、下線付きで表示されてしまいます。 未訪問以外は、bodyなども含め、きちんと反映されています。 色々試行錯誤してみましたが、全然駄目だったので、 再び本文内に書き込む形を取りました。 IE5.5で動作確認しています。 この理由及び対策を御存知の方、教えていただけませんでしょうか？
- ベストアンサー
- HTML
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト