「CSS/記述」の版間の差分

削除された内容追加された内容

インライン

2011年4月18日 (月) 09:18時点における版

準備

まずスタイルシートを入力する前に、

<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">

</style>

の2つを入力します。 HTML 文書中にスタイルシートを書く場合は、通常、 head 要素の中（<head> から </head> までの間）にこれを置きます。<style> から </style> までの間に書いた内容を、ブラウザは CSS 形式のスタイルシートとして扱います。これでスタイルシートを入力する準備ができました。

基礎

style属性

最も簡単に記述するには、HTML要素に、以下のように指定します。

<p style="color:red">文字色：赤</p>

文字色：赤

ほとんどの要素に style 属性を指定できますが、既存の要素で丁度囲まれていない部分を指定したい場合は、span要素や div要素で囲んでそれに属性を指定します。

style要素

特定の HTML要素全てにスタイルを指定したい場合は、style要素でまとめて行うことができます。次の例は、全ての <p> タグに style="color:red" を指定した事になります。

<head>
：
途中略
：
<style type="text/css">
<!--
p { color:red }
-->
</style>
</head>
<body>
<p>文字色その1</p>
　：
途中略
　：
<p>文字色その2</p>
</body>

文字色その1

：

途中略

：

文字色その2

style要素に対応していないユーザーエージェントのために、style要素の中をコメントアウトすることもあります。

ここで、CSSのp { color:red }となっていますが、このうち、最初のpをセレクタ、colorを プロパティ、redを値といいます。

個別のHTML要素にスタイルを指定することもできますが、「意味と見た目の分離」、「全体でスタイルを統一する」、「再利用性を高める」などの観点から、CSSはまとめて書くことが推奨されています。

外部スタイルシート

さらに、CSSだけを別のファイルに書くこともできます。例えば、foo.cssに、

p { color:red }

とだけ書いておいて、HTML側でこのファイルを、<link>要素を使って、

<head>
：
途中略
：
<link rel="stylesheet" href="foo.css" type="text/css" />
</head>
<body>
<p>文字色その1</p>
　：
途中略
　：
<p>文字色その2</p>
</body>

のように読み込む指定をしても、

文字色その1

：

途中略

：

文字色その2

のようにスタイルが適用されます。こうすれば、サイト全体で見た目の統一をはかり、さらにそれをまとめて変更することができます。

書式

直接style属性で書く場合を除いて、CSSは以下のような書式になっています（角カッコ内は省略できるものです）。

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

さっきの例では、pがセレクタ、colorがプロパティ、redが値です。1つのセレクタについて、プロパティと値の組を複数指定することが可能で、その間はセミコロンで区切ります（C言語など違って、最後の値の後にセミコロンを必ず付ける必要はありません）。また、コンマで区切って、複数のセレクタに対して同じスタイルを適用することもできます。

/* と */ではさまれた部分はコメントとして無視されます。また、コメントや空白、改行は、単語の途中でなければどこに入れてもかまいません。

セレクタ

ここでは、どんなセレクタがあるかを紹介していきます。指定方法を工夫することで、特定の部分にだけ特定のスタイルを適用できます。

タイプセレクタ

セレクタとして要素名を書くと、文書に登場するその要素全てにスタイルを適用します。先ほどのp { color:red }でも、pがこのタイプセレクタで、文書中のp要素すべてに適用されます。

全称セレクタ

セレクタとして*を使うと、その文書中にあるすべての要素にスタイルを適用します。なお、CSSには継承というシステムがあるので、属性によってはbodyに適用するだけでいい場合もあります。

クラスセレクタ

このセレクタは.クラス名という形になっています。これは、あるクラスが指定された要素にだけスタイルを適用します。HTMLの場合、クラスはclass="クラス名"と、class属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、divやspan要素で囲んで、それらにclass属性を付けてください。

また、同じクラスの要素は文書中にいくつあってもかまいません。特定の要素に付いたクラスにだけ適用させる場合には、要素名.クラス名とすれば、両方一致するものにだけ適用されます。

