質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

1136閲覧

idとclassの使い分けについて

anchor051100

総合スコア8

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2018/08/07 13:32

編集2018/08/07 14:05

コーディングをしている時に出てきた素朴な疑問なのですが、フロントエンドのidとclassの各プロパティって何のためにあるものなのでしょうか?
勉強し始めたばかりなので、わかる方ご教示お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/08/07 13:38

idとclass「など」となると範囲が一気に広くなります。タイトルとの相違もでてきてしまうので、どちらかに統一してください。また、調べればすぐ出てくる内容でもありますので調べた内容をもって、自身が得たもの理解した内容、わからないことを質問本文に記載すると回答を得やすくなります(teratail内にも似たような内容があるはずなのでそちらも参考に)
guest

回答4

0

idはページ内に同じものを2箇所以上に設定できないのにくわえて
おなじ要素に2つ以上のidを設定できないというのも重要なポイントです
一方クラスは同じクラスを使いませるのに加えて、
一つの要素に対して複数クラスを設定できます。

昔はCSSなどの指定なども直接タグを指定する以外idやクラス単位でしかできなかったのが
最近はカスタムデータ属性(data-*)が浸透してクラスで無理やりやっていたことが
そちらにシフトしてきています。
したがってクラスはマークアップする構造上の属性を指定する本来の用途に回帰しつつあります

カスタムデータのサンプル

CSS

1<style> 2[data-hoge=fuga]{color:blue} 3</style> 4<div data-hoge="fuga">hogehoge</div>

投稿2018/08/09 02:01

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

参考情報

  • CSS id と class の違いと使い分け

https://memo.itsysgroup.com/?p=1291

...
この id と class は、適当に使うのではなく、ちゃんとした設計思想があります(あるそうです。。。あると思います)。

そこで今回は、 id と class の違いと、その設計思想についてお話します。

...

  • 【必修知識】id と class の違いと使い分け方の基本

https://jill-tone.com/htmlcss_id_class/

...
HTML / CSS初心者の方が書いたページを見ると、idとclassの使い分け方が甘く、メンテナンスをしづらいことが多々あります。

idとclassの使い道には明確なルールと違いがあるので、まず基本をおさえてマスターしましょう。

結論からいえば、CSSによるデザインにはclassを使い、idはただの目印として使うと非常にメンテナンスが楽になります。
...

投稿2018/08/07 16:02

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

投稿2018/08/07 14:08

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

attributeway
id一意に決まる要素の識別に使う
classスタイルの使い回しに使う

Javascriptでできる範囲が広がった分,「プログラミング用」みたいな括りは考えなくてよくなった感じですね

大規模なアップデート以外で絶対に同じ機能・名称のものを作らない予定ならidを使い,
いろんなところで共通して使うスタイル・機能を付与したい場合はclassを使う,という感じで良いと思います

とりあえず,中規模のサイトを作りまくってみて,
どんな書き方をすればしっくりくるのか,研究してみてはどうでしょうか

投稿2018/08/07 14:29

liveasnotes

総合スコア1284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問