• 締切済み

MovableTypeでCSSにコメントを書きたい

MovableTypeでCSSを使ったサイトを作っています。CSSに記述しているのに適用されていないスタイルがあったので、色々触って確認したところ、そのスタイルの上に書いていたコメントを消すと適用されました。 ↓こんな感じです。 /*ナビゲーション*/ .nav{ margin-left:20px; } の/*ナビゲーション*/を消すとmargin-left:20pxが適用されました。が、再構築する前は適用していたような気がします。何度か再構築を繰り返すうちに適用しなくなり、コメント部分を消しました。1箇所ではなく数箇所あったので、MovableTypeで使用するCSSにはこのようなコメントの書き方は良くないのでしょうか?適用したままの箇所が大半なので、なんとも言えないのですが、みなさんはどのようにコメントを書いていますか?また、何故適用されなくなるのか、ご存知の方に教えていただきたいです。よろしくお願いします。

みんなの回答

  • Muller3
  • ベストアンサー率81% (800/979)
回答No.1

普通にスタイルシートの中で /* グローバルナビゲーション */ div#nav { } とか使ってますが、反映されてます。 何か別の理由があるのではないでしょうか。 例えばスタイルシート編集後「保存と再構築」を押してサイトを確認したとしても、ブラウザのキャッシュが残っていて反映されてないように見えたとか。更新ボタンを押したり右クリックでページを再読込してみても反映されないですか? また、どこかと指示がかぶってるということはないですか。例えばマージンですが、上下に隣接するブロックレベル要素のマージンは、どちらか一方の値の大きい方だけが有効になります。その場合は、試しにあり得ないマージンの値(100pxとか)を入れてみると、かぶっているかどうかがわかります。 カスケーディングスタイルシート(CSS)を検証 http://jigsaw.w3.org/css-validator/ こういうのも使ってみると原因が何かわかるかもしれません。

apple_bananana
質問者

お礼

