<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.idがdivに包含されいくつも出てきますが,idは一つしか使用できないため慎重にって事は無いのですか?
固有を確定するために便利なのですか?
3.div classのあとidが使われている様に思うのですが、classにもidは使えますか??
的外れですみません
No.2ベストアンサー
- 回答日時:
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:15No.1
- 回答日時:
そんな糞参考書なんて捨てちゃいなさい!!!断言します。
『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がdivに包含されいくつも出てきますが,idは一つしか使用できないため慎重にって事は無いのですか?
idは、リンクやjavsccriptのターゲットにならないのでしたら不用、煩雑になるだけです。
3.div classのあとidが使われている様に思うのですが、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.の質問につきましてはご回答により大分理解できてきました。あと理解できないのが取り囲む””
ダブルクォーテーションの意味を知りたいのですが(どうもパソコンの根幹の様ですが・・・)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- Ruby No route matches [GET] "/posts/5/destroy" 1 2022/03/24 13:00
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
複数のボタンを等間隔に、かつ...
-
divを横に並べる方法
-
min-heightとheightの違いについて
-
スペースを使わず文字位置を揃...
-
[CSS]リキッドレイアウト上で、...
-
h1のテキストサイズよりh2の方...
-
HPの外側の両サイドにある広告...
-
1時間30分を簡単に表したいで...
-
cssにてボタン位置を下揃えしたい
-
モバイルサイト用のタブ型メニュー
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
background-imageが効かない
-
3カラムレイアウトで「常に残り...
-
html5でheader,footerこみのwra...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
スペースを使わず文字位置を揃...
-
1時間30分を簡単に表したいで...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
hタグの右横に画像を表示
-
divを横に並べる方法
-
インラインフレームのページ内...
おすすめ情報