CSSの書き方:基本的な型とルールを覚えよう

CSSの基本構造

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

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

アイキャッチ:CSSの基本的な構造

セレクタ

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

プロパティ

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

ヴァリュー(値)

プロパティの変化の具合いを選択するためのものです。基本的には英単語や数値で指定します。

CSSの具体的な記述例

まずは具体的な記述例を見てみましょう。例えば、文章の見出しを装飾したい場合は以下のように記述します。

HTML
<h1>見出しのテキスト</h1>
CSS
h1 { color: #ff0000;}
表示確認
見出しのテキスト

続いて、見出しに下線を加えてみましょう。その方が見出しっぽくなり、よく目にする装飾になります。

CSS
h1 {
	color: #ff0000;
	border-bottom: 1px solid #999999;
}
表示確認
見出しのテキスト

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

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

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

CSSを記述できる場所

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

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

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

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

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

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

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

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

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

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

HTML
<head>
	<link rel="stylesheet" href="CSSのファイル名.css">
</head>

CSSリファレンス

CSSって何? 初めての方でも分かる超基礎知識を解説します
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます