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

削除された内容 追加された内容
編集の要約なし
Ef3 (トーク | 投稿記録)
s/になっています/です/g
タグ: 2017年版ソースエディター
169 行
 
== 書式 ==
直接<code>style</code>属性で書く場合を除いて、CSSは以下のような書式になっています(角カッコ内は省略できるものです)。
 
/* コメント */
186 行
 
=== クラスセレクタ ===
htmlのclass属性をセレクタにすることもできます。class属性をセレクタにすることをクラスセレクタ( classセレクタ )といいます。クラスセレクタの指定方法は <code>.クラス名</code>という書式になっています。ピリオド(.)のあとにクラス名をつけて、セレクタを記述します。
 
 
229 行
 
=== IDセレクタ ===
このセレクタは<code>#ID</code>という形になっています。これは、ある'''ID'''が指定された要素にだけスタイルを適用します。HTMLの場合、クラスは<code>id="ID"</code>と、<code>id</code>属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、<code>div</code>や<code>span</code>要素で囲んで、それらに<code>id</code>属性を付けてください。
 
さっきのクラスセレクタと重複するように見えますが、最大の違いは'''同じ文書で重複するIDを付けてはいけない'''ということです。そういうわけで、ふつうは<code>#ID</code>で足りますが、<code>要素名#ID</code>としても問題はありません(別の要素がそのIDを持つ場合、スタイルは適用されません)。
 
=== 子孫セレクタ ===
XMLやHTMLでは、<code>&lt;a&gt;&lt;b&gt;&lt;c&gt;&lt;/c&gt;&lt;/b&gt;&lt;/a&gt;</code>のように要素が入れ子になっていますが、これを親子関係になぞらえて、「<code>a</code>は<code>b</code>の親要素」とか、「cはaの孫要素」というようにいいます。CSSのセレクタにもこの親子関係を使えます。
 
「<code>セレクタ1 セレクタ2</code>」というように、2つのセレクタを空白で区切って書くと、「<code>セレクタ1</code>の子孫に当たる<code>セレクタ2</code>」という意味になります。<code>セレクタ1</code>や<code>セレクタ2</code>にはタイプセレクタに限らず、どんなセレクタを使ってもかまいません。「<code>id="main"</code>の<code>div</code>要素の中にある、<code>class="hoge"</code>の要素」という場合、「<code>div#main .hoge</code>」というように指定できます。また、「<code>セレクタ1 セレクタ2 セレクタ3</code>」のように、多段階で指定することも可能です。