• ベストアンサー

スタイルシートのクラス定義について

.menuと.conというクラスが定義されていて もうひとつ .menuCourseというクラスを定義して、このmenueCourseで <div class="menuCourse"> <div class="menu"> ・・略・・ </div> <div class="con">  ・・略・・ </div> </div> という感じではさんだのですが、 .menuCourse { border-left:solid 5px darkblue; } 上記のクラス定義の通りにボーダーの色が表示されません 何が問題かわからないので、有識者の方教えてください。

  • HTML
  • 回答数4
  • ありがとう数4

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

  • ベストアンサー
  • Bo_Bo
  • ベストアンサー率65% (97/149)
回答No.4

私も #3 さんと同じ意見です。 関係のないソース部分を削除して、問題の切り分けをすれば良いと思います。 以下蛇足: ●“darkblue”などの色名は、実装を約束されたものではありません。 Internet ExplorerやFirefoxでは、これらの色名定義をブラウザ内部に保持 していますが、他のブラウザが実装している保障は何処にもありません。 W3C で色名が定義されているのは、 black, gray, silver, white, red, yellow, lime, aqua, blue, fuchsia, maroon, olive, green, teal, navy, purple の16色です。それ以外の色を指定する場合は、 ・#rrggbb ・#rgb ・rgb(255,255,255) ・rgb(100%,100%,100%) の何れかを用いて指定しましょう。 ●プロパティーの値は、順不同でOK! width, style, color は、どの順序で指定しても良いです。

kiyumoto
質問者

お礼

ありがとうございます。参考にします

その他の回答 (3)

noname#10370
noname#10370
回答No.3

当方の環境( Windows XP )では Internet Explorer と Firefox で表示できましたよ。 示されたソース以外の部分に問題があるのではないでしょうか。

kiyumoto
質問者

お礼

ありがとうございます

回答No.2

border-left:線の太さ スタイル 色 って書くんじゃなかったですか? あと、色を#00008bにしてみては?

kiyumoto
質問者

お礼

ありがとうございます

  • UKY
  • ベストアンサー率50% (604/1207)
回答No.1

darkblue などという色は CSS にはありません。ちゃんと CSS で定義された色 (red や yellow など) を指定するとか、#RRGGBB 形式で指定するとかする必要があります。

kiyumoto
質問者

お礼

ありがとうございます

