HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


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

書き方

@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ファイルの冒頭が望ましい)記述する必要があります。

次のページへ >>