<head>
：
途中略
：
<style type="text/css">
<!--
.example1 { color:blue }
em.example2 { color:red }
-->
</style>
</head>
<body>
<p class="example1">クラスのテスト</p>
　：
途中略
　：
<p>クラスのない部分。<span class="example1">ここだけクラスあり。</span>ここは元通り。
<em class="example2">emにクラスを適用。</em><span class="example2">同じクラスでも、spanには適用外。</span></p>
</body>

と入力すると、

クラスのテスト

　：
途中略
　：

クラスのない部分。ここだけクラスあり。ここは元通り。 emにクラスを適用。同じクラスでも、spanには適用外。

のような表示になります。

IDセレクタ

このセレクタは#IDという形になっています。これは、あるIDが指定された要素にだけスタイルを適用します。HTMLの場合、クラスはid="ID"と、id属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、divやspan要素で囲んで、それらにid属性を付けてください。

さっきのクラスセレクタと重複するように見えますが、最大の違いは同じ文書で重複するIDを付けてはいけないということです。そういうわけで、ふつうは#IDで足りますが、要素名#IDとしても問題はありません（別の要素がそのIDを持つ場合、スタイルは適用されません）。

子孫セレクタ

XMLやHTMLでは、<a><b><c></c></b></a>のように要素が入れ子になっていますが、これを親子関係になぞらえて、「aはbの親要素」とか、「cはaの孫要素」というようにいいます。CSSのセレクタにもこの親子関係を使えます。

「セレクタ1 セレクタ2」というように、2つのセレクタを空白で区切って書くと、「セレクタ1の子孫に当たるセレクタ2」という意味になります。セレクタ1やセレクタ2にはタイプセレクタに限らず、どんなセレクタを使ってもかまいません。「id="main"のdiv要素の中にある、class="hoge"の要素」という場合、「div#main .hoge」というように指定できます。また、「セレクタ1 セレクタ2 セレクタ3」のように、多段階で指定することも可能です。

さらに、「セレクタ1 > セレクタ2」のように、2つのセレクタの間に>を入れると、「セレクタ1の直接の子要素であるセレクタ2」という意味になって、孫要素以下には一致しなくなります。

例えば、

<head>
：
途中略
：
<style type="text/css">
<!--
.example1 span { color:blue }
#id2 > em { color:red }
-->
</style>
</head>
<body>
<p class="example1">ここは装飾なし。<span>ここは子要素。</span><em>子供は別の要素だけど、<span>孫要素には適用される。</span></em></p>
　：
途中略
　：
<p id="id2">ここは装飾なし。<em>子要素には適用される。</em><span>別の子要素。<em>孫要素には適用されない。</em></span></p>
</body>

と入力すると、

ここは装飾なし。ここは子要素。子供は別の要素だけど、孫要素には適用される。

　：
途中略
　：

ここは装飾なし。子要素には適用される。別の子要素。孫要素には適用されない。

のような表示になります。

@@ 103 行 / 103 行 @@
 <code>/*</code> と <code>*/</code>ではさまれた部分はコメントとして無視されます。また、コメントや空白、改行は、単語の途中でなければどこに入れてもかまいません。
-=== セレクタ ===
+== セレクタ ==
 ここでは、どんなセレクタがあるかを紹介していきます。指定方法を工夫することで、特定の部分にだけ特定のスタイルを適用できます。
-==== タイプセレクタ ====
+=== タイプセレクタ ===
 セレクタとして要素名を書くと、文書に登場するその要素全てにスタイルを適用します。先ほどの<code>p { color:red }</code>でも、<code>p</code>がこのタイプセレクタで、文書中の<code>p</code>要素すべてに適用されます。
-==== 全称セレクタ ====
+=== 全称セレクタ ===
 セレクタとして<code>*</code>を使うと、その文書中にあるすべての要素にスタイルを適用します。なお、CSSには[[CSS/継承|継承]]というシステムがあるので、属性によっては<code>body</code>に適用するだけでいい場合もあります。
