@importルール

TOPページに戻る > CSS

スポンサード リンク

@importルール

外部CSSファイルを読み込むのに使います
WEBサイトをCSSでデザインしていると、メニュー、ナビ、コンテンツ、サイドバーなど、多くのスタイルをCSSファイルに書き込むと思います。1つのCSSファイルでは書き込む量が多くなってしまって、管理が大変です。
@importルールを使えば、ページごとのCSS、コンテンツごとのCSSファイルを作って管理しやすくすることができます

外部CSSを参照する時にlink要素の代わりに@importルールを使うこともできます
@importはcssファイル内で使う場合が多いです

@importルールの注意事項

cssファイル名は半角英数字、途中にハイホン(-)やアンダーバー(_)は入れられます、最初に数字は使えません
@importルールはcssファイルの一番初めに記述します
@charsetルールを使っている場合は、@charsetの下に@importルールを記述してください

使い方(書式)css
@import url("ファイル名.css");
対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

※全てのブラウザで対応しています

実際の指定方法

相対パス

@import url("index.css"); /* indexとゆう名前を付けたcssファイルを読み込み */

絶対パス

@import url("http://hp-html.jp/css/index.css"); /* 絶対パスで指定することもできます*/

複数の@importをCSSファイルに記述して、複数の外部スタイルシートを参照することも可能

@import url("index.css"); /* indexとゆう名前を付けたcssファイルを読み込み */
@import url("page1.css"); /* page1とゆう名前を付けたcssファイルを読み込み */
@import url("page2.css"); /* page2とゆう名前を付けたcssファイルを読み込み */

@importルールの最後に@mediaの種類を指定できます

@import url("index.css") screen; 
/* screen(パソコン)でwebサイトを見た時にこのcssファイルを読み込む
他にもprint(印刷)、handheld(モバイル機器)などがあります */

IEで@mediaの種類が正しく適用できない不具合があるようです
mediaの指定はhtmlのタグで指定することもできます

<link rel="stylesheet" type="text/css" href="index.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">




(C)2012 ホームページ作成無料