CSSの書き方を詳しく解説！基本的な型とルールを覚えよう
CSSの基本構造
CSSの書き方はとても簡単です。一定の法則があるので、慣れてしまえば迷うことはないでしょう。初めてCSSを目にする方は、以下の法則を覚えておいてください。
CSSは「どの要素の」「どの部分を」「どれくらい」変えるのかを記述します。これらの名称は、それぞれ「セレクタ」「プロパティ」「ヴァリュー（値）」と言います。
セレクタ（Selectors）
スタイルを適用する要素を選択するためのものです。HTMLタグの名称や、id属性やclass属性で与えた名称などを指定します。
プロパティ（Property）
スタイルを変える部分を選択するためのものです。文字の色や太さ、要素の幅や高さなど、要素の変更部分を表すプロパティがあらかじめ用意されています。
ヴァリュー（Values）
プロパティの変化の具合いを選択するためのものです。基本的には英単語や数値で指定します。日本語では値と呼ばれます。値は、予め定義されているキーワードや、単位つきの数値、関数などで指定します。
CSSの具体的な記述例
まずは簡単な内容を見てみましょう。例えば、文章の見出しを装飾したい場合は以下のように記述します。
<h1>見出しのテキスト</h1>
h1 { color: #ff0000;}
続いて、見出しに下線を加えてみましょう。その方が見出しっぽくなり、よく目にする装飾になります。
h1 {
color: #ff0000;
border-bottom: 1px solid #999999;
}
このように、スタイルの対象となる要素を「セレクタ」で指定し、スタイルの変更箇所を「プロパティ」で定め、各プロパティの変化の具合いを「ヴァリュー」で調整します。
基本的な記述の形式は、セレクタに指定するプロパティを { と } で囲み、プロパティに指定するヴァリューを : と ; で囲みます。それをワンセットとして、複数のスタイルを組み合わせれば装飾が完成します。
各プロパティに対するヴァリューの指定が終了したら、必ず「;（セミコロン）」で閉じるクセをつけて下さい。セミコロンの記述を忘れると、正しく表示されません。
CSSを記述できる場所
CSSを記述できる場所は全部で３ヵ所あります。HTMLのヘッダーに配置した<style>要素の中、HTMLタグに指定したstyle属性の中、そして外部に用意したCSS専用ファイルの中です。それぞれに一長一短があるので、状況によって使い分けてください。
先ほど紹介した記述例を、それぞれの書き方で見てみましょう。
HTMLのヘッダーに<style>タグを設置する方法
<head>の間に<style>を設置し、その中にCSSを記述します。この方法は、特定のページにのみ適応したいCSSがある場合に有効です。
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<style>
h1 {
color: #ff0000;
border-bottom: 1px solid #999999;
}
</style>
</head>
HTMLタグのstyle属性を使用する方法
HTMLタグにはグローバル属性というものがあります。これは全てのタグに対して使用できるもので、style属性もその一つです。style属性を使うと、その値にCSSを指定できます。この方法は、特定の要素に対してのみ適応したいスタイルがある場合に有効です。
<h1 style="color:#ff0000; border-bottom:1px solid #999999;">
見出しのテキスト
</h1>
外部にCSS専用ファイルを用意してHTMLで読み込む
HTMLのヘッダーに<link>を設置し、URLでCSSファイルを読み込みます。CSSの専用ファイルは、HTMLと同様にテキストファイルの拡張子を「.css」に変更するだけで作成できます。これが最も推奨するやり方です。
<head>
<link rel="stylesheet" href="CSSのファイル名.css">
</head>