回答ありがとうございます! スタイルが適用されなくなったのが不思議で仕方なかったので、コメントの記述を消すまでに、キャッシュを消してみたり何度も更新したりしたので、読み込めていなかった可能性は少ない気がします。 静的なページでもCSSは普段使っているのですが、今回のようにコメントを消して適用したという事が今までなかったので、かなりチェックしましたし、実際の記述の箇所は触っていないだけに不思議でした。 でも、同じようにコメントを使用されていて反映しているとの事なので、再確認が必要なのかもしれません。それからコメントの記述方法は間違っていないんだなぁと安心しました。実際に使用されている方からの回答で参考になりました。ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSで思うようにいかないところがあります。

    現在CSS勉強中の初心者です。 CSSを使って、ナビゲーションシステムを作ろうと、本に書いてある通り、打ち込んでみたのですが、borderで囲まれた部分を1行にしたいのですが、なぜか、2行になってしまっているようです。上の行には表示させたい文字が書かれているのですが、下の行が空欄になってしまって、スペースができてしまいます。CSSの書き方が悪いのでしょうか?解決方法を教えてください。うまく説明できなくてわかりにくいかもしれませんが、宜しくお願いいたします。 CSSは以下です。 #nav { margin: 0px; padding: 0px; list-style: none; float:left; width:100%; } #nav li { float:left; background-color:#f0f0f0; border: 1px solid #000; font-size:12px; text-align:center; width:160px; height:20px; margin-top:1px; margin-right:0px; margin-left:3px; } #nav a{ color:#000; width:170px; height:20px; display:block; } #nav a:hover{ color:#fff; background-color:#0f314e; text-decoration:none; height:20px; } HTMLは以下です <ul id="nav"> <li><a href="">ホーム</a></li> <li><a href="">Gallery</a></li> <li><a href="">プロフィール</a></li> <li><a href=""></a>お問い合わせ</li> </ul>

    • ベストアンサー
    • HTML
  • CSSで、指定されていない空白が開く

    ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。 margin: 0;と設定しても空白が空きます。 section#header { width:80%; height: 63px; margin-right: auto; margin-left: auto; } img.LOGO { width: 700px; height: 63px; float: left; } p.intro { color: #383838; float: right; font-size: 120%; } section#links { font-size: 130%; width: 90%; height: 40px; margin-bottom: 40px; margin-right: auto; margin-left : auto; } nav ul li { display: block; float: left; width: 18%; height: 40px; margin-left: 1px; margin-right: 1px; border-left: #000000 2px solid; border-right: #000000 2px solid; } nav ul li a { display: block; line-height: 40px; width: 100%; height: 100%; text-decoration: none; text-align: center; } div#clear { clear:both; } CSSは以上の通り書きました。 このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、 section#linksで設定したナビゲーション部分に間が空いてしまいます。 どうすれば開かなくなるでしょうか。 閲覧環境はChromeです。

    • ベストアンサー
    • CSS
  • CSSでのセンタリングができません。

    CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>

  • CSSでfloatした要素の高さを100%にしたい

    はじめまして。 下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。 この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。 heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。 以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html> 

    • ベストアンサー
    • CSS
  • html cssで困っています

    基本的な質問ですが、 html部分 <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="soto">  <div id="naka"></div> </div> </body> </html> css部分 @charset "utf-8"; #soto{ width:320px; height:480px; background-color:#FB0004; } #naka{ width:160px; height:50px; margin-top:160; margin-left:80px; background-color:#000000; } としたら、赤の長方形の真ん中当たりに黒の長方形がくると思ってやったのですが、全体が下がります。ねらった通りにするにはどのようにしたらいいのでしょうか。paddingで無理矢理したのですが、この記述の根本的なミスはなでしょうか?教えていただければありがたいです。

    • ベストアンサー
    • HTML
  • cssについて、困っております。

    DWでHTMLとCSSの練習としてHPを作成しているのですが、 CSSのスタイルが適用されず、思うようなデザインに出来ず困っております。 例でいうと <div id="main"> <p>~~~~~~~</p> <p>~~~~~~<br /></p> </div> ⬆に対し #main { margin-left:340px; font-size:18px; text-align:center; height:auto; width:600px; { などを指定しているのですが、font-size,text-alignだけが適用され、 その他のmargin,height,width,などが 「(プロパティ名)~は継承されていないため選択範囲に適用されません。外側のタグに適用されます。」 と表示され、適用されません。 この場合はどこに問題があって適用されないのでしょうか?? また、「外側のタグに適用されます。」というのはどの外側の部分に適用されるのでしょうか?? 初歩的な質問で申し訳ございません。 回答お願い致します。

    • 締切済み
    • CSS
  • CSSの記法

    インターネット上のサンプルを参考に下記ソース(画像が横一列に並ぶ)を試してみたのですが CSSファイルの 「#list li」の部分の意味がいまいちよくわからないので教えてください。 下記の1又は2の解釈のどちらが正しいのでしょうか。 1.「id="list"」 又は 「li」タグに対して適用する(下記リンクの質問の回答に従えばこちらの解釈?) http://okwave.jp/qa/q8040531.html 2.「id="list"」の要素の配下の「li」タグに適用する 【サンプルのCSS】   #list li {     margin:20px;     height:140px;     list-style-type:none;     float:left;   } 【サンプルのHTML】    <ul id="list"> <li><img src="./img/Desert.jpg"></li> <li><img src="./img/Koala.jpg"></li> <li><img src="./img/Tulips.jpg"></li> <li><img src="./img/Penguins.jpg"></li>    </ul> 1.の解釈で正しければ   #list {     margin:20px;     height:140px;     list-style-type:none;     float:left;   } 「#list li」 → 「#list」 と変更してもレイアウトに変更はないと思いましたがこれでは横に並んでいた画像が 縦に並ぶようになってしまいました。 2.の解釈が正しければ下記のようCSSファイル内に「#list」を追加して記述しても 「#list li 」が適用されて追加前と比べてもレイアウトに変更はないと思ったのですが 微妙に「#list」の影響を受け(float:right;としているせいか画像が少し右寄りに表示された)ました。 「#list li 」という記述は1と2のどちらの意味になるのでしょうか。   #list {     margin:20px;     height:140px;     list-style-type:none;     float:right;   }   #list li { margin:20px; height:140px; list-style-type:none; float:left;   }

    • ベストアンサー
    • CSS
  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>

  • CSSのレイアウト指定だけが無効に。

    CSSでデザインを始めたばかりの初心者です。 Mac環境で制作しておりますが、WIN環境に限り、レイアウト指定がうまく反映されません。(MacではIEとsafariで確認済み。) というか、レイアウトの記述部分だけ、無効になっているような印象です。 文字・リンク・imageの指定はきちんと反映されています。 現象が起きているページは下記です。 http://www.artbox-int.co.jp/seek/foragent/illust_a.html CSSの問題の部分です。 /*レイアウト*/ .head { border-width:0px; } .mainhead { width:200px; height:45px; margin-top:15px; margin-left:15px; border-width:0px; } .menu { width:250px; height:45px; margin-top:-42px; margin-left:230px; border-width:0px; } .select { margin-top:-25px; margin-left:35px; border-width:0px; } .table { margin-left:15px; margin-top:15px; width:480px; height:180px; border-color:#D9D9D9; border-width:1px; border-left-width:5px; border-style:solid; background-color:#FFFFFF; } .image { margin-top:15px; margin-left:15px; border-width:0px; } .Artistname { margin-top:-148px; margin-left:180px; width:200px; height:45px; border-width:0px; } .history { margin-top:-31px; margin-left:180px; width:280px; height:100px; border-width:0px; overflow:auto; } .other { margin-left:180px; width:280px; height:30px; border-width:0px; } どうぞよろしくご教授お願い致します。

    • ベストアンサー
    • CSS
  • CSSでボックス内の隙間が消えない

    MacのDw2004MXで、ulリストでマークアップしたナビゲーションを横に並べてa要素に背景を設定し、テキストをレフトアウトしています。 Mac上のブラウザでは問題なのですが、WinのIE6で見てみると文字サイズが最小の時以外はナビの上部に白い隙間が表示されてしまいます。もちろんpaddingもmarginも0を指定しています。隙間は文字サイズが最大のとき高さ3px、文字サイズ中のとき高さ2pxです。 しかも、a要素のfont-sizeとline-hightはpxで指定しているのでWinの文字サイズ変更は効かないはず… ulタグをdivで括り、divのpaddingもmarginも0としています。 お助けください。 ====XHTML===== <div id="nav"> <ul><li><a id="nav1" href="index.html">TOP</a></li><li><a id="nav2" href="room.html">page1</a></li><li><a id="nav3" href="price.html">page2</a></li><li><a id="nav4" href="service.html">page3</a></li><li><a id="nav5" href="meal.html">page4</a></li><li><a id="nav6" href="reserve.html">page5</a></li><li><a id="nav7" href="access.html">page6</a></li></ul> </div> ======CSS===== #nav{ width:705px; height:30px; margin:0; padding:0; } #nav ul{ list-style-type:none; margin:0; padding:0; height:30px; } #nav ul li{ display:inline height:30px; margin:0; padding:0; height:30px; } #nav ul li a{ display:block; margin:0; font-size:6px; height:30px; float:left; background:url(../i/g/nav.gif) no-repeat 0 0; text-indent:-5000px; line-height:10px; }

このQ&Aのポイント
  • MFC-J710DでFAX登録番号をPC FAXに登録できない問題について相談したいです。
  • パソコンのOSは11で、無線LANで接続しています。
  • 関連するソフト・アプリや電話回線の種類については特に記載がありません。
回答を見る