プログラミング入門ナビ

HTMLにけるid属性とclass属性の使い分けについて、プログラミング初心者向けに説明します。

この記事は、オンラインプログラミング学習講座「Webエンジニア入門総合コース」サポート記事です。

動画を使って学習する

チャンネル登録もよろしくお願いします。

id属性

Webページ内に一つしかないものにはid属性をつかって、固有のID名をつける

フレンチ

注意：同じWebページ内で、同じID名を複数箇所でつかうことはできません。

NG例

パスタ

ピザ

リゾット

class属性

同じWebページ内に、複数箇所で同じ役目をもたせたいものには、class属性をつかってクラス名をつけます。

パスタ

ピザ

リゾット

事例

イタリアンレストランのメニュー

料理にはfood、ドリンクにはdrinkのクラス名
コーラにはcokeという固有のID名をつける

• • • • 濃厚バーニャカウダ

     

     

• • • • 魚介類のマリネ

     

     

• • ソーセージの盛り合わせ

• • コーラ

• • ジンジャーエール

• • 烏龍茶

idが使える場合はidの利用を検討する

「class属性だけ使えば、良いのでは？」と思われた方もいらっしゃると思います。

実際にclassだけをつかってもエラーになることはありませんので、間違いではありません。

しかしながら、idは、Webページ内に一つという特徴があるため、「わかりやすさ」「メンテナンス性」の点で有利です。

基本的には、Webページ内に一つしか無いものにはid属性をつけるようにしましょう。

おわりに

この記事では、HTMLにおけるid属性とclass属性の使い分けについて説明しました。

「Webエンジニア入門総合コース」では、データベースの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって学習できます。

Web開発に必要なプログラミングスキルを1つのコースで沢山学べてお得です。264レクチャー・18時間の大型コースとなっています。

内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する