CSSリファレンス(CSS入門)

CSSとは？
CSSの例
CSSの指定方法
タグと要素とセレクタ
継承
セレクタ
CSSネスティング
コメント
優先度の順位(詳細度)
長さの単位
CSSのメリット
- 見栄えを一度に指定できる
- 見栄えと意味を分離できる

CSSとは？

CSS は Cascading Style Sheets の略です。CSSは、HTMLで記述された Webページの見栄え・スタイルを効率的に定義するための技術です。HTMLで文書の意味を定義し、CSSで見栄えを定義することにより、意味と見栄えを分離することが可能となります。

CSSの例

最も基本的なCSSの使用例を下記に示します。この例では、<h1>～</h1> で囲まれたタイトル部が赤字で表示されます。「h1 { color: red; }」は、「h1 の部分の色(color)を赤(red)にする」という意味を持ちます。この例の「色」のような見栄えなどの情報を「スタイル」と呼びます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSSのテスト</title>
    <style>
    h1 { color: red; }
    </style>
  </head>
  <body>
    <h1>CSSとは</h1>
    <p>CSSはCascading Style Sheetsの略で・・・</p>
  </body>
</html>

CSSの指定方法

CSSの指定方法には下記のようなものがあります。

style属性で指定する方法

h1 や div や span や p など、大半のタグに style属性を用いて指定することができます。下記の例では、<h1>～</h1> で囲まれた「CSSとは」の文字が赤字で表示されます。

HTML

<h1 style="color:red;">CSSとは</h1>

セミコロン( ; )で区切って、複数のスタイルを指定することも可能です。最後のスタイルのセミコロン( ; )は省略可能です。

HTML

<h1 style="color:red; font-size: 24pt;">CSSとは</h1>

<style>～</style>で指定する方法

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSSのテスト</title>
    <style>
    h1 { color: red; }
    </style>
  </head>
  <body>
    <h1>CSSとは</h1>
    <p>CSSはCascading Style Sheetsの略で・・・</p>
  </body>
</html>

<link>を用いた外部CSSファイルで指定する方法

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>CSSのテスト</title>
  </head>
  <body>
    <h1>CSSとは</h1>
    <p>CSSはCascading Style Sheetsの略で・・・</p>
  </body>
</html>

外部CSSファイル(style.css)には、次のように記述しておきます。ファイル名は何でもよいですが、拡張子は通常 .css とします。

CSS

h1 { color: red; }

@importを用いた外部CSSファイルで指定する方法

下記の様に @import を用いて外部CSSファイルを読み込むことも可能です。

HTML

<style>
@import url(style.css);
</style>

CSS2 では下記のような記法もサポートされました。

HTML

<style>
@import "style.css";
</style>

タグと要素とセレクタ

CSS の基本動作は「○○要素の、○○というスタイルを、○○にする。」となります。例えば上記の例では、「h1要素の、色(color)スタイルを、赤(red)にする」となります。各用語の使い方を下記に示します。

<h1>～</h1> で囲まれた部分を h1要素(element)
<h1>～</h1> の～の部分を h1要素のコンテンツ(content)
<h1>～</h1> の <h1> の部分を h1要素の開始タグ(start tag)
<h1>～</h1> の </h1> の部分を h1要素の終了タグ(end tag)
h1 { color: red; } の h1 の部分をセレクタ(selector)
h1 { color: red; } の color:red; の部分を宣言(declaration)
h1 { color: red; } の color の部分を属性(property)
h1 { color: red; } の red の部分を値(value)

下の図のそれぞれの枠が要素(element)となります。html要素の中に head要素と body要素が、body要素の中に h1要素と p要素があるように、要素は親子関係を持ちます。

<html>

<head>

</head>

<body>

</body>

</html>

継承

親要素に指定されたスタイルの多くは、子要素に継承されます。例えば、h1 { color: red; } と定義されている時、親要素である h1要素の color属性は、子要素である em要素に継承され、「いいい」の部分も赤くなります。

HTML

<h1>あああ<em>いいい</em>ううう</h1>

CSS2 では、大半のスタイルで、親のスタイルを継承することを意味する inherit という値がサポートされました。通常では継承されないスタイルを継承させたり、継承することを明示的に示したい場合、に使用されます。IE8、Firefox 2.0、Opera 9 などでサポートされています。例えば下記の例では、リンクテキストを親要素と同じ色で表示します。

CSS

a { color: inherit; }

セレクタ

セレクタには、スタイルを適用する対象となる要素を指定します。要素の指定は様々な方法があります。

CSS

