CSSメモ

私のサイト(http://ponk.jp)で使っているCSSを例に取り、解説します。

/* 全体 */
body {
    margin: 0;
    padding: 2em;
    background-color: rgb(255, 255, 245);
    color: rgb(100, 100, 100);
    line-height: 140%;
    font-size: 95%;

    border-color : rgb(110, 140, 130);
    border-width : 2em;
    border-style : solid;

    scrollbar-track-color:rgb(255, 255, 245);
    scrollbar-face-color:rgb(255, 255, 245);
    scrollbar-arrow-color:rgb(120, 120, 120);
    scrollbar-3dlight-color:rgb(255, 255, 245);
    scrollbar-darkshadow-color:rgb(255, 255, 245);
    scrollbar-highlight-color:rgb(120, 120, 120);
    scrollbar-shadow-color:rgb(120, 120, 120);
}

/* リンク */
a:link,a:visited {
    color: rgb(60, 40, 40);
}
a:hover {
    background-color: rgb(235, 235, 225);
}

/* 大見出し */
h1 {
    padding: 0;
    margin: 0;
    font-size: 120%;
    color: rgb(110, 140, 130);
    border-bottom : solid rgb(110, 140, 130) 2px;
}

/* 中見出し */
h2 {
    font-size: 110%;
    padding: 0 0 0 0.3em;
    margin: 1em 0 0 0;
    color: rgb(255, 255, 245);
    background-color: rgb(110, 140, 130);
}

/* 小見出し */
h3 {
    font-size: 100%;
    padding: 0;
    margin: 1em 0 0 0;
    color: rgb(110, 140, 130);
    border-bottom : solid rgb(110, 140, 130) 2px;
}

/* リスト */
ul {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

/* キーワード */
span.keyword {
    border-bottom: dotted rgb(110, 140, 130) 1px;
    cursor:help;
}

/* 引用 */
div.quote {
    color: rgb(60, 80, 120);
    font-family: "ＭＳゴシック", "Osaka－等幅";
    font-size: 100%;
    background-color: white;
    border: solid rgb(110, 140, 130) 1px;
    padding: 0.7em;
    margin: 1em;
}

/* 半行空け */
p.half {
    margin: 0.5em 0 0 0;
}

CSSの説明

全体のスタイル

/* ～ */ まではコメントです。スタイルがどこに適用されるかをコメントで説明しておくと良いでしょう。コメントの途中に改行を入れても構いません。

body {
    margin: 0;
    padding: 2em;
    background-color: rgb(255, 255, 245);
    color: rgb(100, 100, 100);
    line-height: 140%;
    font-size: 95%;

body要素に対してスタイルを適用することによって、ページ全体のスタイルを設定しています。
paddingは余白のことです。ここでは2em、つまり２文字分だけページの前後左右に余白を空けています。余白を多く取ることによってページをすっきりと見やすくすることができますが、その分情報量が減るので適切な量を指定することが大切です。
background-colorは背景色です。body要素に設定しているのでページ全体の背景色になります。
colorは文字色です。これも同じくページ全体の文字色になります。
line-heightは行間です。140%とは1.4文字分空けるということです。
font-sizeはフォントの大きさです。デフォルトの大きさの95%にしています。

    border-color : rgb(110, 140, 130);
    border-width : 2em;
    border-style : solid;

サイト全体を太い枠で囲みたかったので、それを実現している部分です。
border-colorは枠線の色です。ここではトーンを落とした緑色を指定しています。この色がサイトのイメージカラーとなっています。
border-widthは枠線の幅です。余白と同じ２文字分を指定しています。
border-styleは枠線のスタイルです。solid（実線）を指定しています。

    scrollbar-track-color:rgb(255, 255, 245);
    scrollbar-face-color:rgb(255, 255, 245);
    scrollbar-arrow-color:rgb(120, 120, 120);
    scrollbar-3dlight-color:rgb(255, 255, 245);
    scrollbar-darkshadow-color:rgb(255, 255, 245);
    scrollbar-highlight-color:rgb(120, 120, 120);
    scrollbar-shadow-color:rgb(120, 120, 120);

スクロールバーのスタイルを指定している部分です。サイトのイメージカラーに合わせてあります。
※このCSSはIEの独自拡張です。

リンクのスタイル

a:link,a:visited {
color: rgb(60, 40, 40);
}

a:link,a:visited両方の擬似クラスに対して同じスタイルを適用しています。a:linkはリンクに対するスタイル、a:visitedは訪問済みリンクに対するスタイルです。本当は両方の区別を付けるために違うスタイルを指定した方が良いのですが、面倒なので同じにしています。ここでは文字の色をrgb(60, 40, 40)（暗めの微妙な赤色）にしています。rgbで色を指定する場合は、

rgb(赤の強さ(0～255), 緑の強さ(0～255), 青の強さ(0～255));

a:hover {
background-color: rgb(235, 235, 225);
}

a:hoverはリンクにカーソルが乗ったときのスタイルを指定します。上記の場合、背景を微妙に暗い色にしてリンクに乗っていることをはっきりを分かるようにしています。

見出しのスタイル

h1 {
    padding: 0;
    margin: 0;
    font-size: 120%;
    color: rgb(110, 140, 130);
    border-bottom : solid rgb(110, 140, 130) 2px;
}

ページのトップなどに表示される大見出しのスタイルを設定しています。
フォントの大きさ(font-size)を120%にして少し大きい文字にしています。
大見出しに引かれるアンダーラインは、枠線の太さを2px、つまり2ピクセルにし、枠線を下だけに表示して実現しています。

その他のスタイル

ul {
margin-top: 0.2em;
margin-bottom: 0.2em;
}

HTMLのリスト(ul)に対してスタイルを適用しています。通常の<ul>タグは上下のマージンが空きすぎるので少し狭くしています。

span.keyword {
border-bottom: dotted rgb(110, 140, 130) 1px;
cursor:help;
}

キーワードに対して適用している設定です。spanタグのclass属性をkeywordにしたものにだけ適用されます。

<span class="keyword">キーワード</span>

このようにして指定します。
キーワードはアンダーラインを点線(dotted)で引いています。
cursorはカーソルが乗ったときのカーソルの形を指定します。ここではクエスチョンマークの付いたカーソル(help)を設定しています。

div.quote {
    color: rgb(60, 80, 120);
    font-family: "ＭＳゴシック", "Osaka－等幅";
    font-size: 100%;
    background-color: white;
    border: solid rgb(110, 140, 130) 1px;
    padding: 0.7em;
    margin: 1em;
}

ソースなどの引用を表わす部分です。以下のように書いて指定します。

font-familyでフォントの種類を指定します。ここは引用なので、ソースが見やすくなるようなフォントを指定しています。まずＭＳゴシックを探し、見つからなければOsaka等幅フォントを探しに行きます。
背景色を変えたり枠線を引くことによって、テーブルのような表現をしています。

p.half {
margin: 0.5em 0 0 0;
}