「CSS/記述」の版間の差分
削除された内容 追加された内容
M meta要素による言語の指定、ほか |
→書式: 節まで書きこみ |
||
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要素に対応していないユーザーエージェントの
ここで、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><link></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 きしゆつ]]
| |||