指定した箇所にスタイルを効かせる
例えば､表で交互に色を付けたい場合､クラスを付けないといけません｡少しならいいでしょう｡しかし､多ければ多いほど､ミスに繋がります｡そのときは､疑似クラスを使えば簡単です｡
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
偶数に色を付けます｡HTMLはこんな感じです｡
HTML
<ul class="even">
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
</ul>
リスト表示(ul)です｡ここでは､それを使っています｡簡単なHTMLですね｡evenというクラス名を付けていますが､必須ではありません｡この記事の場合､他の展開もあるので､クラス名を付けています｡書く状況に応じて､クラス名を付けるかどうか､決めればいいですね｡
CSS
.even li:nth-child(even) {
background: red;
}
偶数(even)で偶数のところに色を付けるようにしています｡少しややこしいので､SCSSがいいですね｡
SCSS
.even{
li{
&:nth-child(even){
background: red;
}
}
}
SCSSの場合､最終的にCSSにコンパイルする必要があります｡近々､親戚にHTMLコーディングを教えるのですが､最初からSCSSを教えるつもりです｡時代はもう､SCSSだ(多分笑)｡
あとは､ホームページ制作でよく使う､テクニックを伝えるつもりです｡
奇数にする
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
奇数にします｡奇数の箇所に色が塗られています｡
HTML
<ul class="odd">
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
</ul>
CSS
.odd li:nth-child(odd) {
background: aqua;
}
SCSS
.odd{
li{
&:nth-child(odd){
background: aqua;
}
}
}
奇数(odd)にします｡evenは偶数､oddは奇数です｡これを覚えれば問題ありません｡ちなみに､スタイルを効かす箇所にそれらを書きます｡親要素ではありません｡
コードを見て頂くとわかるように､ulにはnth-childのスタイルを効かせていません｡割と混乱するタイミングだと思うので､そこを注意して下さい｡
指定した箇所にCSSを効かす
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
残る1つは､指定した箇所にスタイル効かす方法です｡ここでは3番目にスタイルを効かせます｡
HTML
<ul class="nam">
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
</ul>
CSS
.nam li:nth-child(3) {
background: green;
}
SCSS
.nam{
li{
&:nth-child(3){
background: green;
}
}
}
nth-childのあとに番号を書きます｡これで指定した箇所にスタイルを効かすことができます｡理屈が分かれば簡単です｡他にもありますが､最低限､おさえておけばいいでしょう｡
交互に色を塗る際､クラスで仕分けはスマートではありません｡途中で必ず､ミスします｡数個､例えば､5個だけなら､それぞれクラスを付けてもいいでしょう｡
でも､追加となったら､手間が増えます｡nth-childが便利です｡
さいごに
割と簡単ですね｡最近､これを使ったことがあって､知識があやふやだったので記事にしてみました｡書いて仕組みがスッキリしました｡
他にもありますが､僕がホームページ制作をする上で､実践的に使ったものを紹介しています｡
知りたい方は下のページを開いてください｡当サイトのページになります｡
チラッと触れましたが､時代はSCSSだと思うので､少しずつ学習されることをおすすめします｡
最初は戸惑いますが､慣れたらCSSを書くより簡単です｡
楽しいですよ｡vscodeであれば､プラグインでコンパイルできますので､おすすめです｡
おしまい！