• 締切済み
  • すぐに回答を!

@import ハックについて

初心者になります。 @importハックですがどう作業していいかがわからないです。 <link rel="stylesheet" type="text/css" media="screen,tv" href="○○○.css"/> mediaをscreen以外にする。これでNN4を読みこませなくなることはわかりました。 1.ここの○○○.cssのファイル名はなんでもよろしいですか。 次にリンク先のCSSファイルの中に @import "○○○.css"; を記述する。これでIE4を読み込まなくする。 2.ここの@import○○○.cssのファイル名はlink要素で指定したファイル名と一緒にしないといけないのですか。 3.実際に適用するCSSはこのファイルに記述をしていいですか。 4.@importで指定したファイル名の中身は空白でいいのですか。 実際のやり方がわからないです。 ご存知のかた、いらしたら 教えていただけるとありがたいです。 よろしくお願い致します。

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数157
  • ありがとう数1

みんなの回答

  • 回答No.2
noname#83877

一番最後ハックの訂正です。 ■NN7.0以下(winの場合)、Opera5以下、Safari1.2以下、Konqueror3.5.5以下を拒否 @import url(" style.css ");

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • css media screen、all 使い分け

    <link rel="stylesheet" href="/css/★★.css" media="all"> <link rel="stylesheet" href="/css/★★.css" media="screen"> の使い分けが良く分かりません。 印刷を分けたい時の画面用として「media="screen"」があると思うのですが、 仮に、「screen」指定だけした場合(print指定なし)は、印刷するとcssが全く適用されないのでしょうか? と言うことは、「screen」指定した際は、必ず「print」指定もすべきなのでしょうか? また、そもそもデフォルトの挙動はどうなっているのでしょうか? <link rel="stylesheet" href="/css/★★.css"> と書くことも出来るのでしょうか?

    • ベストアンサー
    • CSS
  • 一部のページにデフォルトCSSを読み込ませない方法

    一部ページにCSSを読み込ませない方法がありましたら、 ご教授ください。 例えば、 全ページに以下のCSSを共通で読み込ませてあります。 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> しかし、test.htmlだけ <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> を読み込ませたくありません。 つまり、 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> は通常通り読み込んで、 <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />のみを 除外したいです。 * 共通のCSSは外すことはできません。 * また、CSSを新たに追加することもできません。 * head内にスクリプトを記述することができますが、スクリプトの記述で解決できますでしょうか。 自分で検索もしてみたのですが、答えに辿りつけません。 どのような方法がありますでしょうか。 何か方法がありましたら、ご教授ください。 よろしくお願いいたします。

    • 締切済み
    • CSS
  • cssのリンクをimport.cssに書きかえれないです!(@dreamweaver)

    はじめまして。 今ある <link href="style.css" rel="stylesheet" type="text/css" /> を common/import.cssをリンクし、 <link href="/common/import.css" rel="stylesheet" type="text/css" /> に変更したいのですが、なぜかできません>< ちなみにimport.cssの中身は @charset "shift_jis"; @import "/common/css/base.css"; @import "/common/css/contents.css"; @import "/common/css/right.css"; このような感じです。 ためしにcommon.cssにいろいろ書いたところ、反映されたので、common.cssそのものは参照できていると思うのですが・・・ ご教授いただければ幸いです。

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

@importハックを使う前に、@import本来の使い方を理解された方が良いと思います。 1.はなんでもかまいません。 2. 3. 4. まずcssを2つ作ります。片方にはスタイルを記述し(こっちを仮にmain.cssとします)、もう片方には@importでmain.cssを指定します。(@importの書かれたほうをimport.cssとします) @importが指定されたcssの中は極力それ以上記述しない方が良いと思います。 @importの書かれたcssの方をhtml側からlink要素で指定します。 これで、html → import.css → main.css という順に読み込みます。 ちなみに@importのハックはいろんな種類があります。 以下パターンを書いてみます。ちょっとしたスペースで結果が違ってくるので、確認しないブラウザは極力外す方が良いと思います。 ちなみに確認しきれてないブラウザが他にもあります。 リンクされているのはstyle.cssです。 ■IE5.0以下、NN4.x以下、MacIE5.2以下を拒否 @import'style.css'; @import"style.css"; ■IE4以下、NN4.x以下、MacIE5.2以下を拒否 @import 'style.css'; ■IE4以下、NN4.x以下を拒否 @import "style.css"; ■IE4以下、NN7.0以下(winの場合)、Opera5以下、Safari1.2以下、Konqueror3.5.5以下を拒否 @import " style.css "; ■NN4.X以下を拒否 @import url(style.css); @import url("style.css"); ■NN4.X以下、MacIE5.2以下を拒否 @import url('style.css'); ■NN7.0以下(winの場合)、Opera5以下、Safari1.2以下、Konqueror3.5.5以下を拒否 @import " style.css ";

