Language)を記述する時、『id』と『class』をきちんと使い分けていますか?はなこHTMLを記述する時に、『id』や『class』を定義することがあるでしょ。あの2つって、いったい何が違うのかな?CSSでスタイルを指定したい時に使うよね。違いについては僕もよく把握していないな。はなこ『id』と『class』の違いについて、ちょっと調べてみたいわね。今回は、CSSでよく利用する『id』と『class』の違いを見て、その使い分け方について解説します。スポンサーリンク【CSS】『id』と『class』の違い『id』と『class』は、CSSとHTMLをペアにしてよく使われる属性のひとつです。24px;と表示されます。HTMLの1行目は『id』に"font12"を指定しています。CSSの上側、"#font12"で定義されたフォントサイズ12で出力されています。HTMLの2行目は『class』に"font24"を指定しています。よって、CSSの下側、".font24"で定義されたフォントサイズ24で出力されるということですね。どちらも、CSSの定義に従って、HTMLで指定された部分のスタイルを変更するという仕組みは同じです。『id』と『class』の違いはどこにあるのでしょうか?『id』と『class』の主な違いは、次のようになります。同じ『id』名をHTMLの中で複数指定することはできないが、同じ『class』名のタグはいくつあってもよい。『id』の方が、『class』よりも優先度が高い。定義する時の記号が異なることは、先ほど説明したとおりですね。『id』を定義するときは、#[id名]のように指定します。特定のタグにだけ指定したいときは、[タグ名]#[id名]になります。それに対して、『class』を定義するときは、.[class名]とします。特定のタグだけに指定する場合、『id』と同じように[タグ名].[class名]とすればいいわけですね。同じ『id』名が複数指定できないのに対し、同じ『class』名はいくつでも指定できるという点です。HTMLの中で、タグに同じ名前の『id』を2つ以上付けることはできません。それに対して『class』の場合は、複数のタグに同じ名前を指定することができます。『id』はタグに付ける固有名詞を意味しますが、『class』はタグの種類を意味します。固有名詞ですから、『id』はひとつしか指定できないわけですね。『id』は、『class』より優先されます。『id』と『class』の両方が指定されていた場合は、『id』のスタイルが使用されます。はなこ『id』と『class』の違いはなんとなく分かったわ。【CSS】『id』と『class』の使い分け方スクリプト『id』と『class』は、どのように使い分ければいいでしょうか?まず、スタイルを定義する時、すべてに『class』を使っても問題はありません。その場合は、全てのタグでclass="[class名]"と指定することになりますね。ある『class』名が一度しか使われなかったとしても、問題はありません。一度しか使わなくても『class』を利用することはできるからです。『id』属性は不要なのでしょうか?『id』を利用する例のひとつに『内部リンク』があります。『内部リンク』とは、同じページの中にリンク先があり、その場所へジャンプすることです。文章に対してページの一番下に補足が書かれている時、本文からその補足へジャンプできると便利ですよね。そのような場合に『内部リンク』を使います。『内部リンク』は、次のように記述することで実現できます。href="#hosoku">補足へ</a>ジャンプ先には次のように書いておきます。id="hosoku">補足です。</div>このときに利用するのが『id』です。同じ名前のリンク先が複数あるなんてことはないですよね。同じ名前の『id』を複数指定することはできません。『id』は、他にもJavaScriptの中で特定のタグに対してスタイルを動的に変更したいときなどに使われます。同じタグのスタイルを一度に変換したい場合は『class』を使いましょう。内部リンクやスクリプトでの動的変更など、ピンポイントの指定には『id』を使いましょう。スポンサーリンクまとめ今回の違いのポイントを、まとめていきましょう。ポイント『id』は、"#"で定義し、『class』は"."で定義する。同じ『id』名をHTMLの中で複数指定することはできないが、同じ『class』名のタグはいくつあってもよい。『id』のほうが、『class』よりも優先度が高い。同じタグのスタイルを一度に変換したい場合は『class』を使う。内部リンクやスクリプトでの動的変更など、ピンポイントの指定には『id』を使う。『id』と『class』は、実は役割が大きく異なります。それぞれの違いをよく認識して正しく使ってくださいね。関連記事TwitterSharePocketHatenaLINEコピーする-ITの違いauthorあわせて読みたい2019/12/22スプレッドシートとエクセルの違いをわかりやすく解説!機能は同じ?『エクセル』といえば、仕事でもプライベートでもよく使うアプリケーションの代表ですよね。そんなことは考えたことなかったな。同じようなものだとは思うんだけど。はなこ『スプレッドシート』と『エクセル』の違いについて、調べてみたいわね。今回は、『スプレッドシート』と『エクセル』の違いについて解説します。...2019/10/8WPSとMicrosoftOfficeの違いをわかりやすく解説!機能をチェック!オフィス業務に欠かせないオフィス・スイート。ワープロや表計算ソフト、プレゼンテーション資料作成などのソフトウェアがパッケージになったものを指します。Office』を使っているんだけど、あれって結構高いでしょ。家でも使いたいと思っているんだけど、買おうかどうか迷っているの。それなら、互換性のある他の製品を探すといいよ。Office』の『アカデミック版』が購入できると聞いたことがあるわ。いくつかの制限はあるみたいだけどね。Office』の『通常版』と『アカデミック版』の違いについて解説します。...2019/10/22Wi-FiとBluetoothの違いをわかりやすく解説!速度や仕組みをチェック『Wi-Fi』も『Bluetooth』も、身近でよく使われている無線技術で、今ではなくてはならないものになりました。あれって無線の一種よね。僕も詳しいことは分からないんだ。無線マウスとか無線キーボード、イヤホンにも使われているよね。はなこどこに違いがあるのか気になるわね。今回は、『Wi-Fi』と『Bluetooth』の仕組みについて調べ、その違いを解説します。『Mac』も『Windows』も、パソコンには欠かせないものですね。はなこ私は家では『Mac』を使っているけど、仕事では『Windows』ね。僕は家でも仕事でも『Windows』だな。はなこたまに、訳がわからなくなることはあるわね。どちらかに統一したほうが楽なんだけどね。今回は、『Mac』と『Windows』について調べ、その違いについて解説します。...2019/12/17ラクマとフリルの違いをわかりやすく解説!手数料は変わった?今ではたくさんの人が利用するようになったフリマアプリ、いろいろな会社がサービスを行っています。今は『ラクマ』に変わっているよ。名前が変わったんだから、いろいろと違いもあるんじゃないのかな。はなこ『ラクマ』と『フリル』の違いについて、調べてみたいわね。今回は、『ラクマ』と『フリル』の違いについて解説し、手数料が変わったのか見てみましょう。コメントをキャンセルメールアドレスが公開されることはありません。いう話が、よくありますよね。職場のOA機器、DVDやCDはもちろん、家具や家電なども、借りて使う人が増えています。...2叔父と伯父・叔母と伯母の違いをわかりやすく解説!覚え方をチェックお正月やお盆、結婚式や法事などで親戚が集まると、自分の親の兄弟姉妹とも会ったりしますよね。親の兄や弟は『おじ』、姉や妹は『おば』と言います。床に広がる色や柄で、部屋の雰囲気がかなり変わるんですよね。...4契約社員と正社員の違いをわかりやすく解説!収入や待遇をチェック最近では、働き方もかなり多様化していますよね。『社員』だけ考えてみても、以前は『正社員』がほとんどでした。それが現在では、『契約社員』として働く人も、珍しくなくなっています。