h1 { color: red; }			/* h1要素に対して指定 */
h1, h2 { color: red; }			/* h1 と h2要素に対して指定 */
ul li { color: red; }			/* <ul>～</ul> の中にある li要素に対して指定 */
.sample { color: red; }			/* class="sample" を持つ要素に対して指定 */
#sample { color: red; }			/* id="sample" を持つ要素に対して指定 */
h1.sample { color: red; }		/* class="sample" を持つ div要素に対して指定 */
a:link { color: red; }			/* <a href="..."> のリンク(未訪問)に対して指定 */

詳細は「セレクタ」を参照してください。

CSSネスティング

まだ未サポートのブラウザもありますが、セレクタを階層的にネスティングして記述することもできます。詳細は「CSSネスティング」を参照してください。

/* と */ の間はコメントとして無視されます。

CSS

h1 { color:red; }    /* Red Color */

コメントを入れ子にすることはできません。下記は、誤ったコメントの使用例です。

CSS

/* h1 { color:red; }    /* Red Color */    */

優先度の順位(詳細度)

ひとつの要素に相反するスタイルが指定された場合、下記の計算で求められたポイント(詳細度)の高いものが優先されます。

説明	例	ポイント
!important	!important	1/0/0/0/0点
style 属性	style="..."	1/0/0/0点
ID セレクタ	#xyz	1/0/0点
クラスセレクタ	.xyz	1/0点
属性セレクタ	[href^="http:"]	1/0点
擬似クラス	:first-child	1/0点
要素名	ul	1点
擬似要素	::before	1点

セレクタの中に複数個出現した場合は、複数カウントします。例えば、下記の様に計算されます。

CSS

* { ... }                  /* 0点 */
ul { ... }                 /* 1点 (要素×1個)*/
ul li { ... }              /* 2点 (要素×2個) */
h3::before { ... }         /* 2点 (要素＋擬似要素) */
.xyz { ... }               /* 1/0点 (クラス) */
.xyz:first-child { ... }   /* 2/0点 (クラス＋疑似クラス)
a[href^="http://"] { ... } /* 1/1点 (要素名＋擬似クラス) */
#xyz { ... }               /* 1/0/0点 (IDセレクタ) */
style="..."                /* 1/0/0/0点 (stype属性) */
#xyz { ... !important }    /* 1/0/1/0/0点 (!impotant＋IDセレクタ) */

1点を積み重ねると11点になりますが、11点は 0/11点とカウントされ、1/0点を超えることはありません。同様に 1/0点を積み重ねて 11/0点としても、1/0/0点を超えることはありません。

CSS

ul ul ul ul ul ul ul ul ul ul li { ... }   /* いくら点数を積み重ねて 11点としても */
.abc { ... }                               /* 上位のクラス 1/0点 を追い抜くことはない */

同じ優先度のスタイルが存在する場合は、CSS 定義で後から定義されたものが優先されます。例えば下記の例では、class="c2 c1" の並びではなく、.c1 と .c2 で、後から定義されたものが優先されます。

CSS

<style>
.c1 { color: red; }
.c2 { color: blue; }
</style>
<h1 class="c2 c1">青文字になります</h1>
<h1 class="c1 c2">青文字になります</h1>

CSSカスケードレイヤーでレイヤーの優先度が指定されている場合は、上記の優先度よりもレイヤーの優先度が優先されます。

長さの単位

HTML の height=100 や width=100 は単位を書きませんが、CSS では数値が 0 の時を除いて単位は必須です。長さの単位に関する詳細は <length> を参照してください。

CSSのメリット

CSSを使用することのメリットには次のようなものがあります。

見栄えを一度に指定できる

すべての H1要素に <font>～</font> を指定してまわるよりも、CSSで一度に指定した方が楽になります。外部ファイルで指定しておけば、より一層楽になります。

また、見栄えを外部ファイルに定義しておけば、それをちょっと変更するだけで見栄えを一度に変更することができます。春には春のスタイルを、秋には秋のスタイルを適用してやることもできます。この時、class=red のようなクラス名だと、.red { color:blue; } などと変更した時に妙な気分になるので、class=pastoral のような、見栄えに影響しない名前をつけておくとよいそうです。

見栄えと意味を分離できる

Webページを自動収集して情報データベースを作成したり、目の見えない人が音声ブラウザでWebページを読む場合など、見栄えがあまり重要視されないケースもあります。見栄えを別のページで記述することにより、不要な見栄え情報を読み込んでくる煩わしさを解消することができます。

初版：1997年7月27日、最終更新：2012年5月6日

https://www.tohoho-web.com/css/basic.htm