こんにちは、なっちる先生（@nacchi_jagariko）です。
大学中退後、プログラミング完全未経験から就職し、絶賛リモートワーク中のものです。
今回は、プログラミング初心者のもっちるさんが、いざ実際に作ろうとして直面した、
現実コード上での、cssでのクラス指定のやり方が話しとちゃう！
という悩みに対して、実践的なセレクタ指定方法を、実際のコードを見せながら解説していきます。
実践的なセレクタ指定
一番簡単な使い方
まず、セレクタとは何かについて説明しますと、一番簡単なセレクタ指定を例にすると、こちらのコードのcss文の「.hello」の部分がセレクタ指定になります。
ちなみに「color」が「プロパティ」で、「orange」が「値」と呼ばれるものです。（覚えなくていいです。）
See the Pen zbbxJN by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
違う階層にあるクラス
すごく説明しずらいのですが、違う階層にあるクラスを使ってセレクタ指定をするとき、cssでクラス名とクラス名の間に「スペース」を空けます。
これによって、「親要素」の中の「子要素」という意味になります。
コードをみてもらったほうがわかりやすいと思います。
See the Pen eXXmgN by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
ここでは「boxクラス」が親要素で、「helloクラス」が子要素ですね。
同じ階層にあるクラス
１つの要素に複数クラスをつけることがありますよね。
そういうときはクラス名とクラス名の間に「スペース」を空けません。
See the Pen XGGbMz by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
複数のセレクタ
同じcssを複数のセレクタに指定したいときはセレクタとセレクタを「,（コンマ）」で区切ります。
See the Pen VRRLWg by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
擬似要素
擬似要素を使うときも上と同じです。
ただ最後のクラス名に「：」から始まるものをつければOKです。
See the Pen VRRLQN by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
おまけ
なっちる先生がプログラミング初めたてのときに重宝したセレクタ指定を少し紹介します。
このセレクタ指定によって、要素がどんな形をしているかが一目でわかります。
See the Pen xBBGxp by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
意外と活躍するよ！！
優先されるセレクタ指定
一応こちらの説明もしておきます。
bootstrapなどのwebフレームワークを使うとなると、ダウンロードしてきたcssファイル（bootstrap.min.cssなど）の中身を編集するわけにはいきません。
しかし、自分で作ったcssファイルからスタイルを当てるようとすると、
スタイルが変わらない！
となってしまうことがあると思います。
そういうときのために優先されるセレクタについて理解しておきましょう。
どのスタイルが優先的に当てられるか、どうやって決められているかというと「得点制」が用いられています。
以下得点の内訳です↓
指定方法 例 点数 全称セレクタ * 0 タイプセレクタ p 1 擬似要素 :first-child 1 擬似クラス [type=”text”] 10 classセレクタ .fugafuga 10 idセレクタ #piyopiyo 100 要素に直書き style=”” 1000
「style＞id名＞class名＝擬似クラス＞擬似要素」と得点を高いわけです。
例えばclass名１つで指定してるのと、class名２つで指定しているのは、後者の方が得点が高いので後者のスタイルが適用されます。
実際のコードを見てもらったほうが、理解しやすいですね。
See the Pen PLLZqR by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
こんな感じです。
cssのところのコメントを見るとわかると思いますが、
「idの方が優先される」「class名が多い方が優先される」という風に、得点制で適用されるスタイルが決められていますね。
ゲームみたいだね！
※!importantは使わない方針です。
これを使ってしまうと、コードがわけわからなくなる可能性が出てきてしまいますので。
まとめ
progateやドットインストールで学んでみても、やはり何か作らなければ、実際のHPのコードとプログラミング学習で学んだコードとの溝を埋めることはできないです。
プログラミング学習のレッスンを何度も繰り返すのも素晴らしいことですが、何かを作りましょう。
どこかのHPを模写してみるのもいいと思いますが、これから個人でやっていきたいなら、HPを作ってみつつ、自分の紹介もでき、ポートフォリオとして使えるものを作ってみた方がいいと思います。
一応こちらでも参考になるようなものを用意しております↓
わからないことが多くイラつくことも出てくるとは思いますが、まずは１つのものを完成させることだけを目指して、もがきながら前に進みましょう。
１つHPを作ってしまえば、振り返ってみたら大したことなかったわと思うはずです。
おすすめのプログラミング学習方法はこちら参考にしてみてください↓
【答辞】
progateは
pro = programmingの
gate = 入り口
だよ。progateからみんなが飛びだって行きますように🧖🏼♂️
progate卒業生一同みなさんの活躍を祈っております。
平成29年度progate卒業生
なっちる先生より。🌸— なっちる先生@バンコクで先生 (@nacchi_jagariko) 2019年3月23日
プログラミングで自分の世界を広げよう！
以上でなっちる先生の授業を終わります〜。