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

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

インライン

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

準備

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

<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言語など違って、最後の値の後にセミコロンを必ず付ける必要はありません）。また、コンマで区切って、複数のセレクタに対して同じスタイルを適用することもできます。

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

@@ 13 行 / 13 行 @@
 == 基礎 ==
+=== style属性 ===
 最も簡単に記述するには、HTML要素に、以下のように指定します。
@@ 21 行 / 22 行 @@
 ほとんどの要素に style 属性を指定できますが、既存の要素で丁度囲まれていない部分を指定したい場合は、span要素 や div要素 で囲んでそれに属性を指定します。
+=== style要素 ===
 特定の HTML要素全てにスタイルを指定したい場合は、style要素 でまとめて行うことができます。次の例は、全ての <code><nowiki><p></nowiki></code> タグに style="color:red" を指定した事になります。
@@ 48 行 / 50 行 @@
 <p style="color:red">文字色その2</p>
-style要素に対応していないユーザーエージェントの為に、style要素の中をコメントアウトすることもあります。
+style要素に対応していないユーザーエージェントのために、style要素の中をコメントアウトすることもあります。
+ここで、CSSの<code>p { color:red }</code>となっていますが、このうち、最初の<code>p</code>を'''セレクタ'''、<code>color</code>を
+'''プロパティ'''、<code>red</code>を'''値'''といいます。
+個別のHTML要素にスタイルを指定することもできますが、「意味と見た目の分離」、「全体でスタイルを統一する」、「再利用性を高める」などの観点から、CSSはまとめて書くことが推奨されています。
+=== 外部スタイルシート ===
+さらに、CSSだけを別のファイルに書くこともできます。例えば、<code>foo.css</code>に、
+<source lang="css">
+p { color:red }
+</source>
+とだけ書いておいて、HTML側でこのファイルを、<code>&lt;link&gt;</code>要素を使って、
+<source lang="html4strict">
+<head>
+：
+途中略
+：
+<link rel="stylesheet" href="foo.css" type="text/css" />
+</head>
+<body>
+<p>文字色その1</p>
+　：
+途中略
+　：
+<p>文字色その2</p>
+</body>
+</source>
+としても、
+<p style="color:red">文字色その1</p>
+:：<br />
+途中略<br />
+:：
+<p style="color:red">文字色その2</p>
+のようにスタイルが適用されます。こうすれば、サイト全体で見た目の統一をはかり、さらにそれをまとめて変更することができます。
+== 書式 ==
+直接<code>style</code>属性で書く場合を除いて、CSSは以下のような書式になっています。
+ /* コメント */
+ セレクタ[, セレクタ…] {プロパティ: 値 [; プロパティ: 値…]}
+ [セレクタ {プロパティ: 値}…]
+さっきの例では、<code>p</code>が'''セレクタ'''、<code>color</code>が'''プロパティ'''、<code>red</code>が'''値'''です。1つのセレクタについて、プロパティと値の組を複数指定することが可能で、その間はセミコロンで区切ります（C言語など違って、最後の値の後にセミコロンを必ず付ける必要はありません）。また、コンマで区切って、複数のセレクタに対して同じスタイルを適用することもできます。
+<code>/*</code> と <code>*/</code>ではさまれた部分はコメントとして無視されます。また、コメントや空白、改行は、単語の途中でなければどこに入れてもかまいません。
 [[Category:World Wide Web|CSS きしゆつ]]