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

→‎書式: 節まで書きこみ
M (meta要素による言語の指定、ほか)
(→‎書式: 節まで書きこみ)
 
== 基礎 ==
=== style属性 ===
最も簡単に記述するには、HTML要素に、以下のように指定します。
 
ほとんどの要素に style 属性を指定できますが、既存の要素で丁度囲まれていない部分を指定したい場合は、span要素 や div要素 で囲んでそれに属性を指定します。
 
=== style要素 ===
特定の HTML要素全てにスタイルを指定したい場合は、style要素 でまとめて行うことができます。次の例は、全ての <code><nowiki><p></nowiki></code> タグに style="color:red" を指定した事になります。
 
<p style="color:red">文字色その2</p>
 
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 きしゆつ]]
11

回編集