外部スタイルシート(CSS)を読み込み、一括指定する2

@import “URI”; または @import url(URI);

書き方

@import “URI”; または
@import url(URI);

解説

スタイルシートを記述したCSSファイルを別途用意し、HTMLに外部ファイルとして読み込ませる方法には、他の書き方もあります。

上記のような書き方で、HTML内もしくはCSSのファイル内に記述します。

URIにCSSのファイル名を

上記の書き方には2種類の書き方がありますが、どちらの場合でも構いません。

URIの部分には、読み込ませたいCSSのファイル名を相対パスか絶対パスで指定します。

規則文の挿入位置

上記の規則文は以下のサンプルのようにHTMLのスタイルヘッダー(<style>〜</style>間)に挿入します。

同じ位置にセレクタで個別にスタイルシートを指定している場合(サンプルではp要素)は、import文はこのセレクタの指定文よりも必ず前に記述しなければなりません。

CSS/HTMLサンプル

<style type=”text/css”>
<!–
@import “style.css”;
p { font-size:small ; color:red ; }

–>
</style>

サンプルファイル省略

複数のimport文は?

もちろん可能です。URIごとにimport文を列挙して複数のスタイルシートを読み込めます。

import文はCSSファイルにも記述可能

このimport文はHTMLだけでなく、CSSファイルにも同じように記述することができます。

この場合も、どのプロパティよりも前に(できればCSSファイルの冒頭が望ましい)記述する必要があります。

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!