- 締切済み
html5のマークアップについて
html5を勉強しはじめてまだ１週間くらいですがサイトを作成しています。 ただ正しいのか曖昧な感じで作成しており、詳しい方々にご教授頂ければと思います。 ★サイト構成サンプル画像 http://test.infinity-design.info/sample.png ■長くなりますが構成の説明 (1)基本的に外部へのリンク（他店舗へのリンク等） ⇒メインコンテンツほど重要な役割ないが、当サイトと関連はあるので、<aside>タグを使用。 (2)ページヘッダー部分⇒<header>を使用 ⇒ロゴ部分は見栄えの関係で<div>で、ロゴ画像は<h1>タグを使用 ⇒ロゴ下のナビ（グローバルナビ）⇒主要リンクなので<nav>で構成。 グローバルナビ下のエリア ⇒SEOテキスト部分<h2>タグで構成（<h2>じゃなく<p>が適切かも？） ⇒その右横のリンク（ローカルナビに相当のため）、<nav>で構成。 (3)レイアウト構成のため外枠を<div id="maincont">で構成。 ⇒パン屑部分、主要リンクのため<nav>で構成。 http://www.html5.jp/html5doctor/nav-element.html (4)ここ一番悩んでます、 コンテンツの内容によって適切なタグが変わってくると思いますが、今回は主に下記を加味して構成してみました。 http://www.html5-memo.com/new-element/aside/ ⇒メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表します。 http://design.kayac.com/topics/2010/12/post-42.php http://www.html5.jp/html5doctor/aside-revisited.html ⇒メインのコンテンツほど重要な役割を持たないコンテンツだけれども、それがページや記事に関連しているなら、ビジュアル・デザインの有無にかかわらず、aside が適切。 以上の２点を中心に考えてみました、 後はどこかで、「<aside>としてる部分を削除してもメインコンテンツが成り立つか？」という文面もどこかで見た気がしますが。 (7)は除いて考えると、外枠全部を<aside>で構成することできると判断し<aside>で構成しました。 上記の構成は正しいか？自分で自信がありません。 外枠を<div>にするか迷っている理由ですが、 http://design.kayac.com/topics/2010/12/post-42.php の、「ページや記事と関係ない物をサイドバーに置く事も考えられます(特に広告など)。 ページや記事と関係ない物を置く場合は、サイドバーをdivで囲ってコーディングしたほうが良いと思います。」というやつの例ですが、 全体を<div>に変更し広告部分も<div>となっています、が、これは外を<div>にし、<section>前を<aside>で囲ってはダメなのでしょうか？ あくまで例なのですが.. 様はサイドバーに配置されているコンテンツで、サイト（ページ）に全く関係ない広告（レンタルサーバーの広告とか？）を載せている場合、 全体は<div>で囲む必要がでてくる（絶対divという訳じゃないですが）？、 その他のコンテンツは<aside>として成り立つか上記の考え方で加味し、 適切なら適時<aside>で囲む、じゃなければその他のタグで構成ということになると思うのですが・・どうでしょうか？ 今回のサイトの様に左カラム全体が上記加味し<aside>として成り立つならば、 大枠を<aside>として囲み、配置しているコンテンツは適時適切なタグで構成するとなると思うのですが・・ (8)メインコンテンツ部分ですが、外枠は<div>で構成しました。 ⇒キャンペーンバナー（ライトボックス表示だったり、キャンペーン専用ページに遷移等） ⇒ニュース記事 フィードとして成り立つと考え<article>で構成、中身は記事となるため<section>により構成、 当エリアはスクロールで記事が何個か見える感じになります。 (9)⇒今月の新商品一覧 外枠を<div>か<section>で構成。レイアウトで<div>が必要な場合に限り、 <div> <section>とする感じになります。必要なければ<section id="XX">を大枠に。 (10)⇒当店のシステムについて 中身はさらに各セクションで分ける事ができるので、各セクション毎に分けて構成しました。 (11)フッター部分のため<footer>で構成。 長文、乱文ですいません、html5に詳しい方々。是非ご教授ください。
- eruruna634
- お礼率0% (0/3)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
長文失礼。 どのHTMLタグを使えばよいかというのは、国語（言語学、Markup "Language"）の問題だと思っています。 ですから正解というのはないと思いますし、制作者次第で変わると思います。 回答が付かないのは、「どちらが良いか」というのは作者が決めることだからであり、 「文法というルールにおいて「してはいけない」があるかどうか」しか答えられないからだと思います。 HTML4/XHTMLでよく言われていますが、 テーブルを使って○○を作りましたが、これはいいですか？という質問に対しては、 「テーブルレイアウトでなければ何でも良い」としか答えられません。 文法上は、テーブルレイアウトでもいわゆるDIV病でも全く問題ないから、倫理・論理面でしか答えられないのです。 <h2>朝の挨拶</h2> <ul> <li>おはよう</li> <li>おはようございます</li> </ul> <table><tbody> <tr> <th rowspan="2">朝の挨拶</th> <td>おはよう</td> <td>おはようございます</td> </tr> </tbody></table> 上記、どちらが良いかというのは、これは箇条書きになり得ない、表になり得ないというのがあればともかく、 私は、どちらにもなり得るから、どちらを使っても良いと思います。 強いて言えば、<table>非対応の携帯で見たとき（表示上は<td>が<p>と同じになる）や、 <h1-6>だけを抽出したアウトラインが取れるかどうか、ですが、 アウトラインを取らせたければ前者、アウトラインを取らせたくなければ後者。 文法と関係ない話だと思います。 ><section>前を<aside>で囲ってはダメなのでしょうか？ 「asideが必要と思うのなら必要、不要と思うなら不要」 と思います。 文法上はどちらも可能です。 前回（他BBSにて、下記URL参照）<sidebar>だと答えましたが、 これは<aside>ではなく<sidebar>に当たると考えたからです。 <sidebar>の中で、<aside>に相当する部分に<aside>を付ければ良いというのが、私の考えです。 <sidebar> <section> 月別リンクや自社製品紹介（自社製品広告）など、自サイト内リンク </section> <aside> リンク集やアフィリエイト広告など、外部リンク </aside> </sidebar> あくまで「私の考え」ですから、 <sidebar>ではなく全部を<aside>にするのも正解だと思います。 <aside> <section> ・・・・ </sction> <section> ・・・・ </sction> </aside> それ以外について。 前回（下記URL参照）、もう一人の回答を受けて、<div>はどうやらHTML4の<div>と異なり、「デザインを目的としたタグ」と考えた方が適切ではないかと思います。 たとえば、枠線を2重にしたいから、 <div style="border-color:blue"><ul style="border-color:red"> というような。 枠線を1重にするだけなら、<ul>に枠線を付ければいいですから、わざわざ<div>を付ける意味はないと思います。 <body><div id="wrapper">も同様、<body>にスタイルを付ければいいですから、wrapperの意味がないと思います。 ・「<div id=""><ul>」の部分は、<ul id="">で事足りるのであれば、<div id="">を削除。 デザイン上で必要なら<div id=""><ul>のまま。 ・<aside>内の<div>を<ul><li>（等、その他）に書き換え。 ・残りの<div>を全て<section>に書き換え。 -------- > http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1059444085 この機会に。 >もしくは、<hgroup><img><h1>・・</h1></hgroup>でしょうか。 これは文法違反でした。 <h1-6>に<img>を（論理的に）入れられるかは、alt属性が<h1-6>に相当するかどうかで判断しています。 OK <h1><img src="logo.png" alt="今月の新製品"></h1> ロゴに関するページならNG NG <h1><img src="logo.png" alt="ロゴ"></h1> ロゴに関するページならOK
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML5は、HTML4.01から大幅に改定されましたが、基本的な考え方は変わっていません。 あなたの一番の誤解は、HTML4.01以降のHTMLの基本的スタンス--文書構造を示すマークアップと、プレゼンテーションであるスタイルシートを混同していることです。 HTMLはあくまで文書解析木をきちんとマークアップすること、それには仕様書を地震で読む必要があります。他人の解説や素人の解説を聞くよりよほど早く目的の情報が得られるでしょう。HTML5の優れた邦訳は私も知りませんが W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP ( http://www.html5.jp/trans/w3c_differences.html ) などがあります。わからなければ原文をあたればよい HTML5 differences from HTML4 ( http://www.w3.org/TR/html5-diff/ ) 幸いにHTML4.01には HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) がありますから、それを読んだ上で HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ ) が理解しやすいかも。 とすると >(2)ページヘッダー部分⇒<header>を使用 >⇒ロゴ部分は見栄えの関係で<div>で、ロゴ画像は<h1>タグを使用 >⇒ロゴ下のナビ（グローバルナビ）⇒主要リンクなので<nav>で構成。 はおかしい。 見栄えではないです。内容です。見出しにロゴを使用するなら <h1><img src=" alt="【見出し】"></h1> とすればよい。あるいは <h1>【見出し】</h1> として、スタイルシートで画像をおくべき >グローバルナビ下のエリア >⇒SEOテキスト部分<h2>タグで構成（<h2>じゃなく<p>が適切かも？） >⇒その右横のリンク（ローカルナビに相当のため）、<nav>で構成。 これも同様です。SEOの基本は文書構造に従った正しいマークアップです。(注:SEO対策という言い方は「馬に乗って乗馬する」と同じ) グローバルであろうとローカルであろうとナビゲーションリストは<nav>です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Sections — HTML5( http://www.w3.org/TR/html5/sections.html#the-nav-element )］より ナビゲーションバーの要素は、ページのセクションを表している「他のページ」または「ページ内の部分」へのリンクと書かれている。 以下同様の誤解がたくさんあるようです。 まず、プレゼンテーションと文書構造を切り離して文書構造にしたがってマークアップすること。その上でスタイルシートでプレゼンテーションを指定し、足らなければdivなりspanを追加すればよい。 Texの考え方や、XMLの考え方も必要かなと思います。
- abacabu
- ベストアンサー率37% (250/663)
趣味でWEBページ作りをしている30代男です。 これは…参考サイトの羽田野 太巳 氏にメール等でご相談する様な 案件の様な気がします。 理由としましては、HTMLというのは、プログラム言語ではないですが プログラム言語同様に、1つの事をするのに複数の正解、 複数の構築の仕方があります。正解が1つではないという事です。 HTML５を使ってのマークアップですので、新しく増えたタグに関しては その参考サイト（私も拝読してます）でWEBブラウザ側に認識させる JavaScriptが載っていました。 それを挿入して初めてIEで認識されます。 現状はまだまだIE８だとおもわれますし、普通のユーザーさんは それ以前のバージョンのブラウザをお使いだと思われます。 IE８では、HTML５を認識できないといっても過言ではないです。 対応してませんから。（参考サイトの情報を私的な解釈） 従って、IE８、firefox、safari、の現状のバージョン以前への対応 も含めて参考サイトより対応してゆけば問題ないと思います。 参考サイトの管理者様はかなりのプロの様ですがそういう方でさえ タグの使用にかんしては悩んでおられるというくらい、まだまだ 一般的に「これ」といった使い分けの方法が確立されていないものと 思われます。 当然その参考サイトをみながら、参考にしてWEBページを作成して 行く場合、少なくてもCSS、JavaScriptの知識は必要不可欠です。 逆に言うと今まではFlashやシルバーライトで行っていたものを JavaScriptによって表現できるようになるということで、 色々な意味でJavaScriptが必要な気がします。 ついつい素人のうんちくを書いてしまって申し訳ありません… 質問とURLをみたところ、WEBデザイナーさんなのかな？と思われますが こう言うかなり突っ込んだ質問はなかなか回答が得られない状態だと 私は考えます。（結構専門分野の突っ込んだ話題には回答が付かない） あとこれはその他プログラミングとかの方が無難な気がします。 といいますのもHTMLカテを見る様な人は恐らく私の様なタイプの人間かな？ とおもいますから。 たま～にかなり専門的な突っ込んだ回答をされる方もいらっしゃるには いますがなかなか… 恐らくWEBデザインを独学で色々追求している人（私もそうですが（全然無知ですが））は HTML、CSS、JavaScript、perl、PHP、Ajax等あげればきりが無いですが、 それらを全て含めて覚えようと努力しています。 WEBデザインでは基本分業制のようですが、一般WEBサイトを作るユーザーはそうです。 他に頼れる人がいないです。 殆ど知っているであろう知識で申し訳ないのですが、ご参考になれば幸いです。 良回答が来る事をお祈りしております。
