CSSとは
-
CSS（カスケード・スタイル・シート）とは、ページのレイアウトや文字の装飾などを指定する記述方法です。
ホームページというのは複数のページで同じようなデザイン・レイアウトが使われることが多いため、 各ページでバラバラに指定せずに一箇所にまとめて記述してファイルとして保存しておきます。
なぜ一箇所に記述する必要があるのか？と申しますと、サイトのページが複数に渡り多くなってきた際に全ての共通した箇所を一度で全て変更出来るという利点があります。
もちろんそれだけではありませんが、コンテンツ（文章や画像などのページ内容）と、装飾は別々に分けておくことで整理しやすいというのが主な理由になります。
ですので、ここでは直接文字などに装飾するのではなく、CSSを用いて装飾する手段をご説明していこうと思います。
4.CSSを使った文字の装飾（その１）
CSSファイルを作る
-
CSSはページのHTMLに記載することも出来るのですが、それでは前述したメリットが生かされない為、ここでは別のファイルとして用意しましょう。
まずは「common.css」というファイルを下記のように作成してみて下さい。そしてこのCSSファイルをHTMLで読み込ませるための指定をヘッダーで行います。ファイル名：common.css
前回作成したHTMLに、ちょっと追加しましょう。linkから始まる一文が追加され、ボディの中の文字の一部を<span>というタグで区切りましたファイル名：index.html
これで外部ファイル「common.css」を読み込んで適用するようになります。
一応解説すると、<span>タグで句切られた文字に対してクラス名「blue-text」という名前を付け、それをCSSで青いカラーに指定しているということです。
なのでこれをブラウザで表示させると「私のホームページ」というところだけ青い文字に変わります。
CSSの書き方
-
CSSは基本的に「セレクタ { プロパティ : 値; }」という形で指定されます。
例えば前述の「.blue-text { color: #0000ff; }」を例に取ると「.blue-text」がセレクタ、「color」がプロパティ、「#0000ff」が値、となります。
ひとつのセレクタには同時に複数のプロパティの値が指定出来ます。
例えばこのように指定することが可能です。
ちなみに値の後ろにある「;」はそれぞれのプロパティを区切るためのものですが「値の後に;を付ける」とおぼえてしまっても問題ありません。
CLASSとID
-
上の例ではCSSの指定に「class」というものを使いました。
セレクタには「class」の他に「id」というものもあり、それらは使い分けて指定します。
どちらを使えばいいのか？については色々と複雑な考察もありますが、あまり難しい事を覚えても仕方ないので、「classはページの中に同じものが何度も出てくるもの」であり、「idはページの中で一度しか使わないもの」と覚えておけば良いでしょう。
CSSファイルの中でもclassとidの記述は相違します。classの場合は先頭にピリオド、idの場合は先頭にシャープを書いて区別をしています。ファイル名：common.css
また、classは複数指定することも出来ます。この例では「class=”blue-text bold-text”」と２つのclassを指定しています。ファイル名：index.html（一部）
このように複数のCSSが適用出来るのもclassの便利な特徴ですね。
ちなみに、書かれた順番で適用されますので、例えば同じ色変更のcolorが重なった場合は後から読まれた方で上書きされて適用されます。
