外部CSSファイルの適用

それでは、例として「私のパソコン日記」に作成者CSSを使ってお化粧を施してみましょう。

作業手順

HTML文書に作成者CSSを適用する」ということは、「スタイルシートを別に用意し、ブラウザがそのスタイルシートを参照してからHTML文書を表示するようにする」ということです。よって、

  1. 作成者CSSファイルをHTML文書とは別に(=HTML文書の外部に)作成し、
  2. 「このCSSに書いてある通り表示してね」ということをブラウザが理解できるように、HTML文書のhead要素に記述を加えておく

という2つの作業が必要になります。

外部CSSファイルの作成

外部CSSファイルと言っても、HTML文書同様テキスト形式のファイルです。だからWindows付属のメモ帳で作成できます。nikki_kansei.htmlがあるフォルダと同じフォルダ内に外部CSSファイルを作成してみましょう。nikki_kansei.html(「私のパソコン日記」のHTML文書)があるフォルダを開き、ウィンドウ内の何もないところで右クリック→新規作成→テキスト文書を選択。現れたファイルの名前をここでは「nikki.css」と付けておきましょう(CSSファイルの拡張子は「.css」が一般的ですでなければなりません)。

外部CSSファイルとHTML文書をリンクさせる

CSSを適用したいHTML文書のhead要素内(title要素の直前でけっこうです)に、下のようなlink要素を追加します(link要素は空要素。よって終了タグは不要)。

<link rel="stylesheet" type="text/css" href="CSSファイルのURL">

今回のようにnikki_kansei.htmlとnikki.cssが同じフォルダにある場合は、nikki_kansei.htmlのhead要素内に

<link rel="stylesheet" type="text/css" href="nikki.css">

と書き加えます。これで準備はOK。あとは、nikki.cssというファイルを編集していけばいいんです。(もちろん、CSSファイルを置く場所は自由です。nikki_kansei.htmlと別フォルダでもかまいません。ただその時はCSSファイルのURLの書き方に注意してくださいね。)

外部CSSファイルの編集

nikki.cssをメモ帳で開いてください(もちろんまだ何にも書かれていません)。また、nikki_kansei.htmlをブラウザで開いて、いつでも見られる状態にしておいてください。

スタイルを指定する際の記述方法

CSSファイル内にどのように記述するかなんですが、まず原則的に「半角英数で書く」ことに留意してください。そして、

対象 { Aを:Bにする }

という形式で書きます。「Aを」と「Bにする」の間は:(コロン)です。「対象」の部分には、例えば「h1」などの要素名が入ると考えておいてください(詳細は別ページにて説明予定)。また1つの対象に複数の指定をすることができるので、

対象 { Aを:Bにする ; Cを:Dにする ; Eを:Fにする }

というように連続して書くこともできます。「〜にする」の直後はすべて;(セミコロン)です。

また、2つの対象に対し1度にスタイルを指定することもできます。

対象1 , 対象2 { Aを:Bにする }

対象1と対象2の間は「, 」(コンマ)です。

CSSの具体的記述例

さあそれでは具体例を示しましょう。nikki.cssにこう書いてみてください。

* { font-size:100% ; font-weight:normal }

対象に指定した「*」というのは、すべての要素、という意味です。だから、すべての要素の文字の大きさ(font-size)をブラウザの標準フォントサイズ(100%)に指定し、すべての要素の文字の線の太さ(font-weight)を普通(normal)に指定したことになります。要するところ、すべての要素の文字表示方法を初期化したことになる訳です。

記述できたらnikki.cssを上書き保存したあと、nikki_kansei.htmlを開いているブラウザをアクティブ(選択状態、最前面表示)にして「最新の情報に更新」してみてください(Internet ExplorerならF5キーを押せばOKです)。すると編集後のnikki.cssを読みこんだ上でnikki_kansei.htmlが表示され、スタイルがきちんと適用されているかどうか確認できます。

