「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には適用外。
のような表示になります。