(1) CSSとは
CSSとは
CSSとはCascading Style Sheetの略で、HTML文書の装飾をするための言語です。
これまでは白背景に黒文字といったシンプルなHTMLを作成してきましたが、CSS使えばフォントや背景などの大きさや色などを自在に装飾することができます。
CSSの適用方法
CSSの適用方法は大きく分けて３通りの方法がありますが、慣れるまでは次のHTMLに直接記述する方法で説明します。
HTML文書内の<head>内に<style>タグを追加し、その中にCSSを書いていきます。
CSSでは/*と*/に囲まれた部分はコメントとして扱われるので、CSS内に実習コードを書き込む場合は、次のような形になります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSとは</title>
<style>
/* ▼実習コード① ここから▼ */
/* ▲実習コード① ここまで▲ */
</style>
</head>
<body>
（略）
</body>
</html>
(2) CSSの基本的な書き方
CSSの基本文法
CSSはセレクタ，プロパティ，値という３つを組み合わせて、どこの，何を，どうするかを指定します。
セレクタ{プロパティ: 値;}
1つのセレクタについて複数のプロパティと値を設定するときには、次のように書きます。
セレクタ{
プロパティ1: 値1;
プロパティ2: 値2;
プロパティ3: 値3;
}
セレクタ
どの部分を装飾するのかの指定をします。HTMLタグ（h1やpなど），クラス（class）やID（id）で指定した部分に適用します。セレクタに続けて、プロパティと値は波括弧{...}内に記述します。
プロパティ
セレクタで指定された部分の何を変えるのかを書きます。例えば、文字色ならfont-color，文字サイズならfont-sizeのように指定します。プロパティに続けて、値との間にはコロン:を書いて区切ります。
値
値では見た目をどのように変えるのかを書きます。文字色ならred，文字サイズなら16pxのように指定します。値に最後にはセミコロン;を加えます。
数値の指定
文字サイズや幅・高さなどの数値を指定するときは、0(ゼロ)の場合を除いて、単位を付けて書きます。
| 単位 |
読み方 |
説明 |
| px |
ピクセル |
画面上の１画素（ピクセル）を基準とした単位 |
| % |
パーセント |
親要素のサイズを基準とした割合で指定する単位 |
| em |
エム |
親要素の大文字Mの高さ（＝フォントサイズ）を１としたときの相対的な高さ |
| rem |
レム |
html要素の大文字Mの高さ（＝フォントサイズ）を１としたときの相対的な高さ |
色の指定
文字や背景の色を指定するには、次の方法があります。
色名
gray，red，purpleなどの色名を使って指定する方法です。
カラーコード（16進数）
#808080(灰)，
#FF0000（赤），
#FFC0CB（ピンク），
#800080（紫）などのように、色を16進数で表現する方法です。シャープ#のあとの２桁で赤，次の２桁で緑，最後の２桁で青の値を２桁の16進数（00〜FFまでの256階調）で指定します。
RGB値・RGBa値
rgb(127, 82, 31)，
rgb(25%, 50%, 75%)
のように赤・緑・青の３原色の値を使って色を表現する方法です。また、RGBa値とは
rgba(255, 0, 0, 0.50)のように最後に不透明度を指定する方法です。