CSSの書き方を詳しく解説！基本的な型とルールを覚えよう

CSSの基本構造

CSSの書き方はとても簡単です。一定の法則があるので、慣れてしまえば迷うことはないでしょう。初めてCSSを目にする方は、以下の法則を覚えておいてください。

CSSは「どの要素の」「どの部分を」「どれくらい」変えるのかを記述します。これらの名称は、それぞれ「セレクタ」「プロパティ」「ヴァリュー」と言います。

セレクタ（Selectors）

スタイルを適用する要素を選択するためのものです。HTMLタグの名称や、id属性やclass属性で与えた名称などを指定します。

プロパティ（Property）

要素のスタイルを変える部分を選択するためのものです。文字の色や太さ、要素の幅や高さなど、各要素には変更可能なプロパティがあらかじめ用意されています。

ヴァリュー（Values）

プロパティの変化の具合いを選択するためのものです。基本的には英単語や数値で指定します。日本語ではヴァリューのことを「値あたい」と言い換えることもあります。予め定義されているキーワードや、単位つきの数値、関数などで指定します。

CSSの具体的な記述方法

それでは簡単な例を見ていきましょう。HTMLに見出しと段落の要素が配置してあるとします。ここで、見出しの文字色を赤に変更する場合は、以下のように記述します。


<h1>見出しのテキスト</h1>
<p>段落の内容です。</p>


h1 { color: red;}

続いて、見出しに下線を加えてみましょう。h1のセレクタに指定する内容は、{と}で囲われた宣言ブロックの中に追加します。ソースコードの改行は何行加えても構いません。


h1 {
	color: red;
	border-bottom: 1px solid gray;
}

上記で追加したborder-bottomは要素の底辺に位置する境界線を操作するプロパティです。その後に続く:から;の間に書かれた内容が、どのように境界線を装飾するか定義した値です。ここでは、極細（1px）の直線（solid）を灰色（gray）で表示するように指定しています。

最後に、段落の文字を右に寄せてみましょう。新たなセレクタは、前のセレクタの宣言ブロックを閉じた後に追加します。プロパティの名前は簡単な英語で定義されています。必要になったものから覚えていきましょう。


h1 {
	color: red;
	border-bottom: 1px solid gray;
}
p {
	text-align: right;
}

このように、スタイルの対象となる要素を「セレクタ」で指定し、スタイルの変更箇所を「プロパティ」で定め、各プロパティの変化の具合いを「ヴァリュー」で調整します。

基本的な記述の形式は、セレクタに指定するプロパティを{と}で囲み、プロパティに指定するヴァリューを:と;で囲みます。それをワンセットとして、複数のスタイルを組み合わせれば装飾が完成します。

各プロパティに対するヴァリューの指定が終了したら、必ずセミコロン（;）を閉じるクセをつけてください。セミコロンの記述を忘れると、正しく表示されません。

CSSを記述できる場所

CSSを記述できる場所は全部で３ヵ所あります。一つは、HTMLのヘッダーに配置した<style>要素の中、そしてHTMLタグに指定したstyle属性の中、さらに外部に用意したCSS専用ファイルの中です。それぞれに一長一短があるので、状況によって使い分けてください。

先ほど紹介した記述例を、それぞれの書き方で見てみましょう。

HTMLのヘッダーに<style>要素を設置する方法

<head>の間に<style>を設置し、その中にCSSを記述します。この方法は、特定のページにのみ適応したいCSSがある場合に有効です。


<head>
	<meta charset="UTF-8">
	<title>ページのタイトル</title>
	<style>
	h1 {
		color: red;
		border-bottom: 1px solid gray;
	}
	</style>
</head>

HTMLタグのstyle属性を使用する方法

HTMLの要素にはグローバル属性というものがあります。これは全てのタグに対して使用できるもので、style属性もそのひとつです。style属性を使うと、その値にCSSを指定できます。この方法は、特定の要素に対してのみ適応したいスタイルがある場合に有効です。


<h1 style="color:red; border-bottom:1px solid gray;">
	見出しのテキスト
</h1>

外部にCSS専用ファイルを用意してHTMLで読み込む

HTMLのヘッダーに<link>を設置し、URLでCSSファイルを読み込みます。CSSの専用ファイルは、HTMLと同様にテキストファイルの拡張子を「.css」に変更するだけで作成できます。これが最も推奨するやり方です。


<head>
	<link rel="stylesheet" href="file.css">
</head>


/* file.css の中身 */
h1 {
	color: red;
	border-bottom: 1px solid gray;
}

CSSって何？初心者が最初に学ぶべき基礎知識