「CSS/記述」の版間の差分
→書式: 節まで書きこみ |
セレクタについて執筆開始 |
||
| 82 行 | 82 行 | ||
</source> |
</source> |
||
のように読み込む指定をしても、 |
|||
<p style="color:red">文字色その1</p> |
<p style="color:red">文字色その1</p> |
||
| 93 行 | 93 行 | ||
== 書式 == |
== 書式 == |
||
直接<code>style</code>属性で書く場合を除いて、CSSは以下のような書式になっています。 |
直接<code>style</code>属性で書く場合を除いて、CSSは以下のような書式になっています（角カッコ内は省略できるものです）。 |
||
/* コメント */ |
/* コメント */ |
||
| 102 行 | 102 行 | ||
<code>/*</code> と <code>*/</code>ではさまれた部分はコメントとして無視されます。また、コメントや空白、改行は、単語の途中でなければどこに入れてもかまいません。 |
<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>属性を付けてください。 |
|||
また、同じクラスの要素は文書中にいくつあってもかまいません。特定の要素に付いたクラスにだけ適用させる場合には、<code>要素名.クラス名</code>とすれば、両方一致するものにだけ適用されます。 |
|||
<source lang="html4strict"> |
|||
<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> |
|||
</source> |
|||
と入力すると、 |
|||
<p style="color:blue">クラスのテスト</p> |
|||
： |
|||
途中略 |
|||
： |
|||
<p>クラスのない部分。<span style="color:blue">ここだけクラスあり。</span>ここは元通り。 |
|||
<em style="color:red">emにクラスを適用。</em><span>同じクラスでも、spanには適用外。</span></p> |
|||
のような表示になります。 |
|||
[[Category:World Wide Web|CSS きしゆつ]] |
[[Category:World Wide Web|CSS きしゆつ]] |
||
2011年4月18日 (月) 08:39時点における版
準備
まずスタイルシートを入力する前に、
<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には適用外。
のような表示になります。