CSSの基礎/CSS講座

CSS

CSSの書き方をすぐにでも知りたいところでしょうが、その前に勉強してほしいことがいくつかあります。まずCSSの基本的なお約束に目を通してください。

CSSの適用

HTML4.01Strictでは、3種類のCSS記述が可能です。

  1. 外部CSSファイルの参照
  2. style要素の利用
  3. style属性の利用

外部CSSファイルの利用

お勧めの方法です。

外部CSSファイルの作成

外部CSSファイルはテキストファイルですからNotepadやemacsなどを用いて直接編集できます。ただし拡張子を.cssとすることをお忘れなく。

CSSは基本的に以下の書式で記述します

セレクタ {プロパティ:値; プロパティ:値; ……} /* コメント */

link要素による参照

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>HTML文書タイトル</title>
<link rel="stylesheet" type="text/css" href="***.css" charset="Shift_JIS" media="screen,tv" title="CSSタイトル">
</head>
<body>

</body>
</html>

link要素による外部CSSファイルの参照をもう少し詳しく見ていきましょう。

rel属性とtitle属性
CSSファイルの種類と名前を記述します。rel属性は必須、title属性にも意味です。
固定スタイルシート(rel属性:stylesheet/title属性:なし
ユーザの選択に関わらず、常に適用される
代替スタイルシート(rel属性:alternate stylesheet/title属性:あり
ユーザが選択したときだけ適用される
推奨スタイルシート(rel属性:stylesheet/title属性:あり
代替スタイルシートのうちデフォルトで適用されるもの
世の中に様々なUAがあることを考えると、固定スタイルシートの指定には慎重になるべきです。したがって特別な意図がない限り、推奨スタイルシートおよび代替スタイルシートの使用をお勧めします。
type属性
必須です。値をtext/cssと指定します。HTML文書にはCSS以外のスタイルシートも適用できます。したがって、スタイルシートの種類がCSSであることを明記する必要があるのです。
href属性
必須です。外部CSSファイルのURIを指定します。相対指定、絶対指定、いずれも可能です。
charset属性
文字コードを指定します。外部CSSファイルがASCII文字(英数字など)のみからなる場合、省略しても問題は生じません。
media属性
UAの種類に合わせてCSSを適用したい場合に指定します。省略した場合には、UAの種類によらずCSSが適用されます。音声出力とプリンタに共通する表現方法の指定を行う外部CSSファイルを書くことはほとんどありえないでしょう。事実上、必須の属性といえます。
all
すべてのメディア
aural
音声による出力
braille
点字ディスプレイ
embossed
点字プリンタ
handheld
携帯端末
print
プリンタ
projection
プロジェクタ
screen
一般のパソコンのディスプレイ
tty
文字幅が固定の機器
tv
テレビ

外部CSSファイルの利点

  1. HTML文書とCSSが完全に分離しているため、文書構造の変化を伴なわないリニューアルならばCSSファイルの書き換えのみで完了する。サイトの規模にもよるが、リニューアルの手間が激減することは確実。
  2. 単一の(またはせいぜいいくつかの)CSSファイルでサイト全体の表現方法を管理でき、無理なくサイト全体に統一感を出すことができる。
  3. いったん外部CSSファイルが完成した後は表現方法について悩む必要がないため、HTML文書の作成時にサイトの内容充実に注力できる。

style要素の利用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>HTML文書タイトル</title>
<style type="text/css">
<!-- セレクタ {プロパティ:値;} /* コメント */ -->
</style>

</head>
<body>

</body>
</html>

style要素
CSSの記述はstyle要素の内容として記述します。style要素はhead要素内に記述します。XHTML1.0Basicでは廃止されています。
type属性
必須です。値をtext/cssと指定します。HTML文書にはCSS以外のスタイルシートも適用できます。したがって、スタイルシートの種類がCSSであることを明記する必要があるのです。
<!-- コメント化 -->
style要素の内容はコメント化するのがふつうです。ただしこれはstyle要素の内容を画面にそのまま表示するバカなブラウザへの対応に過ぎず、本質的な意味は何もありません。

どんな場合に使うか

style属性の利用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css;">
<title>HTML文書タイトル</title>
</head>
<body>
<任意のタグstyle="プロパティ:値; プロパティ:値; ……">***</任意のタグ>
</body>
</html>

meta要素
HTML文書にはCSS以外のスタイルシートも適用できます。したがって、スタイルシートの種類がCSSであることをmeta要素を使って明記する必要です。head要素内に記述します。
style属性
XHTML1.0Basicでは廃止、XHTML1.1では非推奨となっています。なるべく外部CSSファイルを使いましょう。

セレクタ

セレクタは、要素名、クラス名、ID名などで、アルファベットで始まり、アルファベット、数字、ハイフンのみで構成された名前を指定します。

要素名

セレクタに要素名を指定します。*が指定された時は、全要素に適用されます。

* {line-height:1.4em;}
body {background:url(xxx. gif);}

class属性値

セレクタに.をつけてclass属性値で指定します。

.dog {color:red; text-align:center;} /* class属性値がdogのあらゆる要素に適用 */
h2.dog {color:red; text-align:center;} /* class属性値がdogのh2要素のみに適用 */

id属性値

セレクタに#をつけてid属性値で指定します。

#dog {color:red; text-align:center;} /* id属性値がdogのあらゆる要素に適用 */
h2#dog {color:red; text-align:center;} /* id属性値がdogのh2要素のみに適用 */

属性値

セレクタに要素名[属性名]、要素名[属性名="属性値"]、要素名[属性名~="属性値"]、要素名[属性名|="属性値"]を指定して適用できます。

h1[title] {color:blue;}
span[class="example"] {color:blue;} /* 指定属性値を使用している該当要素へ適用 */
a[rel~="copyright"]{color:blue;}
*[lang|="en"] {color:red } /* lang属性に「en」で始まる値を持つ要素……すなわち「en」「en-US」「en-cockney」などにマッチする*/

疑似クラス

よく使われるのがリンクの装飾としての:link,:visited,:hover,:activeでしょうか。なお、同じ要素に左記の擬似クラスを指定する場合、左記の順番を守るようにしましょう。一般→特殊の順が基本です。スタイルの継承を参照のこと。

:link
そのリンク要素がまだ未訪問
:visited
そのリンク要素は既に訪問済み
:hover
その要素にカーソルが乗っているがactiveではない状態
:active
その要素がactiveな状態
:focus
その要素が選択された状態
:first-child
その要素の最初の子要素
:lang(言語コード)
その要素内の指定された言語コード(日本語はja/英語はen)に設定されている要素

疑似要素

疑似要素とは、文書中に規則性を持つもので、あえてマークアップしなくてもよく、自動処理が望ましいもの……なんですが、CSSで便利に使えることが少なくありません。

:first-line
ブロックレベル要素の一行目にスタイルを適用します。
:first-letter
ブロックレベル要素の先頭一文字にスタイルを適用します。
:before
contentプロパティと共に用い、要素の直前に追加される内容にスタイルを適用します。
:after
contentプロパティと共に用い、要素の直後に追加される内容にスタイルを適用します。

子孫セレクタ

セレクタをスペースで区切って2つ並べると子孫セレクタになります。これは、左側の要素内にある右側の要素すべてにスタイルが適用されます。

h1 em {font-weight:bold;}

子供セレクタ

セレクタを>で区切って2つ並べると子供セレクタになります。
これは、左側の要素内にある右側の子要素にスタイルが適用されます。

body>p {text-align:center;}

隣接セレクタ

セレクタを+で区切って2つ並べると隣接セレクタになります。
これは、左側の要素と右側の要素が同じ親を持ち、左側の要素の直後の右側の要素に適用されます。

h1+h2 {color:red;}

複数セレクタ

セレクタを,で区切って2つ以上並べると複数セレクタになります。
これは、複数のセレクタに対して一度に同じスタイルを設定できます。

h1,h2 {color:red;}

スタイルの継承

CSSの適用方法は多岐にわたるため、「あるセレクタが、同じプロパティについて、異なる値を指定される」場合があります。このときCSSは以下のルールに従って適用されます。

inherit

親要素に指定されたプロパティは、基本的に子要素に継承されます。もし継承されない場合は、「inherit」プロパティを指定することにより、強制的に値を継承させることができます。

important

本稿で解説してきたのは、html文書の製作者によるCSSの適用方法です。じつはこの他にブラウザのデフォルトスタイルシートとユーザが指定するユーザスタイルシートがあり、製作者のCSSと競合します。ちなみにWinIE(Ver.5以上)では、ツール→インターネットオプション→ユーザ補助の手順でユーザスタイルシートを指定できます。

競合するスタイルシート適用の優先順位は以下のようになります。

  1. 製作者スタイルシート
  2. ユーザスタイルシート
  3. デフォルトタイルシート

ユーザスタイルシートを指定したとしても、製作者スタイルシートが優先されます。そこでimportantというキーワードが用意されています。製作者スタイルシートでimportant指定しても、ユーザスタイルシートのimportant指定の方が優先され、逆転現象が生じます。

h1 {color:red !important;}

id,class属性値の命名

ときどきclass="red"などとされる方がいらっしゃいますが、であること自体に意味がある場合以外は避けるべき記述です。デザインの都合で赤という表現方法を選択している場合、リニューアル後には色が変わるかもしれませんよね。リニューアルのたびにclass属性などの値を変更するの無駄な手間です。結果としてのデザインに左右されない、理由による命名をこころがけましょう。

例えば、情熱を表現するために赤による表現をするならば、class="passion"などと命名すればよいでしょう。

id属性値

id属性値はHTML文書内でユニークな存在でなくてはなりません。つまり、同じid属性値を持った要素が、同一文書中に複数存在してはいけないのです。一見、不便なようですが、このルールのためにid属性値はリンクアンカーの役割を果たします。つまりid属性値の設定された要素には直接リンクできるわけです。本文書では主にページ内移動のためにid属性を利用しています。