• ベストアンサー

htmlのid属性って必要なの？

今、html・cssを勉強しているのものです。 htmlのid属性って何のためにあるのでしょうか？ id属性がなくても、class属性だけで、コーディング出来ると思うのですが。 そう、考えているとidって必要なのかな？ と思ってきましたので。 もし、ご存じの方がいらっしゃいましたら、教えて頂けませんでしょうかm(__)m

  • CSS
  • 回答数7
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

HTML,CSS--大文字です。それぞれ <abbr title="Hypper Text Markup Language">HTML</abbr> <abbr title="Cascading Style Sheet">CSS</abbr> ですね。 それぞれ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから id = name [CS] 　　　この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければなら 　　ない。 class = cdata-list [CS] 　　　この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を 　　設定する。 幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当て 　　できる。複数のクラス名については、空白文字によって区切らねばならない。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id )］より 　山本太郎がIDで、３年Ｂ組がクラス名です。 ＞id属性がなくても、class属性だけで、コーディング出来ると思うのですが。 　スタイルシートを書くためでしたら、ID--CSSでは[一意セレクタ]---どころか、class---CSSではクラスセレクタ---も必要ありません。 　その意味だと、classでさえ不要ですよ。 　下記に簡単なサンプルを上げておきます。 　IDは、その文書中のひとつの要素を特定するために使用します。HTML4以降はリンクターゲットとして使われます。また、javascriptの対象ターゲットとしても使われます。 　classは、その文書中の複数の要素をグループ化するために使用します。 　そして、いずれも主たる目的は『　⇒id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-DIV )』です。 　すなわち、<div class="header">文書のヘッダ</div><div class="section">文書の本文</div>など・・ 　このように、要素自体、要素相互間の関係、要素のid,要素のclass,要素の属性などを活用してスタイルを指定することが出来ます。 ★IDは[文書構造を保管すると同時に文書中の特定の場所を指定し]リンクやスクリプトのターゲットとして使うのが主目的でスタイルにも使える。 ★classは、文書構造を補完し、それを利用してスタイルでの指定が行える。 　なお、要素セレクタ(擬似要素含む)の詳細度はひとつ当り[0,0,0,1]、属性セレクタ,クラスセレクタ(擬似クラス含む)は[0,0,1,0]、一意セレクタ(HTMLの要素)は[0,1,0,0]、スタイル属性での指定は[1,0,0,0]になりますから、それを使うと簡単に指定できます。 [サンプル]IDもclassも一切書いてありません。 ★HTML4.01strict+CSS2.1 　Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) 　W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) ★タブは＿に置換してあるので戻すこと。 [HTML]Shift_JIS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} div{padding:5%;background-color:aqua;height:200px;} div+div{background-color:lime;height:auto;min-height:400px;position:relative;} div div{margin-left:20%;background-color:white;min-height:100px;} div+div+div{background-color:yellow;min-height:200px;position:static;} div div+div{background-color:white;position:static;} div ul{width:20%;height:100%;position:absolute;top:0;left:0;background-color:fuchsia;line-height:2em;text-align:center;margin:0;padding:0;} div ul,div ul li{display:block;list-style-type:none;} div ul li{display:block;width:80%;margin:10px auto;position:relative;} div ul li a{display:block;width:100%;height:100%;border:outset 3px gray;} div ul li a:active{border-style:inset;} div ul li a[href="#A"]{background-color:red;} div ul li a[href="#B"]{background-color:rgb(255,160,0);} div ul li a[href="#C"]{background-color:rgb(255,255,0);} div ul li a[href="#D"]{background-color:rgb(160,255,0);} div ul li a[href="#A"]:hover{background-color:rgb(255,100,100);} div ul li a[href="#B"]:hover{background-color:rgb(255,200,100);} div ul li a[href="#C"]:hover{background-color:rgb(255,255,100);} div ul li a[href="#D"]:hover{background-color:rgb(200,255,100);} --> ＿</style> </head> <body> ＿<div> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div> ＿＿<div> ＿＿＿<h2><a name="A">一章見出し</a></h2> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<div> ＿＿＿<h2><a name="B">二章見出し</a></h2> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<div> ＿＿＿<h2><a name="C">三章見出し</a></h2> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<div> ＿＿＿<h2><a name="D">四章見出し</a></h2> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<ul> ＿＿＿<li><a href="#A">一章</a></li> ＿＿＿<li><a href="#B">二章</a></li> ＿＿＿<li><a href="#C">三章</a></li> ＿＿＿<li><a href="#D">四章</a></li> ＿＿</ul> ＿</div> ＿<div> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

