今回は、CSSの基本的な書き方を紹介したいと思います。
この記事の後半で「よく使うHTMLタグ」のHTMLへの装飾例を紹介していきます。
関連記事
まずは、この記事を作成するにあたり参考にした書籍を紹介します。
こちらの書籍にはここで紹介していない装飾も多数掲載されています。また、内容が理解しやすいのでオススメです（現在は新版が出ています）
基本的な書き方
CSSは以下のように記載します。
必ず{}（中括弧）内に記載していきます。
セレクタ名{
プロパティ: 値;
}
セレクタ名：どの部分にスタイルを適用するかを選択します。
プロパティ：適用するスタイルの種類です。
値：どのように変更するのかを指定します。（フォントサイズやフォント色など）
CSSの記載例
h2 {
color:#ff0000;
}
この場合は、h2タグに対してフォント色に赤を反映しています。
また、改行することで複数のプロパティを反映できます。
フォント色の指定方法
フォント色は、16進数（00-FF）またはredのように指定します。
#ff0000(R 255,G 0,B 0)の場合は赤が100%になります。
また、#f00のように省略することも可能です。
コメントアウトの方法
コメントアウトしたい場合は、コメントを/*（文字列）*/で囲います。
値の単位
【相対単位】
- em：エム（1emは1文字分の長さ）
- ex：エックスハイト（1exは小文字のxの高さ）
- %：パーセント（親要素に対してのパーセント）
- rem：レム（ルートの文字サイズを1としたときの倍率）
【絶対単位】
- px：ピクセル（1pxは画面上の1ピクセル・フォントサイズへの使用は非推奨）
- mm：ミリメートル
- cm：センチメートル（1cm=10mm）
- in：インチ（1インチは2.54cm）
- pt：ポイント（1インチは72pt）
- pc：パイカ（1パイカは12pt）
フォントサイズを指定する場合は相対単位が推奨されています。
装飾例
以下で「よく使うHTMLタグ」に対して実際に装飾していきます。
続きを読む CSSの基本的な書き方