そして改行した後、続いて下のように書いてみます。

body { color:#000000 ; background-color:#99CCFF ; margin-left:10% ; margin-right:10% }

(#000000や#99CCFFというのは「色」を表す番号で「色」を16進表記したものです。「色」の指定についてはThe Quick Color Tableを用意しましたのでご参照下さい。)

上の例では、body要素全体の文字色(color)を#000000(黒)、背景色(background-color)を#99CCFF(薄い青?)に指定し、全体幅の10%の幅だけ左右に余白(margin-left、margin-right)をとってみました。

どんどんいってみましょう。

h1 { font-weight:bold ; text-align:center ; border:white 3px dotted ; padding:5px }

h1要素である「私のパソコン日記」の部分の文字の線の太さ(font-weight)を太字(bold)にし、文字の並び方(text-align)を中央寄せ(center)にし、h1要素というブロックの境界線(border)を「白色で3ピクセルの太さで点線(dotted)で」表示し、上下左右の境界線からの距離(padding)を5ピクセルとって見易くしてみました。

h2 { font-weight:bold ; border-left:black 1em solid ; border-bottom:black 1px solid ; padding-left:0.5em }

h2要素(日付の部分ですね)の文字を太字で表示。そして左側の境界線(border-left)の色を黒、太さを1em(1emとは半角英数の大文字一文字分の幅・高さです)、一重の実線(solid)で表示。下側の境界線(border-bottom)の色は黒、太さは1ピクセル、一重の実線で表示するよう指定してみました。さらに見易いように、左の境界線との距離(padding-left)を0.5emだけとってみました。

h3 { font-weight:bold ; color:#996600 ; background-color:white ; padding-left:1em ; padding-top:3px ; padding-bottom:3px }

h3要素(日記内の見出しですね)を太字、文字色は#996600(茶系統)、背景色は白、左境界線との距離(padding-left)を1em、上下の境界線との距離(padding-top、padding-bottom)をそれぞれ3ピクセルとってみました。

p { line-height:1.5em }

p要素(各段落ですね)に対し、読みやすいように少しだけ行間をとってみました。line-heightというのは「1行の高さ」という意味です。1行の高さを半角英数大文字の1.5倍に指定することにより、行間を確保しています。

今回は一応ここまでにしましょう。nikki.cssは以下のようになっている筈です。

* { font-size:100% ; font-weight:normal }
body { color:#000000 ; background-color:#99CCFF ; margin-left:10% ; margin-right:10% }
h1 { font-weight:bold ; text-align:center ; border:white 3px dotted ; padding:5px }
h2 { font-weight:bold ; border-left:black 1em solid ; border-bottom:black 1px solid ; padding-left:0.5em }
h3 { font-weight:bold ; color:#996600 ; background-color:white ; padding-left:1em ; padding-top:3px ; padding-bottom:3px }
p { line-height:1.5em }

外部CSSファイル適用前適用後を見比べてください。随分印象が変わりましたね。こういうようにCSSファイルを適用・編集することにより、自分だけのスタイルを自由に表現できるようになります。ちょっと、嬉しくなってきませんか?(^O^)

ここで重要な点があります。それは、見映えを決定するに際しHTML文書(のbody要素)を一切編集していない、ということです。HTML文書作成時にきちんと正しくマークアップしてから外部CSSファイルをリンクさせておけば、その後はほとんどHTML文書に触ることなく見映えを決定できますし、見映えを変更したければCSSファイルのみ変更すればよいのです。

また外部CSSファイルを1つ作成しウェブサイト内の全てのHTML文書にリンクさせておけば、サイト全体を1つのデザインに簡単に統一することができ、閲覧者にとってわかりやすいものになります。そして1つの外部CSSファイルを編集するだけで、サイト全体を模様替えすることができます。見映えを分離することでこういったメリットを享受することができるのです。

CSSのほんのさわりだけをご説明させていただきました。CSSの素晴らしさが皆さんに伝われば幸いです。