CSSとは、（Cascading Style Sheets、カスケーディング・スタイル・シート）の略で、WEBページのスタイル（デザイン）を指定するための言語です。
HTMLで作成された文書に対して、色や大きさなど見た目の指定を行います。
HTML文書があってこそ、CSSの能力が発揮されます。CSSだけではWEBページは何も起きません。
CSSはセレクタ・プロパティ・バリューという三つの要素からなります。
h2 { color: blue; }
h2…要素を指定（セレクタ）
color…スタイルの種類（プロパティ）
blue…プロパティに実行して欲しい具体的な内容（バリュー）
「<h2></h2>で囲まれた範囲の（セレクタ）、colorを（プロパティ）、blueにする！（バリュー）」と定義しているのが上のコードの意味になります。
セレクタ { プロパティ: 値; }プロパティと値の間は：（コロン）、値の語尾は；（セミコロン）になります。
CSSの書き方は、４つあります。それぞれ説明していきます。
CSSの書き方その1（基本）
まずは、１つ目です。HTMLのタグに対してCSSを適応する方法です。
HTMLでは、H1やdivやｐという「タグ」という概念がありましたね。
例えば、HTMLファイルに以下のようなコードが書かれているとします。
文字のフォントを変更するのと文字に色を指定したいと思います。
【HTMLファイル】
<h1>CSSの書き方その1</h1> <p>はじめてのCSS</p>
では、以上のh1タグで描いている「CSSの書き方その1」という文字の色を赤ににしてみます。
pタグにある「はじめてのCSS」フォントを指定するには「font-family」を使います。ここでは、「メイリオ」に設定します。
以下のようにCSSを記述します。
【CSSファイル】
h1{color: red;}
p{font-family: "メイリオ";}
下記のようになります。
【表示結果】
わかりにくいですが、フォントは変えています。
CSSの書き方その2（style属性を使う方法）
２つ目のCSSの書き方は、HTMLファイルに「style属性」を直接書き込む方法です。
【HTMLファイル】
<p style="color: red;">CSSこんばんは</p>
【表示結果】
「style属性」を使えば、HTMLに直接CSSが書けます。
「style=””」の「””」内に、先ほどと同様にCSSのプロパティと値を書きます。
しかし、一般的にはHTMLファイルとCSSファイルを用意して、HTMLはHTMLファイルに、CSSはCSSファイルに書くのが好ましいです。
CSSの書き方その3（classを指定する方法）
CSSの書き方３つ目は、HTMLのタグに「class」を指定する方法です。
では、例を見てみます。
【HTMLファイル】
<p class="test">CSSこんばんは その３</p>
【CSSファイル】
.test{color: red;}
【表示結果】
classはHTMLのタグに付ける名前のようなものです。
今回は<p>タグに対して「test」というclass名（名前）を付けたのです。
そして、CSSファイルで、「testというClass」に対してプロパティ(color)と値(red)を指定しています。
classを使用した場合、CSSファイルではclass名の前に「.（ドット）」を付けることを忘れないようにしてください。
idも使用することができます。
idの場合は、id名の前に「＃（シャープ）」を付けます。その４のCSSの書き方で紹介します。
CSSの書き方その4（idを指定する方法）
「id」は先ほど学習した「class」と似ています。
では、例を見てみましょう。
【HTMLファイル】
<p id="test4">CSSこんばんは その４</p>
【CSSファイル】
#test4{color: red;}
【表示結果】
「id」も「class」と同様にHTMLのタグに付ける名前のようなものです。
今回は<p>タグに対して「test4」という名前（id）を付けました。
idはPタグに限らず、どんなタグにもつけることができます。
「id」と「class」の使い分けですが、「id」はWEBページに1つしか利用できません。
「class」はいくつでも利用できます。「id」も１つのWEBページに設定しようと思えばいくつでも
設定できますが、1つ目に出てくる「id」にしかCSSは当たりませんので注意が必要です。
ここではclassが”import”となっている要素のフォントを太字にします。他にもh2.importのように
タグ＋クラス名で指定したり、id属性を使って指定する方法もあります。
<h2 class=”import”>限定のタイトル</h2>
h2.import { color: red; }
まとめ
CSSを記述するとき、
class（名前）の前に「.（ドット）」が付きます
id名（名前）の前に「#（シャープ）」が付きます。
紹介した4つのCSSの書き方でよく使われるのは「class」と「id」を使ってCSSを書く方法になります。Googleも推奨しています。
コメント