CSSレイアウト[本文2段組のレイアウト-1]外部CSSの読み込み
CSSを書く場所は、次の3通り。[2] HTMLタグ内の各要素に書く
[3] 外部書類にする
[1][2]は、各HTMLに書くので非常にタイムロス。HTMLも記述が長くなる。しかもベースデザインを変更する場合、大量のHTMLを修正するハメに。
外部書類にしておけば、1つのCSS書類を複数のHTMLで共用でき、修正も1つのCSS書類を修正するだけでOK。
外部CSSの作成
書きかたは、HTMLの<head>部分に書くときと同じ。ファイルの拡張子は「.css」。
コメント文はHTMLの<!-- -->と違い、/**/で囲む。
body ←セレクタという部分。{}で囲んだ中に各プロパティと値を記述。セレクタについての詳細はこちら
{
color : #666666; ←プロパティと値の間は「: (コロン)」で区切る。各行末は「; (セミコロン)」。
text-align : center;
margin-top : 0px;
font: 12px/1.6 Arial, Helvetica, sans-serif;
background : #FFFDDE url(../img/body_bg.gif) no-repeat center -65px;
}
「@import」で外部CSSをまとめる
CSSは用途別に分けた方が整理・編集がしやすい。
このように分割した複数のCSS書類を「@import」でまとめる方法について。
例えばこのサイトは、
●全体のフォーマットデザインを「base.css」
●メニューボタン用を「menuset.css」
●メイン部分のレイアウト用を「mainlayout.css」
と分けて使用している。
分ける理由は、「長くなって見にくいから」。3つのCSSファイルは全部ひとまとめにしてbase.cssでも良いのだが、そうすると記述が長すぎて、修正したい箇所を見つけるのに一苦労することになるため。
上記の3つのCSS書類を「style_import.css」というCSSファイルで1つにまとめて、この1ファイルをHTMLに貼っている。
各HTMLはこの「style_import.css」1つを呼び出すだけ。HTMLの上部がスッキリする。
@charset "UTF-8"; ←ファイルの冒頭は必ずエンコード宣言。
@import "base.css"; ←「@import」でCSSファイルを呼び出す。
@import "menuset.css";
@import "mainlayout.css";
このimport用のCSSの注意点は、エンコードの宣言（@charset "UTF-8";など）を必ず文頭にすること。コメント文などを文頭にすると読み込まないので注意。
なお「@import」の記述方法は下記の3パターンある。
@import url("xxx.css") ; ←基本形。
@import url(xxx.css) ; ←「" "(引用符)」省略可能。
@import "xxx.css" ; ←「url」と () の省略可。引用符は必要。これがいちばん短い書き方。
「link href」で外部CSSをHTMLに読み込む
最後に、外部CSSをHTMLに読み込む方法。HTMLの<head>部分に下記のように記述する。
ここでは、3つのCSSをまとめた「style_import.css」のほかに、このカテゴリー（2段組レイアウト）だけで使用する「2column.css」を読み込んでいる。
このように、ベースとなるCSSは「import」でまとめ、各ページ特有のCSSは別に作って必要なページのみに読み込むようにすると便利。
<link rel="stylesheet" href="../css/style_import.css" type="text/css">
<link rel="stylesheet" href="css/2column.css" type="text/css">
</head>
<link rel="stylesheet" href="css/2column.css" type="text/css" />