TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 擬似クラスを覚えよう！CSSのnth-childの使い方【初心者向け】
オーダーメイドコース
icon
icon
CSS

擬似クラスを覚えよう！CSSのnth-childの使い方【初心者向け】

初心者向けにCSSで書くnth-childの使い方について解説しています。nth-child()擬似クラスを実際に使用した例をもとに説明しているので、すぐ理解できるはずです。nth-of-typeとの違いも理解していきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSで書くnth-childの使い方について解説をしています。

CSSを始めたばかりという人でnth-childを使う場面はなかなか出てこないかもしれませんが、デザインを整えるのに非常に便利です。リストなどをよく作成する際はぜひチェックしておきましょう。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンライン講座のカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

大石ゆかり

田島メンター！！よく表とかで、背景の色を2色で交互にしてたりしますよね。あれってどうやったらいいんですか〜？

田島悠介

そんなときはnth-childを使ってみよう。

大石ゆかり

nth-childというのはなんですか？

田島悠介

親要素から見て何番目の子要素だけにスタイルを適用、というように指定ができる疑似クラスだよ。まずは基本の書き方を見てみよう。

 

nth-childとは

nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、子要素のn番目(nth)にスタイルを適用させることができます。

多数の項目がある表で、交互に背景色を設定し見やすくしたい時などに役立ちます。

 

nth-childの書き方

nth-childは以下のように記述します。

要素:nth-child(値){スタイルの内容}

値には数字、2n+1などの式の他にeven(偶数)などを設定することができます。

例）

偶数にのみ適用する場合：2nあるいはeven
奇数にのみ適用する場合：2n+1あるいはodd
n番目に適用する場合：適用したい項目の順番の数値
n番目以降すべてに適用する場合：n+適用を開始する項目の数値

 

大石ゆかり

指定する要素は、実際にスタイルを適用する要素でいいんですか？

田島悠介

そうだね。「指定した要素が、それの親要素から見て何番目か」という形になるんだ。

大石ゆかり

なるほど、頭に入れておきます。

田島悠介

次は実際の例で見てみよう。今回は背景の色を変えて画面で確認するよ。

 

[PR] Webデザインで副業する方法とは

実際にnth-childを書いてみよう

以下のhtmlファイルにnth-childを適用します。
(※htmlとcssファイルが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です)

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<ul type=”square”>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
<li>リスト項目5</li>
<li>リスト項目6</li>
</ul>
</body>
</html>

nth-childを使用し、この中から特定の順番の項目だけに背景色が#add8e6になるように設定を行います。

 

偶数に適用する場合

nth-childの値にevenと入力します。(2nでも結果は同じになります)

CSS

