CSSの構造その1-セレクタ指定方法
更新日 : 2019年02月17日
前回のCSSとはで基本的なCSSの書き方を学びました。
CSSのセレクタには、単純にHTMLタグを指定するだけではなく、class・id属性などを指定することもできます。
また、CSSの正式名称(Cascading Style Sheets)であるカスケーディングという意味通り、重複するスタイル指定を上手に扱うためのルールも存在します。
CSSの基礎
こちらの画像でCSSの基本を復習していきましょう。
- セレクタ
どの部分にスタイルを適用するかを指定する箇所。
上記画像ではarticleタグに対して中括弧{}内のスタイルを適用していきます。 - プロパティ
プロパティはどんなスタイルを適用するかだけを宣言します。上記画像であれば、text-align(テキストの位置)とcolor(文字色)を指定しています。 - プロパティの値
プロパティに対して、実際にどんな色にするのか、テキストの位置はどうするのかを決めていきます。
プロパティに対してプロパティの値はある程度制限され、例えばcolorプロパティには色関係のプロパティ値が適用できます。プロパティ: プロパティの値;という書き方が基本です。コロンとセミコロンを忘れずに書きましょう。
セレクタの指定方法いろいろ
CSSの基本はセレクタ・プロパティ・プロパティの値の3つです。
プロパティとプロパティの値に関しては、あとは色々な種類を学んで使ってみるだけなので、BeCrazyでも少しづつ記事にしていきます。
当記事ではセレクタの指定方法のいろいろなパターンを学んでいきます。
要素セレクタ
先程の基本で説明したセレクタです。HTMLタグを直接指定します。
article {
color: red;
}上記ではarticleタグに文字色を設定しています。
複数セレクタ
同じCSSを複数の場所で適用したい場合に利用するセレクタです。
article, div {
color: black;
}このように指定するとarticleタグとdivタグに文字色黒が適用されます。
子孫セレクタ・子セレクタ
HTMLは構造化されたマークアップです。構造化されているということは、子要素や孫要素があります。
header h1 {
color: red;
font-size: 20px;
}このように指定すると、headerタグの子または孫要素にあるh1タグにたいしてCSSを適用しています。スペースを開けることによって前の指定セレクタの子や孫要素を指定することができます。
孫などの離れた要素指定ではなく、直下にある子要素のみを指定したい場合は以下のようになります。
header > h1 {
color: red;
font-size: 20px;
}>この記号を利用することによって子要素のみを指定することができます。上記の指定だと、headerタグ直下にあるh1タグにのみCSSが適用されます。
classセレクタ・idセレクタ
次にclass属性やid属性を利用したセレクタです。
まずはidセレクタから見ていきましょう。HTMLのid属性は1つのwebページにつき、基本的に1つしか使うことができません。
/**
* id属性での指定
* articleタグのsampleというid属性指定
*/
article#sample {
font-size: 12px;
}
/**
* id属性のみを指定することも可能
* sampleというid属性に対して適用
*/
#sample {
font-size: 12px;
}Id属性セレクタは#を利用します。id属性のみを指定したり、他のセレクタを組み合わせることもできます。
続いてclassセレクタです。
article.test {
color: green;
}
.test {
color: green;
}classセレクタは.を利用します。記号が違うだけで、idセレクタと使い方は同じです。
疑似クラスセレクタ
疑似クラスというのは、HTMLには実際には書かれていませんが、ユーザーの動作や少し特殊なHTMLタグに対して適用することができるセレクタです。
/**
* 訪問済みのリンクのみ文字色をグレーにする
*/
a:visited { color: gray; }
/**
* マウスがリンクの上にあるときに文字色を赤にする
*/
a:hover { color: red;}このようにユーザーのマウスの位置等に応じてCSSを変更したりすることができます。HTML内にはhoverなどとは書かれていませんが、マウスが、CSSを指定した場所の上にあるときにはhoverという疑似セレクタが動作します。
他にもlink・focusなどの疑似セレクタが存在します。特にhoverがよく利用されます。
その他のセレクタ
その他疑似要素や属性セレクタ、隣接セレクタなど様々なセレクタ指定方法がありますが、基本はここまで学んでおけば大丈夫でしょう。
まとめ
CSSの基本的な扱い方について学んでいきました。
上記の指定方法を一通り理解しておけば、セレクタの指定方法に関しては一般的には問題ないでしょう。
タグ
-
前の記事
CSSとは
-
次の記事
CSSの構造その2-スタイルの指定箇所