メモ

メモを入力してみよう!


Lesson 11「セレクタ」

学習概要

CSS言語での要素へのスタイル指定方法とスタイル指定が被った場合のスタイルが適用される優先順位を学習していきます。

補足

セレクタの主な種類の最初に「※(こめじるし)」と説明していますが、「*(アスタリスク)」の誤りです。

指定のタグに対してスタイルが上手く適用されない場合は、「スタイルの優先度」が低い場合があるので、優先度を上げて試してみましょう。

この練習でわからない所を質問する※部活外の質問はできません

既に出ている同じ内容の質問やレッスン以外の質問には回答致しません。こちらから既出の質問・回答をワード検索できます。(仮入部部員は利用不可)

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 11「セレクタ」の内容※SEO用のため読めません

皆さん初めまして、ウェブカツコーチの斉藤です。これからHTML&CSSについて学んでいきたいと思います。今回学んでいくのはこちら。
セレクタ

はいではこれから実際にセレクタというもの説明していきたいと思います。
セレクタというのは前回お話ししましたけども、何処にスタイルを指定してやるのかと言う、何処という部分です。誰にスタイルを指定するというとこなんですけれども。
その指定方法は様々ありますので主に使うものというのをこれから挙げていきたいと思います。主に使うのがこちらになります。

上から見ていきたいと思うんですけれども、まず1つが[ *(米印) ]を使った方法です。[ *{ } ]っていう形で指定してあげような使い方ですね。これは全要素に対してスタイルを指定します。タグが色々ありますけれどもタグ=要素というので全てのタグ、全部の要素に対してスタイルを指定するよという形のスタイルの指定方法になります。

もう一つが今まで使ってきたやり方ですね。要素Xとありますけれどもタグの名前をつけるやり方です。なので実際の使い方見てもらうと[ p{ } ]とやってpタグに対してスタイルを指定しますよという形のスタイルの指定方法ですね。

もう一つがこれも前回やりましたけれどもid属性に対してスタイルを指定するという方法があります。これも前回やりましたけれども、class属性に対してスタイルを指定するもの。[ .bg-color1 ]classの名前を指定してあげるというやり方があります。

その下、ここから新しいですね。実際の使い方を見てもらうと[ p a{ } ]でスタイル指定します。どういう指定方法かというとpタグの中にaタグとか色々タグもまた入れられますけども、pタグの中にあるaタグに対してスタイルを指定します、という形のスタイルの指定方法があります。

その下が同じような感じに見えるんですけれども、[ p > a { } ]でスタイルを指定してます。これ何かというとpタグの中にあるaタグに対してスタイルを指定します。先ほどと同じに見るかもしれないんですけれどもただpタグの中の直下にあるaタグ、に対してスタイルを指定するというものになります。これどういうことかというとpタグの中にまたタグを入れてその中にタグを入れることができるんですね。先ほど上の方はpタグの中にあるaタグであればpタグがあってその中に例えばdivタグ入っていてその下にaタグがあったとしてもそのaタグに対してスタイルが指定されます。でも[ p > a { } ]という形の指定方法だとpタグの中にあるすぐ下にあるaタグに対してスタイルが指定できるので先ほどのような間に1個タグを挟んでた形になってしまうとスタイルが適用されなくなります。なのでこの[ > ]を使うことでpタグの中にある直下にあるaタグに対してだけでスタイルをしてことができるようになります。

次にその下でこれも前回やりましたpタグかつclass属性が[ class ]のものに対してスタイルを指定しますよこういった形で絞ったclass属性をつけたもので指定するという形もできます。もう一つ下も同じようにpタグかつid属性は今度何かしらの名前のものに対してスタイルを指定するようなスタイルの指定方法もできます。
最後これ今までやってないですけれどもどういったものかというと、基本的にaタグで使うことが多いかと思います。リンクのタグですね。例えば「続きを見る」とか「次へ行く」とかそういったリンクの文字があってその上にカーソルを合わせた時に色が変わったりします。そういったものを指定の方法がこれです。[ タグ名:(コロン)hover; ]例えば[ a:hover ]とやることでその要素の上にマウスが乗った時に何かしらのスタイルを指定します。例えばcolorをredという形にすればマウスが乗った時にそこにある文字色が赤く変化しますよ、という形のスタイルの指定方法ができます。他にもいろいろな指定方法があります。ただ主に使うのはこれですのではこれだけまずは覚えていただければと思います。

次に、スタイルの優先順位というものを説明していきたいと思います。そのスタイルCSSで指定しますけれども、その指定が被る場合があります。被った時にどっちが優先されてスタイル変化するの、というところの優先順位がなります。例えば今表示されてるようにpタグがあってid属性に[ title ]と名前が付いてる、でclass属性に[ button ]という名前がついていたものがあったとします。これに対してスタイルを指定しました。スタイルを指定した場合ですね、まず優先順位が高いスタイルを指定方法というのがこちらになりますこれはですねpタグに対してスタイルを指定してるんですけれどもcolor:red;とあってここまで同じなんですがその後半角スペースがあってで[ !important ]と書かれて;(セミコロン)で閉じられています。この[ !important ]をつけると一番最優先でスタイルが指定されます。次にスタイルが重複した場合に優先されるのがこちらです。これはタグ自体にスタイルを書いてしまう、指定してしまうっていう方法です。CSSに書かないでこのタグ自体に書くことができます。なのでhtmlファイルの中にスタイルを指定することができます。

スタイル属性というものを使っていただければ同じように[ color:red; ]とCSSと同じ形ですね。でセミコロンで閉じていただければこのpタグに対して直接スタイルが指定されたという形になります。これが[ important ]の次に優先されてスタイルが指定される方法です。
次に優先されるのがこちらid属性を指定した場合です。pタグでかつid属性が~~という形で合わせた場合ですね。ただのpタグだけではなくてかつid属性がこれですよという形でさらに絞り込んだものです。これが次に優先されてスタイルが適用されます。その次にスタイルが優先されて適用されるのがclass属性を使ったものですね。pタグでかつまた絞り込んでclass属性が~~のもという形で絞り込んだ場合、これはid属性よりもclass属性の方がいろんなタグにつけられますのでid属性だとpタグでtitleのid属性とはもうこれだという形で決まりますけれどもpタグでかつclass属性がbuttomとかってなってくると他にもついている可能性がありますので、複数ある可能性があります。なので絞り込みがどちらかと言うとid属性の方が高いのでそちらの方が優先されてclass属性のが次の優先で適用されるっていう形になります。
最後は書いた順番で優先順位が決まってきます。なので同じpタグに対して最初は文字色を赤にしよう、としてたのがその下には同じpタグに対して文字色を青にしますとしてます。そうした場合は一番最後に書いたものが優先されて適用されるって形になります。
このようにどの要素、どのタグに対してスタイルを指定するか、その要素の特定、どの要素だっていうのがわかればわかるほど優先度が高くなるという形でスタイルが決まっていきます。これからプログラミングを始めていくと指定したスタイルと違う表示になってるとかっていう場合があります。そういう場合にはこういった形でスタイルの優先順位があるので、それによって違うスタイルが指定されている適用されてしまってるっていう場合がありますのでその辺りをチェックしてみていただければと思います。

ではまたお会いしましょう、さよなら。