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デザインオンラインブートキャンプを開催しています。

CSSのinline-blockの改行による隙間を消す方法【初心者向け】

CSSのinline-blockの改行による隙間を消す方法について解説します。ソースコード上で改行があるとインライン要素やインラインブロック要素に空白が...

CSS

実際に書く！CSSで背景画像を透過させる方法【初心者向け】

CSSで背景画像を透過させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

CSS

CSSのlinear-gradientの使い方を現役デザイナーが解説【初心者向け】

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

CSS

CSSのletter-spacingの使い方【初心者向け】

CSSのletter-spacingの使い方について解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読む...

CSS

CSSで画像に指定色の透過カラーを重ねる方法を現役エンジニアが解説【初心者向け】

CSSで画像に指定色の透過カラーを重ねる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...

CSS

CSSで文字サイズをディスプレイサイズに合わせて可変にする方法【初心者向け】

CSSで文字サイズをディスプレイサイズに合わせて可変にする方法について解説します。そもそもCSSについてよく分からないという方は、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>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</span> <span>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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

nth-childとは

nth-childの書き方

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