classというコードを目にすることが多くなると思います。classってどんな時に使うの?」と疑問に感じているのではないでしょうか。classの使い方」などを具体例を用いて5分程度でわかる解説をご用意しました。idとの違いについても解説します。classについて完璧に理解できているようになっているでしょう。最後までお読みください。classとは何なのでしょうか。ここでは、HTMLの簡単なコードを例に挙げ、divとclassを別々に解説していきます。※HTMLについては、HTMLとは?これを読めば初心者でも必ずHTMLが書ける!をお読みください。divについてdivはHTMLのコードに範囲を指定したい時に使います。以下のようなHTMLのコードがあるとします。CSS</p>ここで、上記の文字の色を赤にしたい!と思った時に、<h1>と<p>別々にCSSで赤色を指定するのは二度手間な感じがしますよね?どうせなら一度にまとめて赤色を指定した方が、CSSの記述量も少なくて楽です。そのためには、<h1>と<p>を一つの「かたまり・グループ」と考えれば良いのです。そのような時にdivが使えます。以下のようにdivを記述することで、<h1>と<p>を1つのかたまり・グループとすることができます。CSS</p></div>【<h1>と<p>が一つのかたまり、グループとなった】classについてでは、classとは何なのでしょうか。これは、divに付ける名前だと考えてください。<div></div>で囲まれたHTMLのコードがたくさんあると、CSSを適用するときに、どこの<div></div>にCSSを適用すれば良いのかわからなくなります。(一口にdivと言ってもどのdivかの区別がつかない。)<div><h1>HTMLとは?</h1><p>CSSとは?</p></div><div><h2>Rubyとは?</h2><h3>PHPとは?</h3></div>【<div></div>同士で区別がつかない】そんな時に、div同士でも区別がつくようにするため、それぞれのdivにclass(名前)を付けてあげましょう。class=”付けたい名前”のように記述します。class=”sample2”><h2>Rubyとは?</h2><h3>PHPとは?</h3></div>【divにclassを与えたことにより、<div></div>同士での区別ができるようになった】これで2つのdivが区別できるようになりました。classの使い方を解説します。上記のHTMLコードにおいて、class名がsample1の<h1>と<p>の文字の色を赤にしたい時は、次のようにCSSを記述します。※CSSについては、CSSとは?これを読めば初心者でもCSSが書ける!をお読みください。【CSS】.sample1{color:red;}【結果】HTMLとは?CSSとは?ここで注意するポイントは、クラス名の前に「.(ドット)」が付くことです。これさえ気をつければ後はCSSを記述するだけです。idというのがあります。この違いも重要なので、しっかり覚えておきましょう。違いはとてもシンプルです。「classは同じ名前を1ページ中で何度でも使えるが、idは1ページ中に1度しか使えない。」これも具体例で解説していきます。class=”demo”><h2>Rubyとは?</h2><h3>PHPとは?</h3></div>【classは同じ名前を何回も使える】classは上記のように同じ名前(demo)を何回使っても問題はありません。idの具体例を見てみましょう。id=”demo”><h2>Rubyとは?</h2><h3>PHPとは?</h3></div>【idは同じ名前を2回以上使うことは出来ない】idは同じ名前を2回以上使うことは出来ません。【悪い例】のように、「demo」というid名を2回(以上)使うことはできないのです。demo2のように名前を変えることが必要です。classとidの違いについてはよくある疑問として挙げられるので、これを機にしっかり覚えておきましょう。classについて大体理解できたのではないでしょうか。udemyでもHTMLに関する講座を多数開設しています。学習してみてください。HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみようHTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。人気記事ランキングワードの罫線を完全マスター!「引く」「消す」「行間変更」を簡単に!office関連エクセルでヒストグラムを作成する方法。正しいグラフの分析とは?office関連ピボットテーブルの使い方!すぐ実践できて、仕事がサクサク進む!office関連エクセル初心者が最初に知っておきたい基礎知識。