3の倍数などn番目の要素だけCSSをスタイルする方法を現役エンジニアが解説【初心者向け】
初心者向けに3の倍数などn番目の要素だけCSSをスタイルする方法について解説しています。特定の倍数の要素にのみスタイルを適用する際には擬似クラスを使用します。:nth-of-typeを使った実際の指定の例についてサンプルコードで見ていきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
3の倍数などn番目の要素だけCSSをスタイルする方法について解説します。これができると規則的にデザインを変更することができるので、個別でCSSを設定するという手間が省ける上に、可読性の高いコードとなります。ぜひ参考にしてみてください。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
3の倍数などn番目の要素だけCSSをスタイルする方法について詳しく説明していくね！
お願いします！
疑似クラスの説明と使い方
通常、CSSのセレクタでは、HTMLタグやクラス名、id名で指定して、デザインを作っていきますが、擬似クラスでは、指定された要素の状態や、条件を追加することができます。
例えば、マウスがのっている時だけに適用させたい場合は、タグ名:hoverとします。
CSS：
a:hover{ color:red; }
このように、条件や状態を追加することができる擬似クラスはたくさんあります。
- :active／アクティブ状態
- :visited／訪問済みのリンク
- :focus／<input>などの要素が入力状態
- :checked／checkboxなどでチェックされている状態
- :first-child／最初の子要素
- :nth-child／親要素の中で、全ての子要素の内、x番目の子要素
- :nth-of-type／親要素の中で、x番目の子要素
などなど、まだいっぱいあります。
3の倍数の要素にスタイルを適用する方法
3の倍数の要素にスタイルを適用するには、x番目の要素を選択できる :nth-of-type を使用します。HTMLで、余分なクラス名をつけることなく、CSSだけで適用できます。
HTML：
<html> <head> <meta charset="utf-8"> <title>nth-of-typeを使ってみよう</title> </head> <body> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> <span>14</span> <span>15</span> <span>16</span> <span>17</span> <span>18</span> <span>19</span> <span>20</span> </body>
CSS：
@charset "UTF-8"; /*文字コードの指定*/
body{
display:flex;
flex-wrap:wrap;
margin:30px;
font-size:20px;
font-weight:bolder;
}
span{
display:block;
width:100px;
height:100px;
margin:5px;
background:gold;
}
このうち、3の倍数のボックスのみをグリーンに変えるには、下記のように書きます。
span:nth-of-type(3n){ background: limegreen; }
span:nth-of-type(3n)は、3×n番目の<span>という意味です。nは自然数なので、3×n番目 = 3の倍数番目ということになります。
n番目の要素にスタイルを適用する方法
nth-of-type()の()の中には、3nだけでなく、好きな数字を入れてx番目の要素を選択することができます。10番目のボックスの色を赤にするには、
span:nth-of-type(10){ background:tomato; }
と書きます。
疑似クラスを使ってみよう
このように、nth-of-typeを使えば、好きな番号のボックスの色をCSSだけで変更することができます。
また、
- 偶数番目のボックスの文字色を白にする場合：span:nth-of-type(2n){ color:white; }
- 奇数番目のボックスの文字色を赤にする場合：span:nth-of-type(2n+1){ color:tomato; }
のように書きます。
このようにnth-of-typeを使えば、好きな子要素を選択することが可能です。
HTML：
<html> <head> <meta charset="utf-8"> <title>nth-of-typeを使ってみよう</title> </head> <body> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> <span>14</span> <span>15</span> <span>16</span> <span>17</span> <span>18</span> <span>19</span> <span>20</span> </body> </html>
CSS：
body{
display:flex;
flex-wrap:wrap;
margin:30px;
font-size:20px;
font-weight:bolder;
}
span{
display:block;
width:100px;
height:100px;
margin:5px;
background:gold;
box-sizing:border-box;
}
span:nth-of-type(3n){
background:limegreen;
}
span:nth-of-type(10){
background:tomato;
}
span:nth-of-type(2n){
color:white;
}
span:nth-of-type(2n+1){
color:tomato;
}
span:nth-of-type(3n+1){
border:limegreen 5px solid;
}
span:nth-of-type(2n+3){
background:white;
}
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
