CSSの記述
CSSの記述方法は下記の三通りです。
- 外部CSSファイルに記述
- style要素に記述
- 各要素のstyle属性に記述（インラインスタイルシート）
以下、順に説明してゆきます。
例としてcss Zen Garden（日本語訳）を使用します。授業用として元のファイルに多少の変更を加えています。
前回同様に、下記のファイルをダウンロードして展開(Windowsは右クリックから展開、Macはクリック）してください。
cssZenGardenJpn.htmをブラウザで開いて確認してください。
外部CSSファイルに記述
HTMLファイルとは別に、CSSを記述したCSSファイルを作成して読み込みます。最も一般的な使用方法です。
複数のページで共通したスタイルを使用することができるため、サイト内のページデザインを統一する際に便利です。この授業のサイトも外部CSSファイルを使っています。
head要素内に下記のlink要素を記述し、読み込む外部CSSファイルを指定します。
<link rel="stylesheet" href="ファイル名" type="text/css">
ファイル名はCSSのファイル拡張子「.css」をつけて指定します。
例 外部CSSファイル
css Zen Garden（日本語版）サンプルファイルcssZenGardenJpn.htmlには、下記のlink要素が記述してあります。
css Zen Garden（日本語版）サンプルファイル cssZenGardenJpn.html
<link rel="stylesheet" href="style.css" type="text/css">
CSSを記述した外部のCSSファイル「style.css」を読み込みます。
注）これは講義用に追加したもので、元のcss Zen Gardenのファイルには、違う形で外部のCSSファイルを読み込むようになっています。
【課題1】cssZenGardenJapan.htmをエディタで開いて、上記の記述を確認せよ。
エディタを開いて、cssZenGardenJapan.htmをエディタにドラッグ＆ドロップして開いてください。21行目に記述があります。
確認したらcssZenGardenJapan.htmを開いているエディタは閉じていいです。
【課題2】style.cssを編集して、下記を記述しなさい。
エディタを開いて、style.cssをエディタにドラッグ＆ドロップして開いてください。
css Zen Garden（日本語版）サンプルファイル style.css
h1 {
color:red;
}
上記を記述したら、保存してください。文字はすべて半角英数字です。日本語入力はオフにして入力しましょう。
ブラウザで開いているcssZenGardenJapan.htmを更新して、見出しの表示が赤字に変わったことを確認してください。
うまくいかない場合は、「style.cssを保存したかどうか」「半角英数字で入力しているかどうか」「編集しているstyle.cssの入っているフォルダのcssZenGardenJpan.htmを開いているか」を確認してください。
head要素内のstyle要素に記述
head要素内にstyle要素を記述し、style要素内にCSSを記述します。そのページ特有のスタイルを使う場合に使用します。
<style type="text/css"> セレクタ { 宣言 } </style>
style要素に対応していないブラウザでは、CSSが直接表示されてしまう可能性があるため、下記のようにCSSをHTMLのコメント（<!--と-->ではさむ）にしておく方がよいです。
<style type="text/css"><!-- セレクタ { 宣言 } --></style>
読みやすくするため、下記のようにCSSの前後で改行するのが一般的です。
<style type="text/css"><!--
セレクタ { 宣言 }
--></style>
例 style要素
css Zen Garden（日本語版）サンプルファイル cssZenGardenJpn.htmlのhead要素内に以下のstyle要素を記述します。
css Zen Garden（日本語版）サンプルファイル cssZenGardenJpn.html
<style type="text/css"><!-- --></style>
サンプルファイルには上記のstyleタグだけ記載してあります。
【課題3】cssZenGardenJapan.htmをエディタで開いて、上記の記述を確認せよ。
エディタを開いて、cssZenGardenJapan.htmをエディタにドラッグ＆ドロップして開いてください。22から24行目に記述があります。
【課題4】cssZenGardenJapan.htmを編集して、下記を記述しなさい。
エディタを開いて、cssZenGardenJapan.htmをエディタにドラッグ＆ドロップして開いてください。
css Zen Garden（日本語版）サンプルファイル cssZenGardenJpn.html
<style type="text/css"><!--
* { /* 全ての要素 */
border:solid 1px #999999; /* 灰色の枠線 */
margin:2px; /* 周辺余白 */
}
--></style>
sytle要素は記述済みなので、CSS部分だけを記述します。
今回は、コピー＆ペーストを使ってみましょう。この授業では、サンプルを体験してもらう作業が多いため、 ショートカットキーの使用をお勧めします。
- 上記の「*」から「}」までの4行をドラッグして選択します。
- 「Ctrl」（Macはcommand）キーを押しながら、「C」キーを押してコピーします。（以後、Ctrl＋Cと表記）
- cssZenGardenJapan.htmを開いているエディタに切り替えて、23行目をクリックしてカーソル移動します。
- Ctrl＋Vでペーストします。
- Ctrl＋Sで保存します。
ブラウザで開いているcssZenGardenJapan.htmを更新して、表示が変わったことを確認してください。
やたらといっぱい枠が表示されたかと思います。これは、すべてのタグに枠を引くスタイルを設定したからです。ボックス概念でページが構成されていることを確認できたかと思います。
うまくいかない場合は、「style.cssを保存したかどうか」「半角英数字で入力しているかどうか」「編集しているstyle.cssの入っているフォルダのcssZenGardenJpan.htmを開いているか」を確認してください。
各要素のstyle属性に設定（インラインスタイルシート）
設定したい要素に直接style属性として宣言を記述します。要素の特定の必要がないのでセレクタはありません。特定の要素だけで指定したい場合に使用します。
class属性やid属性で代替できることに加え、設定箇所が文書中になるため後から記述を探しづらく、お勧めしません。
書式は以下のようになります。
<要素名 style="プロパティ1: 値1; プロパティ2: 値2; …">
また、ヘッダ部分に下記を追加します。
<meta http-equiv="content-style-type" content="text/css">
例 style属性（インラインスタイルシート）
css Zen Garden（日本語版）サンプルファイルcssZenGardenJpn.htmlのh1要素に下記の赤字部分を追加してみましょう。
css Zen Garden（日本語版）サンプルファイル cssZenGardenJpn.html
<h1 style="color:blue;"><span>css Zen Garden</span></h1>
【課題5】cssZenGardenJapan.htmをエディタで開いて、上記の記述を記載せよ。
エディタを開いて、cssZenGardenJapan.htmをエディタにドラッグ＆ドロップして開いてください。46行目あたりにh1要素があります。
h1要素に上記の属性（赤字部分）を追記して保存（Ctrl+S）してください。h1とstyleの間の半角スペースも落とさないようにしましょう。
ブラウザで開いているcssZenGardenJapan.htmを更新して、表示が変わったことを確認してください。
style.cssの設定（赤字）と重複していますが、h1要素の色は青字になりますね。
これは、記述場所による優先度があるためです。記述場所による優先度は、インラインスタイルシート＞style要素＞外部CSSファイルの順になっています。
詳しく知りたい人は「カスケード処理」で検索してみてください。
まとめとおまけ
CSSの編集作業はうまくできましたか？
CSSを使ったWebページ作りは、HTMLファイルのエディタ、CSSファイルのエディタ、ブラウザの３つを行き来しながらの作業になります。ウィンドウの切り替えが大変かと思いますが、慣れてください。
また、以下のショートカットキーはWeb作業に限らず便利ですのでぜひ覚えてください。Officeでも使えます。
- Ctrl+Z: やり直し
- Ctrl+X: カット（切り取り）
- Ctrl+C: コピー
- Ctrl+V: ペースト（貼り付け）
- Ctrl+S: 保存
- Ctrl+A: 全選択
Programming Laboratory (Shio seminar)