共感・感謝の気持ちを伝えよう!

質問者からのお礼

こんなに丁寧に書いていただきありがとうございました!! どの参考書をみても載ってなかったので質問してみました。 大変に参考になりました。

関連するQ&A

  • widthでcss,js切換可能でしょうか。

    【Web製作】widthでcssやjavascriptを切換えたいです。 マルチデバイス対応のWebSiteを製作しようと思うのですが、 widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。 横幅が【959px以下】の場合は【style-1.css】と【base1.js】 横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。 htmlに <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> と記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。) 私の解釈ですと、 1.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> ↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】 2.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> ↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】 3.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> ↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】 4.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】 5.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】 と、解釈し指定しているのですがうまく動作しません。 そしてもう一つなのですが、 widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。 よろしくお願いいたします。

  • 閲覧用CSSと印刷用CSSを分けることは可能ですか?

    現在、WEBページをtable無しのCSSで作成しています。 普通に閲覧する場合には問題ないのですが、 印刷しようとすると外部CSSで指定している画像が 印刷できないため、#fff部分が消えてしまいます。。 その為、media="screen"とmedia="print"で使い分けて 印刷時には#fffを#999などにしようと思ったのですが、 閲覧時にそれが反映されてしまって、黒い画像に#999文字になってしまい上手くいきません。 現在の記述は、 <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> <link rel="stylesheet" href="print.css" type="text/css media="print"> です。 色々サイトを見たところこの方法であってると思ってたのですが 何が間違っているのでしょうか?? もしくは、他に印刷時も閲覧画面と同じように見せる方法があれば 教えてください。よろしくお願い致します。

    • ベストアンサー
    • HTML
  • プリント用CSSについて

    いつもお世話になります。 プリント用のCSSを作成しようと思うのですが、 複数記述してもエラーは出ないのでしょうか? 説明がうまくないので具体例を書かせていただきます。 “a.css”“b.css"の各々のプリント用cssを “aprint.css”と“bprint.css"とした場合に <link rel="stylesheet" href="css/a.css" type="text/css" media="all"> <link rel="stylesheet" href="css/b.css" type="text/css" media="all"> <link rel="stylesheet" href="css/aprint.css" type="text/css" media="print"> <link rel="stylesheet" href="css/bprint.css" type="text/css" media="print"> この記述で不具合はないものかと悩んでいます。 それともa,bを統合して“c.css”という新たなものを作り、 プリント用“cprint.css”を設けるべきでしょうか? できれば複数記述できると助かるのですが。 要領を得ない質問ですみませんが、ご教授いただけると嬉しいです。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSファイルは、どこから読み込んでいるのか?

    とあるWebサイトのソースを見たら、headの部分が次のようになっておりました。 <link rel="stylesheet" href="css/import.css" type="text/css" media="all" /> これは、普通に記述されていると思いますが、href="css/import.css"を開いてみたら、次の記述しかありませんでした。 @charset "utf-8"; /* CSS Document */ @import "common.css"; @import "top.css"; @import "text.css"; @import "faq.css"; @import "form.css"; これは、どういうことでしょうか? CSSからCSSを読みこんでいるのでしょうか? なぜ、htmlファイルに複数行をかけてCSSファイルを一つずつ読みこませないのでしょうか? 何かメリットがあるのでしょうか?

    • ベストアンサー
    • CSS
  • CSSの文字コード指定について

    XHTML1.1でマークアップを行っています。 文字コードは全てutf-8でまとめているので外部CSSファイルの1行目に“@charset "utf-8";”と記述していますが、CSSを読み込むための記述は <link rel="stylesheet" type="text/css" href="css/base.css" media="all" title="#"/> と <link rel="stylesheet" type="text/css" href="css/base.css" media="all" charset="utf-8" title="#"/> では厳密にはどちらの方が正しいのでしょうか? 2つの違いは“charset="utf-8"”の有無です。

    • ベストアンサー
    • CSS
  • php?でスマホ用のCSSへ切り替える記述について

    php?でスマートフォン用のCSSへ切り替える記述について質問です。 HTML/CSSの知識はあるのですがPHPについてはさっぱりで… お力を頂ければと思います。 今度CSSの切り替えでスマートフォン用のサイトを表示することになったのですが、 一部システムが絡んでいるため切り替え方が分かりません。 拡張子は.ctpです。 HTML/CSSで下記の記述にしています。 <link rel="stylesheet" type="text/css" href="../_common/css/import.css" media="all and (min-width : 706px),print" /> <link rel="stylesheet" type="text/css" href="../_common/css/_phone/import.css" media="only screen and (max-width : 705px)" /> PHP?でCSSを読み込む部分は <?php echo $this->Html->meta('icon'); echo $this->Html->css('/_common/css/import.css'); echo $scripts_for_layout; ?> と記述されています。 上記にどういった記述を加えればHTML/CSSのような切り替えが可能でしょうか? もしくは、全く別の部分をいじらなければならないのでしょうか? よろしくお願い致します。

    • ベストアンサー
    • PHP
  • フォントのサイズが変わってしまいサイトが崩れる

    IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。 調べたところ下記のような情報があったのですが、この方法がよいのでしょうか? http://kudox.jp/html-css/font-size-css また上記通りにする場合下記は <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> 最優先させるのでしょうか?最優先なら下記のような感じでよいのでしょうか? <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <link rel="stylesheet" href="page.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> またmedia="all"はとりあえずすべてにつけておいたほうがよい属性と考えてよいのでしょうか? 教えてください。

    • ベストアンサー
    • HTML
  • フォルダの変数について

    LINKやSCRIPTで .css とか .js とかのファイルを呼び出そうとしたいのですが、 そのファイルの格納フォルダを 拡張子で判断するような変数の使い方ってあるのでしょうか?  たとえば  print "<LINK rel="stylesheet" href="select_file/base.css" type="text/css" media="all">\n"; の 様に記述し  変数select_file には 'css'や'js'のフォルダ名が格納されていて 実行すれば <LINK rel="stylesheet" href="../css/base.css" type="text/css" media="all"> の様になる。 こんな便利な方法はあるのでしょうか? よろしくご教授下さい。

    • 締切済み
    • CGI
  • CSSについて

    どうもこんばんわ 現在CSSについて勉強中です 色々なサイトへ行ってCSSを眺めてるんですが <link rel="stylesheet" type="text/css" href="sample.css" media="all" /> こうゆうHTMLファイルのヘッダーに記述されていないCSSは見れないんでしょうか? よろしくお願いします~^0^

    • ベストアンサー
    • CSS
  • レスポンシブデザインにする方法、参考サイト

    現在作成しているサイトをレスポンシブにしようと色々サイトを調べているのですが、一部はしょってあったりなかなかいいサイトがありません。 こちらのスキルとしては通常のサイト制作は仕事で請け負っています。 現在レスポンシブサイトの案件が増えているので、自分のサイトを勉強用にしています。 例えばつまずいているのは基本的な部分なのですが、 htmlの<head>部分に <link rel="stylesheet" media="screen and (min-width:1024px)" type="text/css" href="css/layout.css"> <link rel="stylesheet" media="screen and (min-width:768px)" type="text/css" href="css/tabletcss"> <link rel="stylesheet" media="screen and (min-width:480px)" type="text/css" href="css/smart.css"> と記述し、cssを3種類用意し、各cssに @media screen and (min-width:480px) { img{ max-width: 100%; height: auto; width /***/:auto;  }・・・以下各要素省略 } とそれぞれ記述すると、<head>部分で一番下にリンクしたsmart.cssの内容が1024pxで設定してあるはずのPCでの表示に影響してしまいます。 リンクの貼り方はコリスさんのところで参考にしたと思うのですが、どこが問題でしょうか? それ以外の画像や要素の%表示のことはわかるのですが、ここが肝心だと思うので..恐らく一番基本的なことなので調べても省略してあるサイトもあるのかもしれません。 一度覚えてしまえば使い回し出来ると思うのですが、この質問への答えでなくても、参考になるサイトがありましたらご教示下さい。ちなみに省略してるだけでreset.css等は設定してあります。

    • ベストアンサー
    • CSS