ul li:nth-child(even){background-color:#add8e6; }

画面ではこのように表示されます。リスト内の偶数の要素にだけ背景色の変更が適用されています。

nthc_p_1

 

奇数に適用する場合

nth-childの値にoddと入力します。(2n+1でも結果は同じになります)

CSS

ul li:nth-child(odd){background-color:#add8e6; }

画面ではこのように表示されます。奇数の要素にスタイルが適用されます。

nthc_p_2

 

n番目の要素にだけ適用する場合

nth-childの値に適用したい項目の数値を入力します。ここでは3としています。

CSS

ul li:nth-child(3){background-color:#add8e6; }

画面ではこのように表示されます。指定された3番目の項目だけにスタイルが適用されています。

nthc_p_3

 

n番目から後すべてに適用する場合

nth-childの値にn+適用を開始したい項目の数値を入力します。ここではn+4としています。

CSS

ul li:nth-child(n+4){background-color:#add8e6; }

画面ではこのように表示されます。4番目以降のすべての項目にスタイルが適用されます。

nthc_p_4

 

以上、CSSで書くnth-childの使い方について説明しました。

リスト項目に一つ一つスタイルを当てていては時間だけが過ぎていってしまいます。nth-childのような便利なCSSを覚えてぜひ実践でも使えるようにしていきましょう。

 

田島悠介

nth-childの指定例をいくつか見てみたよ。

大石ゆかり

2色交互とかだけじゃなくて、色々な設定ができるんですね。

田島悠介

擬似クラスを使うとこのように、要素の中でさらに特定の条件を指定することができるんだ。うまく活用してサイトを見やすくしてみよう。

大石ゆかり

分かりました。ありがとうございます！

 

[お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

記事を検索

関連するキーワード

関連する記事

JavaScriptでCSSのコードを操作する方法を現役エンジニアが解説【初心者向け】

JavaScriptでCSSのコードを操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSだけで作る矢印のアニメーション方法を現役エンジニアが解説【初心者向け】

CSSだけで作る矢印のアニメーション方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ...
CSS

CSSのwebkit-line-clampを使って指定した行数に制限する方法を現役エンジニアが解説【初心者向け

CSSのwebkit-line-clampを使って指定した行数に制限する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して...
CSS

CSSでcalcが効かない原因と正しい使い方を現役エンジニアが解説【初心者向け】

CSSでcalcが効かない原因と正しい使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

中央寄せしたい！CSSでセンタリングする方法【初心者向け】

CSSでセンタリング(中央寄せ)する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 サイト内の...
CSS

CSSのoverflowを使ってはみ出た表示の指定をする方法【初心者向け】現役Webデザイナーが解説

今回は、CSSのoverflowではみ出た表示の指定をする方法を説明します。 文章が長くなり、外枠からはみ出てしまう時、手動で改行などしなくてもCSSで調...
CSS

あわせてよく読まれている記事

CSSでnth-of-typeとnth-childの違いを現役エンジニアが解説【初心者向け】

CSSのnth-of-typeとnth-childの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 nth-of-typeとnth-childの違いについて詳しく説明していくね！ 大石ゆかり お願いします！   nth-of-typeについて nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似要素です。 擬似要素とは、指定した要素の一部にCSSを反映できる方法のことほ指します。 以下、コード例です。 //兄弟関係にある<span>のうちx番目の<span>を選択 span:nth-of-type(x){ 〜 } <span>要素の数だけを数えて、x番目の<span>要素のみを選択します。   nth-childについて nth-childとは、指定した全ての要素の中でx番目にある指定の要素を選択する擬似要素です。 //<span>と兄弟関係にある、全ての要素の中でx番目にある<span>を選択 span:nth-child(x){ 〜 } 兄弟関係にある全ての要素を数えるため、x番目にある要素が<span>ではない場合、適用できません。   [PR] Webデザインで副業する方法とは2つの違い nth-childとnth-of-typeはx番目の要素を選択するのでとてもよく似ているものの、指定の要素以外の要素を数えるか、数えないかという違いがあります。 下記のようなHTMLで考えた場合、 <div>   <span>1</span>   <span>2<!--このspanに適用！--></span>   <span>3</span> </div> span:nth-child(2)もspan:nth-of-type(2)も<span>2</span>を選択します。 しかし、例えば下記のようなHTMLの場合には、span:nth-child(2)は、<p>を1番目と数えるので、<span>1</span>を選択し、span:nth-of-type(2)は<span>だけを数えるので、<span>2</span>を選択します。 <div> <p>Number</p>   <span>1<!--nth-child(2)で適用！--></span> <span>2<!--nth-of-child(2)で適用！--></span> <span>3</span> </div> 次は下記のようなHTMLで考えてみましょう。 HTML <html>   <head>     <meta charset="utf-8">     <title>nth-of-typeとnth-of-child</title>   </head>   <body>     <ul>       <li>         <h2>List01</h2>         <span>01</span>         <span>02</span>         <span>03</span>         <span>04</span>         <span>05</span>       </li>       <li>         <h2>List02</h2>         <span>06</span>         <span>07</span>         <span>08</span>         <span>09</span>         <span>10</span>       </li>       <li>         <h2>List03</h2>         <span>11</span>         <span>12</span>         <span>13</span>         <span>14</span>         <span>15</span>       </li>     </ul>   </body> </html> CSS body{   margin:30px;   font-size:20px;   font-weight:bolder; } ul{   list-style:none; } li{   display:flex; } h2{  
CSS

擬似クラス！CSSでnth-of-typeを使う方法【初心者向け】現役エンジニアが解説

CSSでnth-of-typeを使って、特殊な「擬似クラス」を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次nth-childとはnth-childの書き方実際にnth-childを書いてみよう そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   【動画の解説はこちら】   田島悠介 今回はnth-of-typeという擬似クラスを使ってみよう。擬似クラスは、セレクタのうしろに追記することで要素の中でさらに条件をつけることができるものだよ。 大石ゆかり 田島メンター！nth-of-typeはどういった条件を指定できるんですか〜？ 田島悠介 指定した要素が親要素から見て、同じ種類の要素のみを数えたとき何番目になるかというのを見るんだ。まずは基本の書き方を見てみよう。 大石ゆかり 分かりました！   nth-of-typeとは nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似クラスです。 擬似クラスとは、指定した要素の一部にCSSを反映できる方法を指します。   以下、コード例です。 //兄弟関係にある<span>のうちx番目の<span>を選択 span:nth-of-type(x){ 〜 } <span>要素の数だけを数えて、x番目の<span>要素のみを選択します。 疑似クラスについて詳しく学びたい方は、HTML5で定義された擬似クラスをご覧ください。   nth-of-typeの書き方 「nth-of-type(2n)」の前に「：」（ｺﾛﾝ）がついていることに注目してください。 li:nth-of-type(2n){   /*適用する内容*/ } ( )内部の「n」を使って、何番目であるかを記しています。 今回は「2n」番目であることから、2の倍数である偶数番目に適用されます。 また、「3n-1」や「odd」「even」という指定もできます。 「odd」「even」はそれぞれ奇数、偶数という指定方法です。   田島悠介 ()内で指定された部分にのみ、スタイルが適用されるんだ。 大石ゆかり この場合は偶数が対象ということですね。 田島悠介 次は実際の例で見てみよう。今回はリスト項目の指定の部分のみ、色を変えるというのをやってみるよ。   [PR] Webデザインで副業する方法とは実際に書いてみよう 実際にHTMLとCSSを書いてみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS nth-of-type</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li>
CSS

Rubyでファイル名を操作する方法を現役エンジニアが解説【初心者向け】

Rubyでファイル名を操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。 田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Rubyでファイル名を操作する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ファイル名を取得する方法 ファイル名を取得するには、Fileクラスのbasenameメソッドを使います。 引数にファイルへのパスを指定すると、ファイル名だけを返してくれます。 ファイル名を変更するにはFileクラスのrenameメソッドを使います。引数に、変更前のファイル名(パス)と、変更後のファイル名(パス)を指定すると、ファイル名が変更されます。 他にもFileUtilsモジュールのmvやmoveでも変更できます。引数はFile.renameと同じです。   ファイル名に関するその他の操作方法 ファイル名に関するその他の操作をいくつか紹介します。 File.extname：拡張子(.txt や .rb など) を取得できます。 File.dirname：フォルダ部分(パス)を取得できます。 File.split：各フォルダ名とファイル名を要素とした配列を取得できます。 File.absolute_path：絶対パスを取得できます。   [PR] Webデザインで副業する方法とは実際に書いてみよう 今回は事前に以下のようなフォルダとファイルを作成しておきました。 parent -child –taro.txt   bash $ mkdir -p parent/child $ touch parent/child/taro.txt $ cd parent $ pwd /Users/hoge/parent   ファイル名を取得する方法 ますはFile.basenameでファイル名を取得します。 フォルダ名が除外されたtaro.txtを取得できました。   irb(main):001:0> File.basename("child/taro.txt") => "taro.txt"   ファイル名を変更する方法 次にFile.renameとFileUtils.mvでファイル名を変更してみます。ファイル名が変更されているかどうかは、File.exist?メソッドで確認できます。 taro.txt から hanako.txtに、続けてhanako.txtからkenji.rbに変更できています。   # File irb(main):002:0> File.rename("child/taro.txt", "child/hanako.txt") => 0 irb(main):003:0> File.exist?("child/taro.txt") => false irb(main):004:0> File.exist?("child/hanako.txt") => true # FileUtils irb(main):005:0> FileUtils.mv("child/hanako.txt", "child/kenji.rb") => 0 irb(main):006:0> File.exist?("child/hanako.txt") => false irb(main):007:0> File.exist?("child/kenji.rb") => true   ファイル名に関するその他の操作方法 最後にファイル名に関するいくつかの操作を見てみます。   # 拡張子の取得 irb(main):008:0> File.extname("child/kenji.rb") => ".rb" # フォルダ名の取得 irb(main):009:0> File.dirname("child/kenji.rb") => "child" # パスに関する配列の取得 irb(main):010:0> File.split("child/kenji.rb") => ["child", "kenji.rb"] # 絶対パスの取得 irb(main):011:0> File.absolute_path("child/kenji.rb") => "/Users/hoge/parent/child/kenji.rb"   執筆してくれたメンター メンター稲員さん フリーランスエンジニア。 大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。 おうち大好きマンです。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でも、Ruby on Railsを使ったプログラミングを習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
Ruby

JavaScriptのappendChildメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのappendChildメソッドの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 appendChildメソッドの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   appendChildメソッドとは JavaScriptでプログラミングを行う際、動的にWebサイトに要素を追加したい場合があると思います。そのような時に便利なのがappendChild メソッドです。要素の集合体をノードといいます。 appendChildメソッドを使うと、特定の親ノードの子ノードの最後にノードを追加することができます。なお、追加しようとしたノードが既に存在していたら、既存のノードが新しいノードで置き換わります。これについてはサンプルプログラムで確認します。   appendChildメソッドの書き方 appendChild メソッドの書き方は以下のとおりです。 var child = element.appendChild(child); 戻り値は追加した子要素です。appendChildメソッドについて、詳しくは以下の記事を参考にしてください。 mozilla.org-appendChild   [PR] Webデザインで副業する方法とは実際に書いてみよう 今回のサンプルプログラムでは、 appendChildメソッドを使って親要素に子要素を追加する方法を確認します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>sample1</title> <style> div { margin: 10px; padding: 10px; border: medium solid blue; } </style> </head> <body> <button onclick="addChildCreate()">子要素を追加(新規)</button><br> <button
JavaScript

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次nth-childとはnth-childの書き方実際にnth-childを書いてみよう そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次nth-childとはnth-childの書き方実際にnth-childを書いてみよう そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。   要素自身を削除する 呼び出した要素自身を削除するときは、removeメソッドを使います。 書式 削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。 クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。 他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。   サンプルコード クリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。 ソースコード // 「このボタンを削除」 がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」 がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説 クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。 イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。   取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS 擬似クラスを覚えよう！CSSのnth-childの使い方【初心者向け】