関連するQ&A

  • ホームページビルダーでスタイルシートを使ったのですが?

    今、ホームページビルダーで簡単な2カラム(右メニュー)のテンプレートを作っています。 質問ですが、メニューバー(サイドバー)に色を付けたくて、画像を使う事にしました。 <div class="main">に画像(background.gif)を入れ属性で繰り返す(垂直方向)にチェックをいれたのですが、IEやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか? よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここに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; }

  • floatとclearを使ったレイアウト作成について

    http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Web</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。

    • ベストアンサー
    • HTML
  • スタイルシートをhead内で定義したい

    下のテーブルのようにしたいんですが、上のテーブルはすきまができています。 このすきまをなくすために、<STYLE>の中を修正してください。 <TABLE>内は変更せずに<STYLE>だけでできるはずです。 <HTML> <HEAD> <STYLE> table.ccc{border:solid;border-color:#bbbbcc} td.ccc{border:solid;border-color:#bbccbb} .ccc th{border:solid;border-color:#ccbbbb} </STYLE> </HEAD> <BODY> <TABLE class="ccc"> <TR class="ccc"> <TH>名前</TH> <TH>住所</TH> </TR> <TR class="ccc"> <TD class="ccc">太郎</TD> <TD class="ccc">東京都新宿区</TD> </TR> <TR class="ccc"> <TD class="ccc">花子</TD> <TD class="ccc">沖縄県那覇市</TD> </TR> </TABLE> <br> <TABLE cellspacing=0 style="border:solid 4px #ddddee"> <TR> <TH style="border:solid 4px #eedddd">名前</TH> <TH style="border:solid 4px #eedddd">住所</TH> </TR> <TR> <TD style="border:solid 4px #ddeedd">太郎</TD> <TD style="border:solid 4px #ddeedd">東京都新宿区</TD> </TR> <TR> <TD style="border:solid 4px #ddeedd">花子</TD> <TD style="border:solid 4px #ddeedd">沖縄県那覇市</TD> </TR> </TABLE> </BODY> </HTML>

  • スタイルシートの適応のやり方

    現在ドリームウェーバーでHPを作っていますが CSSを使いメニューボタンをへこむボタンにしたいのですが うまく反映されません。 ソフトが最近から使い始めたのでうまく理解できていないところです。 a.sample{ text-decoration:none; } a:hover.sample{ color:#CC0000; border-width:0px 1px 1px 0px; border-style:solid; border-color:#990000; position:relative; top:-2px; left:-2px; } a:active.sample {/*クリック中の色*/ color:#CC0000; border-width:1px 0px 0px 1px; border-style:solid; border-color:#990000; position:relative; top:2px; left:2px; padding-left:3px; } こちらです。 手順を教えて頂けないでしょうか?

    • ベストアンサー
    • HTML
  • スタイルシートでのレイアウトについて

    スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。  -HTML- <div id="outline"> <div class="main"> メイン上部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド上部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="main"> メイン下部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド下部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="footer"> フッター部分 </div><!-- end footer --> </div><!-- end outline -->  -CSS- #outline{ width : 750px ; text-align : left ; border : solid 1px #000000 ; } .main { width : 200px ; background : #ebebeb ; margin-bottom : 10px ; float : left ; } .side { width : 540px ; background : #ebebeb ; margin-bottom : 10px ; float : right ; } .c-both { clear : both ; } .footer{ width : 100% ; background : #ebebeb ; } そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか? あと、メイン上部コンテンツ部分・サイド上部メニュー部分、メイン下部コンテンツ部分・サイド下部メニュー部分の下に、同じように行を追加したいのですが、どうしたら良いでしょうか? スタイルシートの段組みで、非常に困っています。 助けて下さいm(_ _)m

  • cssのfloatについて質問があります。

    cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ボーダースタイルがうまく表示できない

    #content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ?によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか? アドバイスを宜しくお願いします。

    • ベストアンサー
    • HTML
  • Opera(10.10)でのスタイルシートの表示について

    Opera(10.10)でのスタイルシートの表示について  Operaでのスタイルシートの「border」の表示について質問させて下さい。 これは例ですが、HTMLとCSSを以下のとおりに設定しているとしますね。 ------------------------------------------------------------------ <body>  <div id="layout">   <div id="box1">    <p>ボーダーのテスト</p>   </div>  </div> </body> ------------------------------------------------------------------ *{   margin : 0px;   padding : 0px; } #layout{   width : 800px;   height : 600px;   padding : 10px;   margin-left : auto;   margin-right : auto;   background-color : #FFF; } #box1{   width : 780px;   height : 580px;   padding : 10px;   border-top : solid 1px #D1D1D1;   border-left : solid 1px #D1D1D1;   border-right : dashed 1px #D1D1D1;   border-bottom : dashed 1px #D1D1D1;   background-color : #FFF; } ------------------------------------------------------------------  このように設定した場合、「id="box3"」のボーダーは上と左が直線、 右と下が点線と表示されるのが正しい表示だと思います。 しかし、Operaで閲覧した場合なぜか「border-left」のみ表示されません。 「border-left」を「solid」から「dashed」に変更すると表示されます。 borderに合わせてwidthもちゃんと横に伸びているので、 CSSが適用されていないわけではないと思います。  また、「border-left」を「dashed」から「solid」に変更した場合には、 「border-top」と「border-right」の両方が見えなくなってしまいます。  どちらの問題も、IE6やFirefox(3.5.7)では指定通り正しく表示されました。 Operaでも同様に正しく表示させるにはどうすればよいのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 外部スタイルシートは同じなのですが…

    こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記/// <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div>  ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス/設備</h2> ○○○徒歩3分<br /> 駐車場2台(バリアフリー)<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright &copy; 2007 All Rights Reserved</div> </div> </body> CSSは下記/// * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか? リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • スタイルシートでのメニュー作成で

    今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■ CSS ■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■ HTML ■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML

専門家に質問してみよう