kaori2012
質問者

お礼

>HTML,CSS--大文字です。それぞれ ご指摘ありがとうございます。 頭の悪い私には、 ORUKA1951さんのせっかくのご説明が難しい(*_*) リンクターゲットとjavascriptのターゲットになると言うことですね。 とりあえず、サンプルを実際にコーディングしてみますね。 ありがとうございました。

その他の回答 (6)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.7

本題から外れますが ＞やはり、これからHTMLを勉強するなら、HTML5を覚えていったほうがいいですよね？ 　そのまえに、HTML4.01strict(transitinalやframesetじゃない)とCSS2.1を完璧にマスターしましょう。 　HTML5については、 　⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff ) 　を先読みしておいたら、HTML4.01のどこが未完だったかが分かります。それを頭に入れてHTML4.01をマスターするほうが早いです。

kaori2012
質問者

お礼

ありがとうございます。 HTML4.01、CSS2.1からですね(^^♪ 頑張って勉強します ありがとうございました(^_^)/~

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.6

　No.2,No3です。元々の質問が「id属性がなくても、class属性だけで、コーディング出来ると思うのですが。」とこの掲示板が「Webデザイン・CSS 」ですので、スタイルシートについての質問だと判断して回答しました。 　スタイルシートにとって、最も重要なのはカスケーディングですが、--カスケーディング( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade )を理解していないとＣＳＳ(カスケーディングスタイルシート)が使いこなせません。 　⇒6.4 カスケード処理（The cascade）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade ) 1．対象の要素とプロパティに適用される宣言をすべて検索し、宣言に付随するセレクタ 　が対象の要素とマッチすればその宣言が適用される。 2．宣言の最初のソートは、優先度及び出所によって行う。 　ユーザーの最重要宣言＞著者の最重要宣言＞著者の通常宣言＞ユーザーの通常宣言＞ブラウザのスタイル 　@import規則が存在するスタイルシートと同じ出所であると扱う。 3．次に詳細度によるソートを行う。 　ここで 　★スタイル属性の詳細度は1,0,0,0 　★一意セレクタ(HTMLのID属性)の詳細度は0,1,0,0 　★属性セレクタ・クラスセレク・擬似クラスの詳細度は0,0,1,0 　★要素セレクタ・擬似要素セレクタの詳細度 0,0,0,1 　★全称セレクタ・HTMLの属性による指定は 0,0,0,0 でしたね。 　※上記仕様書はCSS2.0ですが、CSS2.1ではスタイル属性の詳細度が上記のように変更になりました。 　この仕組みを知っていると質問の答えが見えてきますね。 1) classもidも無くてもスタイルは指定できる。 2) classやidを利用するとスタイルシートが書きやすくなる。 　それがNo.2の回答の意味です。 　それと合わせて、classやidはHTML内の要素を特定、あるいはグループ化して文書構造を補完するのが本来の目的だということを知っていれば、wraperとかleftどの変なclass名やidをつけることはなくなるし、合わせてHTMLもスタイルシートも分かりやすく簡潔になると言うことです。

kaori2012
質問者

お礼

お礼が遅くなってしまい、すいませんm(__)m いつもご丁寧に教えてくださり、ありがとうございます。 私は、まだまだ勉強不足なところが多いので、焦らずにじっくり勉強していきたいと思います。 ありがとうございました。

  • shockatz
  • ベストアンサー率80% (153/191)
回答No.5

id属性が必要か否かは、HTMLをどう使うかによるでしょう。 表示するだけなら、CSS的にみても、多重定義できるclassのほうが絶対有利です。 最近流行の、Twitter Bootstrapperのような「CSSフレームワーク」などでも、表示に限っては、id属性はいっさい使われていません。 しかしHTMLは通常の電子文書だけでなく、動的に表示を変えたり、インターフェースに使われたりと、広い範囲で使われるため、javascriptやサーバサイドで「DOMオブジェクト」を操作することになり、要素を特定できるid属性は必須です。 今どきの「仕事」レベルでは、単純表示だけの完全静的Webコンテンツなどあり得ないので、徹底的にid要を使っています。

