ドキュメント全体の基本指定例

HTMLドキュメントのベースとなるスタイルの指定は、body要素に指定します。body要素に指定したスタイルは、自身のコンテンツとなる要素にも適用されます。これを"スタイルの継承"と言います。

スタイルの継承は、要素の親、子、孫…の考え方に基づき、親要素に指定したスタイルは、子、孫要素に継承されます。

また、ハイパーリンクの状態に応じたスタイルも、Webサイトで統一するために、a要素と:link、:visited、:hover、:activeの疑似クラスで、スタイルを指定します。

例)

*{
	margin: 0;
	padding :0;
}

body{
	width: 896px;
	height: auto;
	font-size: 100%;
	color: #474747;
	background-color: #ffffff;
}

a:link{
	color: #1155cc;
}
a:visited{
	color: #7aa1ed;
}
a:hover{
	color: #ffd500;
}
a:active{
	color: #1155cc;
}

上記のスタイルシートは、当サイトで使用しているスタイルシートの一部です。スタイルの追加や値の変更はありますが、私がWebページを作るときのベースとなるスタイルシートです。


ソースコードの解説


すべての要素のマージン、パディング領域のリセット

floatプロパティなどでレイアウトするときなど、すべての要素のマージン領域(marginプロパティ)とパディング領域(paddingプロパティ)の値を0(px)にしておく方が何かと便利なので指定しています。

例)

*{
	margin: 0;
	padding :0;
}

セレクタに、"すべての要素"を表すアスタリスク(*)を指定し、marginプロパティpaddingプロパティの値に0(px)を指定します。


ドキュメント全体のスタイル

body要素にドキュメント全体のスタイルを指定します。

例)

body{
	width: 896px;
	height: auto;
	font-size: 100%;
	color: #474747;
	background-color: #ffffff;
}
widthプロパティheightプロパティ
ドキュメント全体の横幅(width)と高さ(height)を指定します。
font-sizeプロパティ
ドキュメント全体のフォントサイズを指定します。関連:font関連プロパティ
colorプロパティ
ドキュメント全体の文字色を指定します。
background-colorプロパティ
ドキュメント全体の背景色を指定します。関連:背景・背景画像関連プロパティカラーコード / カラーネーム

そのほか、ドキュメント全体のマージン領域を指定するmarginプロパティや、プロパティ領域を指定するpaddingプロパティを指定することもあります。

ドキュメント全体のハイパーリンクの状態のスタイル

ハイパーリンクの状態に応じたスタイルを、Webサイトで統一するために、a要素と:link、:visited、:hover、:activeの疑似クラスで、スタイルを指定します。

例)colorプロパティで文字色をそれぞれ指定しています。

a:link{
	color: #1155cc;
}
a:visited{
	color: #7aa1ed;
}
a:hover{
	color: #ffd500;
}
a:active{
	color: #1155cc;
}
:link
未訪問のハイパーリンクのスタイルを指定します。
:visited
訪問済みのハイパーリンクのスタイルを指定します。
:hover
要素がマークアップするコンテンツにマウスカーソルを合わせたときのスタイルを指定します。
:active
要素がマークアップするコンテンツをクリックしているときのスタイルを指定します。

Note:

複数のドキュメントで共有できた方が何かと便利なので、ドキュメント外のスタイルシート(外部スタイルシート)ファイルとして上記のソースコードを使用します。


補足

スタイルシートは、セレクタに続き、波括弧({ })で、プロパティと値を記述します。プロパティと値は、コロン(:)で区切り、値の後ろには、セミコロン(;)を記述し、スタイルの区切りとします。

セレクタ{プロパティ: 値;}

スタイルシートファイルでは、上記をファイルの一行目から記述します。


関連:セレクタの記述パターン


スタイルシートファイルは、半角英数文字の任意のファイル名をつけ、拡張子を"css"として、HTMLドキュメントと同じフォルダに保存します。

例)
style_index.css
style_contents.css


スタイルシートファイルは、HTMLドキュメントの基本的な構造で掲載しているソースコードの<link rel="stylesheet" href="example.css">の赤文字の箇所に"ファイル名.css"を入れて、スタイルを適用するHTMLドキュメントのhead要素に記述します。

head要素)

<link rel="stylesheet" href="ファイル名.css">

link要素head要素


補足

  1. 値のうしろのセミコロン(;)は、ひとつのセレクタに、複数のスタイル(プロパティ: 値)を指定する場合の区切りなので、スタイルがひとつの場合は記述しなくても良いのですが、必要なときの記述忘れを防ぐため、スタイルがひとつであっても、私は記述するようにしています。
  2. 値の前に半角の空白文字が挿入されていますが、これは、コロン(:)の前後には可読性を良くするために半角の空白文字を挿入しても良いことになっているので、このように記述する事が一般的のようです。
  3. ソースコードのエディタ上での改行やタブはスタイル付けには影響しないので、上手に使ってソースコードが見やすくなるよう、個人で作成する場合は自分ルールを決めて良いと思います。