CSSハックの意味とは?

このQ&Aのポイント
  • CSSハックとは、特定のブラウザにのみ適用させるためのテクニックです。
  • スターハックや特定のプロパティの後に半角スペースとコメントを入れるハックなど、さまざまな方法があります。
  • CSSハックは、ブラウザの互換性や表示の制御に使用されます。
回答を見る
  • ベストアンサー

このCSSハックはどういう意味合いのものでしょうか?

すみません、似たような質問を。 http://oshiete1.goo.ne.jp/qa4177163.html でして、締め切ってしまったのですが、よく見ると100%は理解できませんです。 そして、その質問と同じ構造のCSSなのですが・・・。 以下は、どのようなCSS-hackなのでしょうか? ==知っていること========================================= ●スターハック:  セレクタの前に【* html】をつける。(半角スペースも忘れずに)  IE4~6、MacIE4~5以下にのみ適用させる。Validator(※仕様に準拠しているかチェックしてくれるもの)に通る。  ⇒2行目はこれを用いている ●(名称不明) プロパティに続けて半角スペースと/**/を入れるとIE6には適用されない。 Validatorに通る。  ⇒5行目のこれは、このハックに該当するのでしょうか?   それとも、プロパティ(1px)のあとに「;」と「改行」と「}」と「もういっかい改行」があるので、該当しないのでしょうか?  該当しないとしたら、なんのためにあるのでしょうか? ========================================================= ★それから疑問が1つあります  1行目の「/*\*/」はどのような意味なのでしょうか?  これも、css ハックの一部なのでしゅうか? 以上、よろしくお願いいたします。 ------------------------------------------------------------- (以下、説明しかすいようにと行番号をふっています) 1: /*\*/ 2: * html .container, * html .minwidth, * html .box { 3: height: 1px; 4: } 5: /**/

  • HTML
  • 回答数1
  • ありがとう数0

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

  • ベストアンサー
noname#66720
noname#66720
回答No.1

/* \*/ と /* */ で1つのハックです。 macIE5の場合、\の後にスペース等をあけずに*/を記述することでコメントが終わらないので、次の*/が現れるまでの部分を全てコメントとして認識してしまうことを利用したハックです。

関連するQ&A

  • cssハックについて質問です。

    IE6~IE8以外のcssハックが :root *> #help_me { color: red; } この様になっていたのですがどのように使えばいいのでしょうか。 現在適用しているcss .hoge { margin:15px 0 0 0; } このhogeにIEのみ margin:20px 0 0 0; にしたいのですが :root *> #help_me { color: red; } hogeに対するこれの使い方が全く分かりません。 使い方を教えて下さい。 もしくは、 #help_me { color: blue\9; } (※この場合はcolor:blueは分かるのですが9とは一体何でしょうか) こちらでも大丈夫です。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • cssハックについて

    現在Safariに対してcssハックを適用させようとしているのですが、 そのハックがなぜか他ブラウザにまで影響してしまいます… (Firefox、Operaなど。IEは大丈夫です) なぜ他ブラウザにまで影響してしまうのかが判らないので、 教えて頂けると嬉しいです。 宜しくお願いします。 htmlに対するcss読み込みの記述--------- <link rel="stylesheet" type="text/css" href="css/importtop.css" /> importtop.css内の記述--------- /* For Specific Browsers */ @import "safari.css"; safari.css内の記述--------------- /* Safari4 */ body:first-of-type #content { height: 635px; } body:first-of-type #container { height: 635px; } body:first-of-type #sidebar { height: 635px; } body:first-of-type #content { height: 635px; } body:first-of-type .sbar { height: 635px; } /* Safari3 */ html:not(:only-child:only-child) #container { height: 635px; } html:not(:only-child:only-child) #content { height: 635px; } html:not(:only-child:only-child) #sidebar { height: 635px; } html:not(:only-child:only-child) .sbar { height: 635px; }

    • 締切済み
    • CSS
  • CSSハックの使い方を教えてください

    CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか? 実際の記述方法を教えていただけないでしょうか? 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか? #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }

    • ベストアンサー
    • HTML
  • IE7だけに適用するCSSハックの記述形式?

    はじめまして。 社内のWeb関連を任されたばかりのものです。 「IE7だけに適用するCSSハックの記述形式」 を表記してくださいという指示があったのですが 何のことかさっぱり分かりません。。。 CSSハックについて、またIE7にだけ適用できるものについて 教えていただけませんでしょうか? 何とぞ宜しくお願い致します。

    • ベストアンサー
    • CSS
  • IE8でCSSハックが効かないです。

    IE8でCSSハックが効かないです。 IE8のCSSハックを使用したくて、下記のように指定したのですが、 IE8で見るとIE8用に記述したCSSハックが効かないです。 ちなみにIE6用のハックとデフォルトで指定したクラスはきちんと表示されます。 記述方法が原因なのでしょうか。それとも他に原因があるのでしょうか。 教えて欲しいです。 ■サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="keywords" content="キーワード1,キーワード2"> <meta name="description" content="ディスプリクション"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #main_contents p.test_style { font-weight: bold; color: #000; } /* IE6対策 */ *html #main_contents p.test_style { font-weight: bold; color: #ff0000; } /* IE8対策 */ html>/**/body #main_contents p.test_style { font-weight /*\**/: bold\9; color: #0033ff\9; } </style> <title>IE8表示テスト</title> </head> <body> <div id="main_contents" class="reset"> <p class="test_style">デフォルトのテキスト 黒で表示されます。</p> <p class="test_style">IE6用(css hack)のテキスト IE6で見ると赤で表示されます。</p> <p class="test_style">IE8用(css hack)のテキスト IE8で見ると青で表示されます。</p> <!--/main_contents--></div> </body> </html>

  • Google Chrome用CSSハックについて

    Google Chrome用CSSハックについて こんにちわ。いつも皆様のアドバイスに感謝しております。 標記の件でお訪ねします。 これまでtext-alignを-9999pxにしてブラウザ表示外にテキスト飛ばしをしていたのですが、スパム対策の一環としてこれを止めて、font-size=0pxで見えなくさせるようにしています。 ですが、Google Chromeですと適用されておらず見えちゃいます。。。 Google Chrome用のCSSの書き方はありますでしょうか。

    • ベストアンサー
    • HTML
  • cssハックを勉強中で、使い方について質問です。

    現在cssハックを勉強中です。 あるサイトで調べるとoperaだけに使う場合 *+html:first-child p { /* for Opera */ line-height : 150%; } このように表示されてました。 IE4-IE6のアンダースコアハックの使い方は分かったのですが 上記のcssハックは今ひとつ使い方が分かりません。 例えば下記のcssがあったとして ul.piyo{ margin:0 0 10px 0; } ul.piyo li{ margin:0; } ul.piyo li.hoge a { width:100px; height:10px; display:block; padding:0; margin:0; background:url(../img/hoge.gif) ; } ul.piyo li.hoge a:hover { background-position:0 -18px; } ...以下、hoge2、hoge3と同じ<li>のcssが続く。 各hoge、hoge2、hoge3の下部分にoperaだけmargin10pxをつけたい場合 *+html:first-child li.hoge { /* for Opera */ margin:0 0 10px 0; } このように表記し、hoge2、hoge3と付け足せばいいのでしょうか? 説明下手で申し訳ありません。 分かりづらいところは補足いたしますのでどうぞご回答よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • IE6に対応させたcssハックについて

    cssベースでHPを構築しています。 ヘッダー、そしてメインブロックの中にレフトボックス、 ライトボックスを入れた2カラムです。 レフトボックスとライトボックスはフロートで調整しています。 ブロックにフロートを使うとIE6でマージンオートが適用されないという 話を聞き確認してみたところ、確かにIE7,ファイアーフォックスでは きちんと背景の真ん中にコンテンツが表示されているのですが、 IE6で見てみるとズレが生じています。 マージンオートが適用されず、左側にヘッダー、メインボックス全て くっついている状態です。 ハックを使うことがポイントのようなのですが、 IE6用にどのようにスタイルシートに記述すれば宜しいでしょうか?? IE6しか読み込まない子供セレクタを使うというものもありましたが px指定してもパソコンの画面サイズでずれが生じるといったことは ないでしょうか? cssに詳しい方宜しくお願い致します。

  • 以下のcss(css ハック?)を解説していただけませんか?

    以下のcss(css ハック?)を解説していただけませんか? 以下のようなcssの記述をみつけたのですが、意味がさっぱりです。 @media tty { i{content:"\";/*" "*/}}@m; @import '/css/cmm/ie55win3.css'; /*"; } }/* */ なお、 ●tty というmediaは、「固定幅の文字グリッドを用いたメディア、例えば、テレタイプ、端末、表示能力に制限のある携帯デバイスなどを示す。このメディアでは、画素単位 px は使えない。」ということ。 ●@media 規則 ⇒  「@import と似たようなものに、 @media があります。これを用いると、一つのスタイルシートに、複数のメディアタイプに対する規則を記述することが出来ます。」 ということは分かっています。 ですが、それをわかっていても、上のcssの記述の意味がわかりません。 以上、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSS Validatorでエラーの出ないclearfixハックとは

    W3CのCSS ValidatorでCSSをチェックしていますが、 フロートをクリアするための記述に問題があり、 正当なCSSと判断されません。 Validatorでエラーの出ないclearfixハックをご存知の方、 アドバイスをお願い致します。 関係あるかわかりませんが、一応書いておくと htmlの記述は「XHTML 1.0 Strict」で行っております。 以下、エラーが出ているclearfixの記述です。 /*------Floatのclearfix*/ #header:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } #header{ display:inline-block; } /*clearfix Win版IE7・Mac版IE5対策*/ *html #header{ height:1%; } #header{ display:block; } Validatorが問題としている箇所は、下記の部分です。 *html #header{ height:1%; } 現在、悩みすぎて泥沼状態です。 どうも他の対策を思いつく余裕がなくなってきました。 申し訳ありませんが、皆様のお力をお借りしたく、 投稿させて頂きました。 なお、clear:both;の場合、完全にクリアされないことが あり、あまり使いたくない状況です。 何か良い対策方法があれば、アドバイスをお願い致します。

    • ベストアンサー
    • HTML