CSSはどう書くのかを紹介しています。 ここに書いていない事（特殊なこと）をしたい場合はJavaScriptやFLASHを使ったり、他のサイトを調べたりしてみてください。 （方法があるにはあるけど、そこまでして何になるのかという記述方はいくつもあります。）
CSSを学習するときに必要な知識をまとめておきます。
| 子要素 | 他の要素に含まれている要素のことです。P要素などのほとんどの要素はBODY要素の子要素です。 |
|---|---|
| 親要素 | 子要素を含む側の要素のことです。子要素に文字色などの設定を引き継がせることがあります。 |
| 継承 | CSSの性質の一つで、親要素での設定が子要素にも影響するというものです。影響するのは主にテキストに関する設定だけで、ボックスに関するものは継承されません。 |
| ブロックレベル要素 | 改行を伴う要素のことです。設定が無ければ1行に1つだけです。 P、H1、TABLE、DIVなどの要素がそうです。 |
| インライン要素 | 改行を伴わない要素のことです。1行に複数個存在できます。 A、EM、IMG、SPANなどの要素がそうです。 |
| ボックス | 要素に対する考え方で、要素を1つの長方形として考える時の言葉です。 枠線や他の要素との間隔などを考慮します。 |
| プロパティ | CSSにおいての要素の設定項目です。要素名 { プロパティ : 値 ; }と書き、要素の細かい設定をします。 セミコロン（;）で区切って複数設定できます。 |
| 値 | プロパティに設定するもので、プロパティによって違うものが指定できます。 数字の場合と文字の場合があり、何を書くべきかはプロパティによって決まっています。 半角スペースで区切って複数指定できる場合もあります。 |
| セレクタ | CSSの設定方法の一つで、要素名で一括りに設定したくないときに使います。クラスセレクタ、IDセレクタ、文脈セレクタがあります。 |
要素のデザイン（見た目）を変えるには要素名 { プロパティ : 値 ; }という風に一つ一つ設定していきます。 一つの大括弧（{ }）内には複数のプロパティを設定できます（コロンやセミコロン（:や;）を忘れずに）。 指定する順序に特に決まりはありません。同じ要素を複数回指定すると毎回設定が上書きされます。
そんなことはともかく、まずはHTMLが無ければ話になりません。下の例を使って説明します。 まずはCSSを読み込むために強調部分を追加します。
上の「default.css」の部分はCSSのファイル名を書きます。自由に変えてください。 A要素やIMG要素の時と同じで、そのHTMLから見たCSSの場所を書きます。
下にCSSの例を示します。
H1{
color : blue;
font-size : 20pt;
text-align : center; /* 中央寄せ */
}
H2{
color : green;
font-size : 12pt;
font-style : italic; /* イタリック文字 */
}
p{
color : gray;
font-size :12pt;
border : 2pt solid yellow; /* 枠線（黄色） */
}
これを拡張子を「.css」にして保存し、HTMLで指定した場所（今回は同じフォルダ）に入れておきます。 すると、HTMLを開いたときに見た目が変わるはずです。
「見出し」とは文章の表題のことです。
「段落」は本文を大まかに区切った一纏まりの文章です。
CSSにおいても改行・半角スペース・タブは無視されます。また「/*」から「*/」までの間はコメントになり、設定に影響ありません。 作るときや修正するときに見やすくなるように利用しましょう。
普通は全てのページに同じCSSファイルを適用させますが、CSSファイルが複数になる時もあります。 さて、「このページだけこのスタイルを使いたい」もしくは「この部分だけスタイルを変えたい」という場合はどうするのかを書いておきます。 強調部分を追加するだけです。
P{
font-size :14pt;
border : 2pt solid aqua; /* 枠線（水色） */
}「見出し」とは文章の表題のことです。
「段落」は本文を大まかに区切った一纏まりの文章です。
読み込んだ「default.css」の内容に加えて、STYLE要素、style属性の中の設定が反映されます。 このようにCSSの設定は上書きしていくことが可能です。（これはCSSの中でも起こります。） STYLE要素内をコメントにしてしまうのは、STYLE要素に対応していないブラウザへの配慮です。（こうしないと中身が表示されてしまうことがある） ただし、この手法を多用するとCSSの本来の意味が薄れてしまいます。できるだけ1つのCSSに統一しましょう。
次に、指定する要素の選択方法について解説します。
クラスセレクタとIDセレクタにおいては、要素名を省略すると、class属性（またはID属性）が同じなら全ての要素に反映されます。 class属性（またはID属性）の名前は自由です。
ただのP要素
P要素（.naka）
DIV要素の中のP要素
CSSを使うときに便利な要素がこの2つです。
| <DIV> | 指定した範囲をブロックレベル要素で囲みます。 |
|---|---|
| <SPAN> | 指定した範囲をインライン要素で囲みます。 中にブロックレベル要素を含めていてもインライン要素として機能します。 |
プロパティの値には共通のものが複数あり、そういったものほど複雑になっています。
| 長さ | 半角数字＋単位で指定します。小数や負の値はサポートしていない場合が多いです。単位には以下のものがあります。
|
|---|---|
| 色 | 大きく3通りの方法があります。下の例は全て「赤色」です。
|
| URL | url(アドレス)の「アドレス」の部分に絶対指定または相対指定で記述します。 相対指定の場合は、CSSを基準とした位置となります。urlの代わりに「none」とだけ書くと、何も参照しません。 |
必ずサポートされるカラーネームは16色です。 （aqua：水色■、 black：黒■、 blue：青■、 fuchsia：桃色■、 gray：灰色■、 green：緑■、 lime：明るい緑■、 maroon：茶色■、 navy：藍色■、 olive：黄土色■、 purple：紫■、 red：赤■、 silver：明るい灰色■、 teal：青緑色■、 white：白■、 yellow：黄色■） 他にもありますが、ブラウザによっては無色になる可能性があるので注意しましょう。
これらはブロックの背景に関する設定のためのプロパティです。 一般的にはBODY要素に指定しますが、その他の要素にも設定できます。 インライン要素に背景を設定した場合は行間が空いてしまうブラウザもあるのでご注意ください。
| background | 「background-」が付くプロパティを一括で設定できます。 |
|---|---|
| background-color | 背景色を決めます。背景画像が無い部分（もしくは透明色の部分）はこの色になります。 |
| background-image | 背景画像を決めます。URLを指定します。 |
| background-attachment | 背景画像のスクロールを決めます。 「scroll」ならスクロールし、「fixed」ならスクロールしません。 |
| background-position | 背景画像の位置を決めます。「0% 50%」（左から0%、下から50%の位置）のように数値や割合で指定する他に 「top」「right」「left」「bottom」「center」が指定でき、 それぞれ上・右・左・下・中央に表示でき、値は２つ同時に指定できます。 |
| background-repeat | 背景画像の繰り返しを決めます。初期値は「repeat」で、 「repeat-x」なら横方向のみ、「repeat-y」なら縦方向のみ、「no-repeat」なら繰り返し無し（単体）です。 |
BODY {
background-color : rgb(235,255,235);
background-image : url("backg.gif");
background-attachment : fixed;
background-position : top right;
background-repeat : repeat-y;
}
DIV.sam_tx{ /* 記述例のボックス */
background-color : rgb(235,235,255);
}
文字の色・大きさ・スタイルを変えるプロパティです。必ずと言って良いほど継承しますが例外もあります。
| color | 文字色を決めます。 |
|---|---|
| font | 「font-」が付くプロパティを一括で設定できます。 |
| font-size | 文字サイズを決めます。 |
| font-weight | 文字の太さを決めます。数字と文字のどちらかで設定でき、 「normal」 = 400、「bold」 = 700です。細かい差は滅多に出ません。100刻みで変えてみましょう。 |
| font-family | 書体を決めます。「,」で区切って複数書くと左から順に候補を並べられます。
これはそのフォントが存在しないブラウザへの配慮です。
書体名にスペースがある場合は"ＭＳ ゴシック"のように囲いましょう。普通は下の５つを使います。
|
| font-style | 文字スタイルを決めます。「normal」で標準の文字、「italic」でイタリック体の文字、「oblique」で斜体文字となります。 |
BODY{
font-size: 12pt;
color: rgb(0,30,0);
}
EM{ /* 強調 */
color : maroon;
font-size : 1.1em;
font-weight : bold;
font-style : normal;
}
語句ではなく文章や段落の単位でスタイルを変えるものをまとめています。 これらのプロパティも継承が起こります。
| text-align | テキストの横位置を指定します。 ブロックレベル要素にのみ指定可能で、「left」「right」「center」でそれぞれ左・右・中央に寄せられます。 |
|---|---|
| vertical-align | テキストの縦位置を指定します。インライン要素にのみ指定可能で、 行の基準からどれだけ上に寄せるかを数値で指定します。マイナスの値も指定できます。 |
| line-height | 行の高さを指定します。文字の高さと行間の大きさの合計になります。 emの単位で指定した場合、途中で文字サイズが変わっても行間は変わらないので注意して下さい。 |
| letter-spacing | 文字の間隔の大きさを指定します。 |
| text-indent | 一行目（段落の開始点）の字下げの大きさを指定します。 |
| text-decoration | テキストの装飾を指定します。「none」で指定なし、「underline」で下線、 「overline」で上線、「line-through」で打ち消し線を付けます。「blink」で点滅なんてものもありますが一般的ではありません。 |
P{
text-align : left;
line-height : 1.5em;
text-indent : 20pt;
}
SPAN.shita{
letter-spacing : 5pt;
vertical-align : -5pt;
text-decoration : underline;
}
テキストインデントは行頭のみで、
改行後は反映されません。
要素の形は長方形です。その長方形の大きさや並びなどを変えるプロパティを紹介します。
| width | 要素の横の長さを指定します。割合指定の場合は親要素に対する割合になります。 ブロックレベル要素の場合、初期値は親要素と同じ値（100%）になります。 |
|---|---|
| height | 要素の縦の長さを指定します。画像などに指定するのが効果的です。 |
| float | 要素の回り込みを指定します。「left」「right」が指定でき、 それぞれ左、右にその要素を表示し、後に続く要素やテキストは反対側に流れるように表示されます。 |
| clear | floatでの回り込みの解除を指定します。「left」「right」「both」が指定でき、 それぞれ左、右、両側の回りこみを終了させます。leftやrightの場合、表示位置は言葉と逆なので注意しましょう。 |
TABLE要素だけでなく、あらゆる要素にborder＝「枠線」を付けることが出来ます。
| border | 「border-」が付くプロパティを一括で設定できます。ただし、上下左右一括での指定のみです。 |
|---|---|
| border-top | 「border-top-」が付くプロパティを一括で設定できます。上側です。 topを「bottom」「left」「right」と変えればそれぞれ下、左、右を設定できます。 |
| border-top-width | 上の枠線の太さを指定します。 「-top」と「-width」を書き換えたり省略した別のプロパティも使えます。 （border-left-colorなど） |
| border-width | 枠線の太さを指定します。数値以外にも「thin」で細く、 「medium」で普通に、「thick」で太くといった値が設定できます。 |
| border-style | 枠線のスタイルを設定します。初期値が「none」なので、色だけ設定してもダメです。
|
| border-color | 枠線の色を設定します。特殊なスタイルを指定していると色が変わる場合があります。 |
| 指定 | 上↑ | 右→ | 下↓ | 左← | 備考 |
|---|---|---|---|---|---|
| Ａ | Ａ | Ａ | Ａ | Ａ | 全て同じになる |
| Ａ Ｂ | Ａ | Ｂ | Ａ | Ｂ | 上下、左右と設定 |
| Ａ Ｂ Ｃ | Ａ | Ｂ | Ｃ | Ｂ | 上、左右、下と設定 |
| Ａ Ｂ Ｃ Ｄ | Ａ | Ｂ | Ｃ | Ｄ | 上から時計回りに設定 |
DIV.sam_tx{ /* 記述例のボックス */
border : 1pt solid blue;
}
H3{ /* 小見出し */
border-left : 8pt solid rgb(180,180,240);
}
マージンとはボーダーの外側の空白のことです。 つまり、要素の枠線を他の要素からどれだけ離すかということです。 文字が密集して読みづらくなる事は回避したいものです。
| margin | 「margin-」が付くプロパティを一括で設定できます。 大きさしか無いので「border-width」と同じように使いましょう。 |
|---|---|
| margin-top | 上ボーダーの外側の空白の大きさを指定します。 「top」を「bottom」「left」「right」に変えても意味どおりに使えます。 |
P要素やH1要素の改行後の空白は、このマージンを指定することで無くしたり広げたりできます。
DIV.sam_tx{ /* 記述例のボックス */
margin : 2pt 25pt 8pt 25pt;
}
H4{ /* ボックス内見出し */
margin : 0pt;
}
パディングとはボーダーの内側の空白のことです。 つまり、要素の枠線を中身からどれだけ離すかということです。 文字と枠線が接触して読みづらくなる事は回避したいものです。
| padding | 「padding-」が付くプロパティを一括で設定できます。 |
|---|---|
| padding-top | 上ボーダーの内側の空白の大きさを指定します。 「top」を「bottom」「left」「right」に変えても意味どおりに使えます。 |
DIV.sam_tx{ /* 記述例のボックス */
padding: 5pt;
}
実はBODY要素もボックスとして考えられています（ブラウザによって）。 つまりボーダーやマージンを指定することが出来るのですが、 どこからどこまでがBODY要素だと言えば良いのか、分かりますか？
実は、その解釈はブラウザの種類やHTMLのバージョンによって異なっているのです。 それを確かめるにはボーダーを指定してみれば一目瞭然です。 InternetExplorer（以下IE）ではウィンドウ枠線のすぐ隣からスクロールバーの外側まで及びますが、 MozillaFirefox（以下FF）ではそれよりももっと内側にボーダーが表示されます。
また、奇妙なことにIEではBODY要素のマージンに限ってボーダーの内側に現れます。 FFではパディングをゼロに指定しても、僅かに空白が残ったままになります。
これを聞いて混乱してきた方は正しいです。BODY要素にボーダーを指定するのはやめておきましょう。
A要素にhref属性を指定している場合、ブラウザは色や下線などのスタイルを自動で付け加えてくれます。 そのスタイルをどうしても自分で変えたい場合は擬似クラスという手法を使います。 これらは普通のプロパティと同じように使うことが出来ます。
| A:link | 未訪問アンカーのスタイルを指定します。履歴を消すと全てこのアンカーになります。 |
|---|---|
| A:visited | 訪問済みアンカーのスタイルを指定します。訪問済みかどうかの判断は表示時の一度のみです。 |
| A:active | 選択中のアンカーのスタイルを指定します。Tabキーなどで選択した場合のアンカーです。 |
| A:hover | マウス通過中のアンカーのスタイルを指定します。 |
A:link { /*未訪問*/
color : blue;
text-decoration: underline;
}
A:visited { /*訪問済み*/
color : purple;
text-decoration: underline;
}
A:active { /*選択中*/
color : red;
text-decoration: none;
}
A:hover { /*通過中*/
color : red;
background-color: rgb(220,220,240);
text-decoration: underline;
}
プロパティの設定は原則として親要素から子要素に継承されます。 しかし、TABLE要素だけは例外となっています。 BODY要素に「font-size」や「color」を指定しても、TABLE要素の内側は何も変わりません。
テーブル内のテキストのスタイルを設定したい場合は、TD要素に指定する必要があります（TH要素も同様）。 TD要素の中にある別の要素は正常に表示されます。
TD, TH {
font-size : 12pt;
color : rgb(0,20,0);
}