プロが教える店舗＆オフィスのセキュリティ対策術

ＣＳＳについて教えてください。ｉｄ，ｃｌａｓｓ

解決済

  • 質問者：kiokio5893
  • 質問日時：
  • 回答数：2件

<body>
<div class="style1" id="header">

<div id="logo"><img src="images/banner.gif" alt="見本1"/></div>

<ul id="globalNav">
<li><a href="index.html">見本2</a></li>
</ul>
</div>
<div id="contentWrapper">
<div id="content">
<div id="primary">
※参考書に上記の様な書き出し記述があるのですが、1.まず素人考えでコンテナの様な土台となるボックスはないと考えていいですか？
2.ｉｄがｄｉｖに包含されいくつも出てきますが，ｉｄは一つしか使用できないため慎重にって事は無いのですか？
固有を確定するために便利なのですか？
3.div classのあとｉｄが使われている様に思うのですが、ｃｌａｓｓにもｉｄは使えますか？？
的外れですみません

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1

  • 回答者： ORUKA1951
  • 回答日時：

そんな糞参考書なんて捨てちゃいなさい!!!断言します。


『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』と明記してあり、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 … )-- 他の要素がない時の最後の最後の手段として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://oshiete.goo.ne.jp/qa/8409414.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/CSS … )
　⇒6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　まず、HTMLではデザインの事は考えず、ひたすら文書構造だけを記述する。CSSはその文書構造を元にセレクタを書く!!
　が「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」の基本です。

　私も、仕様書が普及していない当時、マニュアルや参考書書いたことありますが、仕様書の邦訳が簡単に参照できるようになってからは手を出していません。だって、そこにすべて【正確に】書かれているのですからね。仕様書を読んでないか、無知でないと書けないです。その参考書を書かれた人も仕様書ろくに読んでないのがバレバレです。

class名は、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )名が良いです。意味や用途も含めて!!
　

この回答への補足

1.2.の質問につきましてはご回答により大分理解できてきました。あと理解できないのが取り囲む””
ダブルクォーテーションの意味を知りたいのですが（どうもパソコンの根幹の様ですが・・・）

補足日時：2014/01/05 00:26
通報する
    • good
    • 0
    • 件
通報する

No.2ベストアンサー

  • 回答者： zacky93141
  • 回答日時：

1 コンテナというものがどういったものをさすのかイマイチよくわかりませんが、テンプレートのようなものという意味でしょうか？


ページ構造という意味でのテンプレートなら、「html デザイン テンプレート」等で調べたら、参考になるかもしれません。

2 idは一つしか出てこない物に使う物です。
グローバルナビを1つのページに2つも表示したりはしないでしょう？
そういったものにはidを使うのが一般的です。

逆に例えば、「太字にして文字を赤くする」といったことを定義した場合、そのような表現は2度3度出てくる可能性があるため、classで定義します。

3
>classにもidは使えますか？？
これはもしかして、<class id="～"> みたいにするということでしょうか？
それはできません。
そもそもclassはidと同じくオプションでつけるものです。
<div id="～" class="～"> ならできますが。

この回答への補足

大分、理解できてきました。<div id="～">は分かるような気がしますが（入れ物として・・） <class="～"> の意味がもう一つ理解できません・・・出来れば教えてください

補足日時：2014/01/05 00:15
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報