-==== クラスセレクタ ====
+=== クラスセレクタ ===
 このセレクタは<code>.クラス名</code>という形になっています。これは、ある'''クラス'''が指定された要素にだけスタイルを適用します。HTMLの場合、クラスは<code>class="クラス名"</code>と、<code>class</code>属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、<code>div</code>や<code>span</code>要素で囲んで、それらに<code>class</code>属性を付けてください。
@@ 142 行 / 142 行 @@
 <p style="color:blue">クラスのテスト</p>
+ 　：
+ 途中略
+ 　：
+<p>クラスのない部分。<span style="color:blue">ここだけクラスあり。</span>ここは元通り。
+<em style="color:red">emにクラスを適用。</em><span>同じクラスでも、spanには適用外。</span></p>
+のような表示になります。
+=== IDセレクタ ===
+このセレクタは<code>#ID</code>という形になっています。これは、ある'''ID'''が指定された要素にだけスタイルを適用します。HTMLの場合、クラスは<code>id="ID"</code>と、<code>id</code>属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、<code>div</code>や<code>span</code>要素で囲んで、それらに<code>id</code>属性を付けてください。
+さっきのクラスセレクタと重複するように見えますが、最大の違いは'''同じ文書で重複するIDを付けてはいけない'''ということです。そういうわけで、ふつうは<code>#ID</code>で足りますが、<code>要素名#ID</code>としても問題はありません（別の要素がそのIDを持つ場合、スタイルは適用されません）。
+=== 子孫セレクタ ===
+XMLやHTMLでは、<code>&lt;a&gt;&lt;b&gt;&lt;c&gt;&lt;/c&gt;&lt;/b&gt;&lt;/a&gt;</code>のように要素が入れ子になっていますが、これを親子関係になぞらえて、「<code>a</code>は<code>b</code>の親要素」とか、「cはaの孫要素」というようにいいます。CSSのセレクタにもこの親子関係を使えます。
+「<code>セレクタ1 セレクタ2</code>」というように、2つのセレクタを空白で区切って書くと、「<code>セレクタ1</code>の子孫に当たる<code>セレクタ2</code>」という意味になります。<code>セレクタ1</code>や<code>セレクタ2</code>にはタイプセレクタに限らず、どんなセレクタを使ってもかまいません。「<code>id="main"</code>の<code>div</code>要素の中にある、<code>class="hoge"</code>の要素」という場合、「<code>div#main .hoge</code>」というように指定できます。また、「<code>セレクタ1 セレクタ2 セレクタ3</code>」のように、多段階で指定することも可能です。
+さらに、「<code>セレクタ1 &gt; セレクタ2</code>」のように、2つのセレクタの間に<code>&gt;</code>を入れると、「<code>セレクタ1</code>の直接の子要素である<code>セレクタ2</code>」という意味になって、孫要素以下には一致しなくなります。
+例えば、
+<source lang="html4strict">
+<head>
+：
+途中略
+：
+<style type="text/css">
+<!--
+.example1 span { color:blue }
+#id2 > em { color:red }
+-->
+</style>
+</head>
+<body>
+<p class="example1">ここは装飾なし。<span>ここは子要素。</span><em>子供は別の要素だけど、<span>孫要素には適用される。</span></em></p>
 　：
 途中略
 　：
+<p id="id2">ここは装飾なし。<em>子要素には適用される。</em><span>別の子要素。<em>孫要素には適用されない。</em></span></p>
-<p>クラスのない部分。<span style="color:blue">ここだけクラスあり。</span>ここは元通り。
+</body>
-<em style="color:red">emにクラスを適用。</em><span>同じクラスでも、spanには適用外。</span></p>
+</source>
+と入力すると、
+<p class="example1">ここは装飾なし。<span style="color:blue">ここは子要素。</span><em>子供は別の要素だけど、<span style="color:blue">孫要素には適用される。</span></em></p>
+ 　：
+ 途中略
+ 　：
+<p id="id2">ここは装飾なし。<em style="color:red">子要素には適用される。</em><span>別の子要素。<em>孫要素には適用されない。</em></span></p>
 のような表示になります。