コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームCSSCSS|セレクタを実践的に使う方法(初心者向け)CSS2017.08.17CSS|セレクタを実践的に使う方法(初心者向け)基本となる3つのセレクタでは、スタイルシートのセレクタの基礎についてお話させていただきました。今回は、少しだけ応用編という形で、前回の例をもとにセレクタをより具体的に指定する方法についてお話させていただきます。セレクタには3つの基本となる書き方の他にもいろんな指定の仕方があります。class="red">ここの色を変えていくよ</p></div>「ここの色を変えていくよ」というテキストの色を変えたいときに、.red{color:red;}このようにclassセレクタを使ってテキストを赤くすることができました。これには別の指定の仕方もあります。次のように書くこともできます。p.red{color:red;}手前に「p」が入っています。これは「p要素であり、かつ、redという名前のclass属性でもある要素」という意味です。.red{color:red;}これは、「blueというid属性の子要素のredという名前のclass属性をもつ要素」という意味になります。このように親要素から子要素へ順番に記入することもできます。上記の2つの例のように要素名やclass名を連続して記載するときには、ルールがあります。「要素名.クラス名」といった形でスペースがない場合は「両者を満たす要素」という意味になります。p.red{color:red;}と記載した場合、「pかつ.red」ということになります。.クラス名」という形でスペースを間に入れると親子関係という意味になります。「要素名の子要素の中にあるクラス名」という意味です。これは住所を伝えるのに似ています。「杉並区」とだけ伝えるのか「東京都杉並区」と伝えるのか、結局は同じ地名を言っているのですが後者の方がより具体的な書き方なので想定外な場所にうっかりデザインが適用されるのを防ぐことができます。.red{color:red;}このように記載してしまうと、デザインが適用されなくなるのは分かりますか?これは「p要素の子要素の中にあるredというclass属性」になってしまうので、先ほどの例の場合は該当する要素がなくなってしまいます。今回の例では間にスペースを入れてはいけません。p.red{color:red;}スペースを入れる場合は、下記のように親要素と子要素の間に入れます。p.red{color:red;}もっと具体的に下記のようにid属性を入れることもできます。p.red{color:red;}セレクタは場所を細かく指定することで、デザインを適用させたい場所とさせたくない場所を明確に指定する効果があるという話を先ほどしましたが、その他にも同じ要素に対して異なる値のプロパティが指定されていた場合に、デザインを優先的に適用させる効果があります。blue;という異なる値が同時に指定されている場合、より具体的に指定されている方が勝ちます(この場合はblueの勝ち)。スタイルシートの優先順位については下記も参照してみてください。2017.09.10CSSの優先順位ここでは、スタイルシートでプロパティと値をちゃんと指定しているのに効いてくれないという問題を解消するための方法として、プロパティが効く優先順位がどうなっているのかについてお話します。class="red">ここの色は変わるかな?</p>このように「red」というクラスが2つあった場合、.red{color:red;}このようにclassのみで指定すると両方のテキストが赤くなります。仮に上のテキストだけを赤くしたいという場合、セレクタをどのようにしたらよいでしょう。p.red{color:red;}このように親要素から指定してあげると、「ここの色を変えていくよ」だけが赤くなり「ここの色は変わるかな?」は変わりません。ここでは、セレクタの基本的な仕組みを見ていただきました。この部分を正しく理解していないがために、スタイルシートが効いてくれないと悩んでいる初心者の方は意外と多いのではないでしょうか。普段からスタイルシートが言うことを聞いてくれなくて困っているという方は下記の記事を見ていただくと良いと思います。2017.08.19スタイルシートの間違いあるあるコーディングに取り組んでいる方なら、スタイルシートのデザインがうまく効かなくてイライラした経験があると思います。私の経験上デザインが適用されない原因の9割以上は基本的なミスによるものです。