今回の講座は、CSSの基本文法と、CSSで指定した内容が親から子、孫へ継承されること、およびCSSの記述場所について、基本的な内容を紹介しています。内容は簡単です。慣れてしまえば、身に付きます。
CSSを使うメリット
HTMLでは、テキストに文書構造を与えました。文章をタグでマークアップして、見出しや箇条書きなどの意味を機械に伝える役目をしていました。HTMLで装飾されただけの文章でも読み取りはできますが、見栄えの良いウェブページではありません。
CSSを使うことで、HTMLの文書構造のままで生き生きしたデザインやレイアウトとして表示させることができます。これが、CSSを使うメリットです。
CSSの基本文法
CSSの基本文法は、簡単です。理解するのは、「セレクタ」と「プロパティ」、「プロパティの値」です。
- 「セレクタ」は、「どこの」に該当するもので、スタイルを設定する要素を示しています。
- 「プロパティ」は、視覚表現の機能で、「何を」に該当します。
- 「プロパティの値」は、「どうする」に該当します。
具体的な記述は、「セレクタ{プロパティ：値}」のようにします。例えば、h1タイトルの文字を青文字にする場合は、「h1{color:blue;}」のように記述します。（もちろん、「」は不要です）
このようにすると、見出し文字のみ青文字になります。文法は、以上のように簡単です。
CSSの仕組み
CSS は、前にも紹介した通りCascading Style Sheetsの頭文字ですが、Cascadingの意味に触れます。カスケードとは、傾斜地に流れる小さな滝を意味しています。
これは、上位から下位に流れ落ちるイメージを意味しています。
CSSには、親の要素から子の要素、孫の要素へと、指定したスタイルが引き継がれていく「継承」という機能があるからです。
例えば、
「＜body＞
＜p＞琵琶湖は＜em＞日本で一番大きな＜/em＞湖です＜/p＞
＜/body＞」
の例では、
body要素は、「親」です。
p要素は、「子」
em要素は、「孫」に該当します。
CSSでは、「親」のbody要素に「文字の色を青くする」と指定すると、「子」のp要素や、「孫」のem要素の文字も青くなります。
CSSを記述する場所
CSSを記述するには、「インライン」、「エンベッド」、「リンク」という3つの方法があります。
- 「インライン」は、HTMLのタグに直接記述するものです。
- 「エンベッド」は、style要素をheadの要素内に書いて、その中にCSSを記述するものです。
- 「リンク」は、外部ファイルとして作成したCSSをHTMLファイルから参照して利用するものです。
どの方法が良いとは一概には言えませんが、1つのCSSを複数のHTML文書で使える「リンク」は、多くの文書を扱うプロは当然のように使っています。
まとめ
CSSの基本文法を学んできました。基本的には、「どこの」「何を」「どうする」かを、指定するだけです。
但し、「どこの」に該当する「セレクタ」は、指定が「継承」に関わるため重要です。経験を積むことで、最も良いものを選べるようになるので、焦らないで対応していきましょう。
CSSを記述する場所は、「インライン」「エンベッド」「リンク」の3つのやり方があります。
業務で対応するプロは「リンク」で対応しますが、この講座の初心者は、少しずつ経験するのが良いでしょう。
