非天マザー by B-CHAN

iPhoneの使い方、IT、金融、経済、不動産、保険、ビジネス、音楽、映画、ニュース、自己啓発などを語ります。

HTMLやCSSのclassとid、JavaScriptのgetElementByIdとgetElementsByClassNameの話

JavaScriptでもCSS

 

 

これまで紆余曲折ありましたが、とりあえず今、ボクはJavaScriptを学習中です。

1990年前後にBASIC言語を使っていたので、プログラミングの基礎概念は知っていますが、あれから数十年ぶりですし、最近の言語では当たり前のオブジェクト指向については初学なので、骨を折っています。

文法は昔のBASICと似ている点と全然違う点があります。

まあ、それは単なる文法の違いなので、概念さえ知っていれば暗記するだけ。

 

JavaScriptを学んでいるのはウェブサービスを作りたいことが第一目的ですが、基本的にJavaScriptは何でもできます。

サーバー側にも置けますし、スマホのアプリも作れます。

とりあえず、JavaScriptから入門するのは学習コストが比較的低く、しかも、活用班員が広いので、コストパフォーマンスは良いと思います。

 

あと、絶対と言って良いほど知っておいた方が良いのは、HTMLとCSSの知識。

全然難しくは無いんですが、全然知識が無いと、JavaScriptを学ぶ上で大きな障害になる可能性が高いです。

 

 

HTMLとCSSのclassとid

 

 

JavaScriptの学習の初歩の段階で、

 

getElementById

 

と言うメソッドが登場するので、ここでCSSの知識が必要になります。

 

CSSには特定の要素を指定する場合に、

 

  • class
  • id

 

と言う、似たような2つの属性を持たせることができます。

この両者の違いが、初心者にはわかりにくいんですよね。

例えば、

 

HTML

<p class="kagome">こんにちは</p>

 

CSS

p.kagome {color: red;}

 

と書けば、pタグに囲まれた文字列は赤色で表示されます。

 

また、

 

HTML

<p id="yamada">こんにちは</p>

 

CSS

p#yamada {color: red;}

 

と書けば、pタグに囲まれた文字列は赤色で表示されます。

 

つまり、classもidも、どちらも同じ動作。

 

では違いは何か。

それは、その名のとおり、classは学校のクラスのようなモノだと言うことです。

 

例えば、

 

HTML

<p class="kagome">こんにちは</p>

<div class="kagome">今日は良い天気ですね</p> 

 

CSS

.kagome {color: red;}

 

と書けば、classがkagomeであるp要素とdiv要素の両方が赤い文字になります。

p要素は省略可能です。

kagomeと言うのは、学校のクラス名のようなモノです。

kagome組、みたいな。

なので、kagome属性に何かを指定すると、kagome組の生徒は全員、それに従います。

 

一方のidはひとりひとりの生徒だと思ってください。

出席番号のようなモノですね。なので、同じidを複数の要素が持つことはできません。

山田君の出席番号が8で、石井さんの出席番号も8っておかしいですよね。

idは1ページに1個だけです。

さっきのように2つの要素の色を変えたい場合、id属性を使うなら2つのidが必要です。

 

例えば、

 

HTML

<p id="yamada">こんにちは</p>

<div id="ishii">今日は良い天気ですね</p> 

 

CSS

#yamada {color: red;}

#ishii  {color: red;}

 

となります。

 

ちなみに、

 

HTML

<p class="kagome" id="yamada">こんにちは</p>

 

CSS

.kagome {color: red;}

#yamada  {color: blue;}

 

の場合、p要素にclassとidが両方ありますが、この場合は、id属性が優先されます。なので、文字の色は青色になります。

 

classとidの使い分けにルールはありません。

ただ、便利な方を選べば良いんです。

例えば、1つのページに、何回も箇条書きの箇所が登場するとします。

そして、箇条書きの箇所はすべて文字の色を赤色に揃えたい場合、箇条書きの箇所にすべて同じclassを持たせておけば良いんですね。

そうすれば、そのclass属性を書き換えれば、ページ中のすべての箇条書きの箇所はまとめて赤色に変わります。

 

逆に言えば、個別に属性を定義したい箇所にはclassを使わずにidを使えってことですね。

 

JavaScriptで初歩の学習段階で、

 

getElementById

 

が登場すると書きました。

これは、特定のidの要素の中身を取得すると言う意味です。

idは1ページに1個しか無いので、idを指定するだけで特定の要素が拾われるわけです。

さっきの例で言えば、

 

getElementById("yamada")

 

なら、

 

<p id="yamada">こんにちは</p>

 

が該当します。 

 

逆に、classを使う場合、

 

getElementsByClassName

 

と言うメソッドがあるようですが、classは1ページに複数個存在する可能性があるので、これだけだと、該当する全ての要素が拾われます。

 

getElementsByClassName("kagome")

 

だと、 

 

<p class="kagome">こんにちは</p>

<div class="kagome">今日は良い天気ですね</p> 

 

の両方が該当します。

複数の内容を持ってしまう(まるで配列のように)ので、初心者にはちょっとだけハードルが高いですね。

なので、たぶん、初心者の学習書などには、まず、

 

getElementById

 

が登場するんだと思います。

よく見ると、

 

getElementById

getElementsByClassName

 

と、後者はElementが複数形ですね。 

 

と言うわけで、引き続き、JavaScriptやHTML、CSS学習初心者のみなさん、ボクもまったりと学んでいますので、たまに読みに来てくださいね。