- ベストアンサー
CSSについての基本的な考え方と使い方
- CSSの基本的な考え方として、要素に独自のスタイルを適用するためには、idやclassといった識別子を使用します。
- idは要素ごとに一意の値を持つことができ、複数の要素に同じidを設定することはできません。一方、classは複数の要素に同じクラスを設定することができます。
- classとidは同じ要素に共存することができ、それぞれ異なるスタイルを適用することができます。div要素内でclassとidを組み合わせて使用することも可能です。
- kiokio5893
- お礼率73% (141/192)
- レンタルサーバ・ASP
- 回答数2
- ありがとう数11
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
1 コンテナというものがどういったものをさすのかイマイチよくわかりませんが、テンプレートのようなものという意味でしょうか？ ページ構造という意味でのテンプレートなら、「html デザイン テンプレート」等で調べたら、参考になるかもしれません。 2 idは一つしか出てこない物に使う物です。 グローバルナビを1つのページに2つも表示したりはしないでしょう？ そういったものにはidを使うのが一般的です。 逆に例えば、「太字にして文字を赤くする」といったことを定義した場合、そのような表現は2度3度出てくる可能性があるため、classで定義します。 3 >classにもidは使えますか？？ これはもしかして、<class id="～"> みたいにするということでしょうか？ それはできません。 そもそもclassはidと同じくオプションでつけるものです。 <div id="～" class="～"> ならできますが。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんな糞参考書なんて捨てちゃいなさい!!!断言します。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と明記してあり、HTML5ではDIVは原則使わなくなります。 「Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )-- 他の要素がない時の最後の最後の手段としてDIVを使え!!」 また、headerは、その文書のheaderと言う意味ですから、他の文書を内包する場合、当然headerは複数回現れます。 body header h1 p section h2 section h3 article header section footer footer という構造はありうるはずです。 また、globalNavはともかく、logoも複数回ありうるし、contentWrapperやcontent、primaryなんて文書構造のためとは思えないですね。 <body> <div class="header"> <h1>見出し</h1> <div class="nav"> <ol> <li><a href="index.html">見本2</a></li> </ol> </div> </div> <div class="section"> <h2>本文見出し</h2> <div class="section"> <h3>項見出し</h3> </div> <div class="section"> <h3>項見出し</h3> <div class="article"> <div class="header"></div> <div class="section"></div> <div class="footer"></div> </div> </div> <div class="aside"> 本文と直接関係ない記事 </div> </div> <div class="footer"> </div> </body> とHTMLを書いたほうが良いのは、誰が見ても分かる。メンテナンスが容易な事は容易に想像できます。 HTML5だと <body> <header> <h1>見出し</h1> <nav> <ol> <li><a href="index.html">見本2</a></li> </ol> </nav> </header> <section> <h2>本文見出し</h2> <section> <h3>項見出し</h3> </section> <section> <h3>項見出し</h3> <article> <header></header> <section></section> <footer></footer> </article> </section> <aside> 本文と直接関係ない記事 </aside> </section> <footer> </footer> </body> になります。これが『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』の意味です。 id、CSSでは一意セレクタになりますが、これは詳細度がとても高く[0,1,0,0]ですので、スタイルの使い回しが難しくなります。classや属性セレクタだと[0,0,1,0]です。 idは、リンクゆjavascriptのターゲットなど限定して使用するほうがHTMLもスタイルシートも楽になります。 先日回答した CSSについての質問ですが、左右のサイズ - Webデザイン・CSS - 教えて！goo( http://okwave.jp/qa/q8409414.html ) のNo.4のHTMLとCSSをご覧になると、class名とidがそのように使用されていることが分かると思います。class="nav"ですから、複数個所を同時に指定できます。 1.まず素人考えでコンテナの様な土台となるボックスはないと考えていいですか？ その文書にheader,section,footerしかないなら、それをまとめるDIVなんていりません!! 2.ｉｄがｄｉｖに包含されいくつも出てきますが，ｉｄは一つしか使用できないため慎重にって事は無いのですか？ idは、リンクやjavsccriptのターゲットにならないのでしたら不用、煩雑になるだけです。 3.div classのあとｉｄが使われている様に思うのですが、classにもidは使えますか？？ 質問の意味が分かりません。 <div class="nav" id="siteMap"></div> <div class="nav" id="contentTable"></div> なんてのは、当然存在します。 div.nav{詳細度0,0,1,1}で両方統一したデザインにして、一方だけ#siteMap{詳細度0,1,0,0}で上書きしてしまうことも出来ますし、div.header div.nav{}、div.section div.nav{}と登場した場所で指定することも出来ます。 ⇒5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) ⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) まず、HTMLではデザインの事は考えず、ひたすら文書構造だけを記述する。CSSはその文書構造を元にセレクタを書く!! が「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」の基本です。 私も、仕様書が普及していない当時、マニュアルや参考書書いたことありますが、仕様書の邦訳が簡単に参照できるようになってからは手を出していません。だって、そこにすべて【正確に】書かれているのですからね。仕様書を読んでないか、無知でないと書けないです。その参考書を書かれた人も仕様書ろくに読んでないのがバレバレです。 class名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )名が良いです。意味や用途も含めて!!
補足
1.2.の質問につきましてはご回答により大分理解できてきました。あと理解できないのが取り囲む”” ダブルクォーテーションの意味を知りたいのですが（どうもパソコンの根幹の様ですが・・・）
補足
大分、理解できてきました。<div id="～">は分かるような気がしますが（入れ物として・・） <class="～"> の意味がもう一つ理解できません・・・出来れば教えてください