kaori2012
質問者

お礼

お礼遅くなり、申し訳ございません。 「DOMオブジェクト」私にとってまた新しい言葉が出てきました(^_^;) もう少しHTML・CSSを勉強したらjavascriptも勉強したいと思います。 ありがとうございました。

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.4

JavaScriptなんかで超使いますよ 特定の要素を指定する時idほど分かりやすいものはありません Classなんかは基本的に複数要素を対象とするものです

kaori2012
質問者

お礼

JavaScriptを使わなければ、id属性は特とくに必要ないと言う事になってしまうのでしょうか？

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

No.1さんの回答でちょっと気になったので、No.1さんには申し訳ありませんが補足しておきます。 divやspanにidやclass名をつけて文書構造を示すのは、No.2で回答したとおりです。しかし、このHTML4.01の説明は抽象的で、id名やclass名に期待とは異なるものが多く使われてきました。すなわちwraper,left-menue,mainなどが典型的なものです。 　その反省から、HTML5では文書構造を示すために新たな要素が追加されました。 <div class="header">→<header> 　記事のヘッダ <div class="section">→<section> 　記事の本文・・必ず <div class="footer">→<footer> 　記事のフッタ <div class="article">→<article> 　ヘッダ・本文・フッタを持つと期待される完結した【記事】 　^^^^^^^　　　　^^^^^^ <div class="figure">→<figure> 　絵に限らず挿絵的要素 <div class="aside">→<aside> 　本文と関係ない記事 などです。 したがって <body> 　<header></header> 　<section> 　　<section></section> 　　<article> 　　　<header></header> 　　　<section></section> 　　　<footer></footer> 　　</section> 　　<aside></aside> 　</section> 　<footer></footer> </div> のようなマークアップになるでしょう。 　⇒4.4.4 The article element( http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element ) 　したがって、headerは、ひとつの文書内に一箇所とは限定されません。(ひとつの記事内には一箇所であるべきです)。 　たとえばブログ記事などを引用するような場合にarticleをたくさん使うことがありますが、そのような場合はたくさんheaderでマークアップすべき構造が現れます。よってclassで指定するほうが良いでしょう。 <div class="header" id="TOP"> 　<h1>ページのタイトル</h1> が良いでしょう。 　そうすると、いたずらに詳細度が高い一意セレクタを使わずにすみます。

kaori2012
質問者

お礼

ORUKA1951 さん 補足のご説明ありがとうございます。 やはり、これからHTMLを勉強するなら、HTML5を覚えていったほうがいいですよね？ HTML4.01の時と比べると、難しく感じてしまいます^^;

  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.1

ただCSSを使う分には、たしかにどっちでも同じ効能です。 そこだけを気にするならidは重複して使えない分classでいいじゃんとなります。 ただ、べつにCSSだけで使うもんじゃないですから違いがあるわけです。 一番顕著なもんでいえば、JavaScriptなりなんなりでいろいろ指定するなら、基本一意に要素を固定できるID使います。 エレメント指定するのに一意ではないclassを使うのは不便です。 対象classを指定すればいいじゃん、とも思うかもしれませんが、そもそもclassは複数存在することが前提の属性です。 何番目の要素を選択するか、等をコーディングすることもできますが、要素の数が変わったらJavaScriptも書き換えです。やってられないしミスの基です。 classを動的に書き換えるにしても不便極まりないです。 W3Cとしては、一意に名前を指定できる要素のIDと、一意ではないClassは使い方をきちんと分けてほしいと考えているようです。 ○　<div id="header"></div> ×　<div class="header"></div> BODYにヘッダが二つある文書というのは普通ないですよね。 なので、ヘッダ部分はIDにするべきだ、ってことらしいです。

kaori2012
質問者

お礼

お礼遅くなりました。 JavaScriptと関係してくるのですね。 私は、まだJavaScriptは手を付けたことがないので^^; もっと勉強して、JavaScriptも勉強したいと思います。 ありがとうございましたm(__)m

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する