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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
