HTML5で乗り物カテゴリーをマークアップする方法について
- HTML5のマークアップには、<section>や<div>、<h2>、<h3>などの要素を活用することができます。
- 質問の文章では、乗り物のカテゴリーをマークアップするために<section>と<h2>を使用しています。
- パターンBのマークアップはパターンAよりも正しいと言えます。div要素を使用することで、<h3>をインデントすることができます。
- ベストアンサー
Section、div、Hタグについて
以下文章をHTML5でマークしようと考えています。 <マークしようとしている文章> ・乗り物カテゴリー ・自転車 ・車 ・電車 <自分でHTMLにしてみました。> ・パターンA <section><h2>乗り物カテゴリー</h2></section> <div class="blockA"> .<section><h3>自転車</h3><h3>車</h3><h3>電車</h3></section> </div> ・パターンB <section><h2>乗り物カテゴリー</h2> <div class="blockA"> <section><h3>自転車</h3></section> <section><h3>車</h3></section> <section><h3>電車</h3></section> </div> </section> マークアップはパターンBのほうが正しいと思うのですが 合っていますでしょうか？(divは、H3をインデントするために使用) ご教授お願いします。
- ShiftTail
- お礼率80% (423/528)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
いずれも根本的に間違っています。sectionやdiv sectionは、それが目次の項目としてリストアップされるような文書集合に使用し、通常は見出し[ひとつだけ]を伴います。 ★4.4.2 The section element ( http://www.w3.org/TR/html5/the-section-element.html#the-section-element ) <section>の中に複数の見出しは入りません。入れるときは<hgroup>を使用します。 また、class名は独自のものを使わないように・・ <body> <header> <h1>見出し</h2> </header> <section> <h2>・・・</h2> <section id="transportationList"> <h3>乗り物</h3> <section id="bicycle"> <h4>自転車<h4> <p>・・・</p> </section> <section id="automobile"> <h4>自動車</h4> </section> <section id="train"> <h4>電車</h4> </section> </section> </section> <foooter> </footer> ★HTML5では、見出しレベルはHに付く数字ではなく、sectionの階層レベルになります。 4.4.6 The h1, h2, h3, h4, h5, and h6 elements ( http://www.w3.org/TR/html5/the-h1-h2-h3-h4-h5-and-h6-elements.html#the-h1-h2-h3-h4-h5-and-h6-elements ) 上記のように、階層にしたがってh1→h6を使用するか、すべてh1を使うことが推奨されています。すべてh1を使うほうがメンテナンスは楽になります。 ＞(divは、H3をインデントするために使用) は禁止です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 注。 CSSではclass属性が非常に大きな力を持っている。 したがって文書作成者は、体裁に殆ど何の関係も無い要素（HTMLだとDIV要素やSPAN要素など）をベースにして、それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計できると考えられる。 しかし、文書の構造要素は広く受け入れられている一般的意味を持つ場合が多いので、こういった使用法は避けるべきである。 文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )］より ★HTML5は現状では使わないほうが良いです。未勧告ですからまだまだ変更があります。使う場合はHTML5を理解できない古いIEのためにjavascriptなどでの対応が必要です。 HTML4を使って、 <body> <div class="header"> <h1>見出し</h2> </div> <div class="section"> <h2>・・・</h2> <div class="section" id="transportationList"> <h3>乗り物</h3> のようにしておくほうが良いでしょう。<doctypeを変更すれば・・・そのままHTML5でもあるし。
関連するQ&A
- html5 sectionタグのアウトライン
html5でsectionタグでワードのアウトラインの様に、 インデントし段違いに表示させることが可能だということは知っています。 ただ、sectionタグを連続で書いただけでは、 段違いに表示させることが不可能だということもわかりました。 CSSで、段違い表示させることが可能だとは わかったのですが、CSSにどのように記述すれば 段違いにできるのかわかりません。 ご教授願えないでしょうか よろしくお願いします。 ==HTML5== <body> <h1>大見出し1-1</h1> <section> <h1>中見出し2-1</h1> </section> <section> <h1>中見出し2-2</h1> <section> <h1>小見出し3-1</h1> </section> <section> <h1>小見出し3-2</h1> </section> </section> <section> <h1>中見出し2-3</h1> </section>
- ベストアンサー
- HTML
- hタグを使わずに小見出し
hタグは h1,h2,h3,h4 の順に書くべきだと分かってはおりますが、 例えば以下のように、大きいコンテンツの中でh2ブロック→h3ブロックと続き、 h2ブロックは、いわゆるコンテンツの中の序章です。 その際、序章の中の小見出し（<●●●>部分）のタグはどうするのが適当でしょうか。 <h2>の中にいきなり<h4>は変ですよね。 <h2>の中の見出しも<h3>でしょうか？ そうした場合、<h2>の中にある<h3>と後から出てくる<h3>ブロックが 同レベルだと認識されてしまいませんでしょうか。 それとも<p>、<strong>、<div>等が適当でしょうか？ -------------------------------------- <h1>第1の見出し</h1> <div id="contents"> <div class="section"> <h2>第2の見出し</h2> <●●●>第2に関連する小見出し</●●●> <p>テキストテキストテキスト</p> <●●●>第2に関連する小見出し</●●●> <p>テキストテキストテキスト</p> </div> <div class="section"> <h3>第3の見出し</h3> <p>テキストテキストテキスト</p> <h3>第3の見出し</h3> <p>テキストテキストテキスト</p> </div> </div> -------------------------------------- 検索してもみたのですが「hタグは順番通りに書くべし」といった記事ばかり引っかかり うまく見つけられませんでしたので、ここに質問させていただきます。 また、分かる方には基本なことかもしれませんが、 私も一応調べ、それでも分からなく質問しておりますので 「こんなこと基本的なこと」や「もっと勉強しろ」等の 攻撃的な文言は避けて頂きたくお願いします。
- ベストアンサー
- CSS
- IE7で見出しタグ(hタグ)をみるとずれる
サイトを作成してIE7で躓いてます。 <div class="box"> <div class="top"></div> <div class="mid"></div> <div class="under"></div> </div>と <div class="box">で囲みtopとmidとunderで3等分してます。 <div class="top">をpddingで上部を10px幅をあけてます。 中に<h3>の見出しタグを入れてます。 IE8以降 クローム Firefox では10px分の幅の後に、<h3>タグが入ります。 IE6はアンダースコアハックしました。 IE７ですと<div class="top">で設定したpddingが無視されて<h3>との間に空白ができません。 IE7でも他のブラウザと同じように表示されるようにするにはどうしたらよいでしょうか？ 検索で探してみたものの見つからなかったので解決法または、解決法が記載してあるサイトを教えていただけますでしょうか？ よろしくお願いいたします。 ■test.html <div class="box"> <div class="top"> <h3>■■■■■</h3></div> <div class="mid"> ●●●この部分は文章の長さで伸びます●●●● </div> <div class="under"> </div> </div> ■CSS body{ font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 75%; line-height: 2; color: #333333; margin: 0px; padding: 0px; } h1 h2 h3 h4{ padding:0; margin:0;} .top{ width: 690px; height:70px; color:black; background: url(img/top.gif) no-repeat; padding:10px 30px 0 30px; } .mid{ width: 690px; min-height: 200px; color:black; background: url(img/mid.gif) repeat-y; padding:0px 30px 0 30px; } .under{ width: 690px; height: 20px; color:black; background: url(img/under.gif) no-repeat; } h3{ line-height: 20px; color:blue; font-size:17px; }
- ベストアンサー
- レンタルサーバ・ASP
- 画像はDIVタグとPタグの両方で囲むの？
クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか？ ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>～</div>に文章はありません。 同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2（見出しタグ？）で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか？ すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか？ 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。
- 締切済み
- HTML
- タグとタグの間が空、をなくしたい。
テキストに直接HTMLを打ち込みながら制作しています。 HTMLのチェックをしたところ、「<DIV> と </DIV> の間が空」という注意が表示されたのですが、どのように空要素をなくすのがスマートなのでしょうか？ 独学で制作していたため、色々間違っている部分が多くあるかと思いますが、ご指導のほどよろしくお願いします…！ 現在下記のようなパターンで使用していました。 1 <h2>○○○○○○○</h2> 2 <p>○○○○○</p> 3 <p>○○○○○</p> 4 <div style="margin-top:50px;"></div> 5 <h2>○○○○○○○</h2> 6 <p>○○○○○</p> 7 <p>○○○○○</p> やりたかったこと＝ それぞれのh2の間に少し広めの空きを作りたかった。 divの空要素を書き込んだ理由＝ pにmarginを指定するとpとpの間にまで空きができてしまう h2にmarginを指定すると、一番最初のh2の上が空きすぎてしまう と言った理由からでした。 この場合、それぞれのh2の間に少し広めの空きを作るにはどうしたらいいのでしょうか？3行目のpにclassを指定すればいいのでしょうか…。 それともbr等で指定ができるのでしょうか？ 空きをbrで記述した時も、あまり連続してbrを記入したらチェックで指摘されて困っています。 どうぞよろしくお願いします！
- ベストアンサー
- HTML
- 【CSS】CSSでh1タグに背景を指定し、画像の中の任意の場所に文字を書き込みたいのですが、うまくいきません
【質問】CSSでH1タグに背景を指定し、画像の中の任意の場所に文字を書き込みたいのですが、上下に余計な空白ができてしまい困っています。 【狙い】高さ32pxの3枚の画像ABCを縦につなぎ合わせた、高さ96pxの一枚の画像(=***)をCSSでH1の背景にし、H1の内容に応じてHTML上でclassを変えて、背景をAにしたりBにしたり変えられるようにする。 【コード】 CSS h1 {height: 32px;background-image: url(***);} .a h1{background-position: 0 0;} .b h1{background-position: 0 -32px;} .c h1{background-position: 0 -64px;} .a,.b,.c{margin: 0;padding: 0;} /*-↓画像のタテの中心に文字を並べるためにpaddingをとります-*/ h1 .subject{padding-top:9px;margin: 0;} HTML <div class="b"> <!--←A,B,Cに画像を切り替えます。//--> <h1><div class="subject">助けてください（ T＿T）</div></h1> </div> 【現状】 IE7 H1の下に余計な空白ができてしまいます。 FireFox3 H1の上下に余計な空白ができてしまいます。 どうすればよいのでしょうか？どこを修正すればよいのでしょうか、また 代替案があれば教えてくださるとありがたいです。
- ベストアンサー
- HTML
- h1～ｈ6要素の背景色が範囲外までなってしまう
見出しの要素の背景色を「#ddffdd」にしたところ、<h3>～</h3>の部分だけでなく<p>～</p>の部分まで背景色が適用されてしまいました。 背景色は、見出し要素（h1～h6）にしか指定していないのですがなぜでしょうか？ 回答よろしくお願いします。 ソースは一部省略していますが、次の通りです。 ■HTML <div class="kukaku4"> <h3>■説明</h3> <p>文章1<br />文章2<em>重要</em>。</p> </div> ■CSS h2, h3 { color: blue; background-color: #ddffdd; }
- ベストアンサー
- HTML
- WordPressの各ページにh1を作りたい
ここ数日、行き詰まっています。どうしても解決ができなく、 ご教示頂けませんでしょうか。 何卒よろしくお願い申し上げます。 現在、WordPressテーマのヘッダーphpに条件分岐でH1をつけようと取り組んでいます。 今できていることは、 ・トップページのh1表示 ・投稿、固定ページにカスタムフィールドにh1を作り、それぞれのページに表示 ・カテゴリー、タグの一覧ページへの表示 ・お知らせの一覧と詳細ページへの表示 できていないこと ・通常の投稿のアーカイブページへの表示 ・製品カテゴリーで設定した名前での一覧ページ(アーカイブ)への表示 となります。 もともとのテンプレートには、製品紹介用のカスタム投稿タイプが用意されていました。 管理画面上のメニューでは、 製品紹介 －新規追加 －製品カテゴリー となっています。 できていないというのは、この製品カテゴリーのところになり、 WordPress Codexの条件分岐タグページを見ながらいろいろ組み替えたり したのですが、どうしてもうまく表示することができないでおります。 ソースは以下のようにしています。 <?php if(is_front_page() && is_home()): ?> <div class="area-h1"> <h1>トップページのh1は表示されています。</h1> </div> <?php elseif(is_category()): ?> <div class="area-h1"> <h1>カテゴリー:<?php single_cat_title(); ?>で表示されています。</h1> </div> <?php elseif(is_tag()): ?> <div class="area-h1"> <h1>タグ:<?php single_tag_title(); ?> で表示されています。</h1> </div> <?php elseif(is_post_type_archive( 'news')): ?> <div class="area-h1"> <h1>お知らせ一覧に表示されています。</h1> </div> <?php elseif(is_singular( 'news')): ?> <div class="area-h1"> <h1><?php the_time('Y'); ?>年<?php the_time('M'); ?><?php the_time('d'); ?>日のお知らせで表示されています。</h1> </div> <?php elseif(is_post_type_archive( 'product')):?> <div class="area-h1"> <h1>商品一覧に表示されました。</h1> </div> <?php elseif(is_singular( 'product')): ?> <div class="area-h1"> <h1><?php echo get_post_meta($post->ID , 'h1' ,true); ?>で商品ページに表示されました。</h1> </div> ※ここから下が分かりません。 <?php elseif(is_archive()): ?> <div class="area-h1"> <h1><?php the_time('Y'); ?>年<?php the_time('M'); ?>の記事一覧、通常投稿のアーカイブページ</h1> </div> ↑ どちらか一方しか有効でない ↓ <?php elseif(is_archive( 'product')): ?> <div class="area-h1"> <h1><?php single_cat_title(); ?>製品カテゴリー毎のアーカイブページ？</h1> </div> <?php endif ; ?> その他に試したもの (1)<?php elseif(is_tax( 'product')): ?> <div class="area-h1"> <h1><?php single_cat_title(); ?>製品カテゴリー毎のアーカイブページ？</h1> </div> (2)<?php elseif(is_category( 'product')): ?> <div class="area-h1"> <h1><?php single_cat_title(); ?>製品カテゴリー毎のアーカイブページ？</h1> </div> ここ数日、ずっとできないでおりまして、 おかしなところなどアドバイスを頂けましたら本当に助かります。 何卒よろしくお願い申し上げます。
- 締切済み
- PHP
- CSSのDIVというモノがいまいち分かりません。
HTMLもおぼつかないまま、四苦八苦しながらCSSの勉強をしています。その中で出てくるDIVというセレクタはどの様な特性を持つのかが、よくわかりません。HTML文書の最初にCSSを定義しなくても、途中からいきなりCSSを定義できてしまう、というものなのでしょうか？色々なサイトや本を読んでみるものの理解できません。ついでにSPANとの違いも分かりません。 それからCSSについて説明されている文章を読むとたとれば“H1”や“P”等のセレクタの次に「属性」「値」を定義するとありますが、すべてセレクタを“class”にしてしまうのは良くないのでしょうか。なにぶん初心者の為、分かりづらい文章になっているかとは思いますが、何卒ご教授ください。
- ベストアンサー
- その他（プログラミング・開発）
- 条件付きで要素を取得したい
条件付きで要素を取得したい 次のようなHTMLで、divのclassが「b」内のh2の要素が「ccc」の場合のdivのクラスが「d」の要素を取得したいのです。 つまり下の例では、「111」と「333」を取得したいです。 queryにどのように記述すれば良いのでしょうか？ $document =<<<EOF <div class=a> <div class=b> <h2 class=c>ccc</h2> <div class=d>111</div> </div> <div class=b> <h2 class=c>ccc[a]</h2> <div class=d>222</div> </div> <div class=b> <h2 class=c>ccc</h2> <div class=d>333</div> </div> </div> EOF; $xpath = new DOMXPath($document); $xpath->query('ここの記述が知りたい');
- ベストアンサー
- PHP
