【HTML５】セクションを示す要素の使い分け
HTML、CSSを勉強中の者です。 HTML５のセクションを示す要素（section・article・aside など）をどのように使い分けるべきなのかいまいちわからず、質問させていただきました。様々なサイトで調べてみたのですが、サンプルを見るとどれも微妙に定義が違っているように見受けられ、理解が曖昧です。あまり詳しくないサイトだと、単純にヘッダー部分はheader要素、フッター部分はfooter要素、タブメニューなどはnav要素、リンクなどはaside要素、そしてメインとなるコンテンツ部分はsection要素、といったことしか書かれていませんでしたが、別のサイトにはsection要素の中にarticle要素やaside要素が入ってくると書かれており、「？？？」という感じです。例えばですが、添付した画像のようなサイトの場合は、下記の考え方で合っているのでしょうか？ header・・・ヘッダー（オレンジ） nav・・・タブメニュー（薄青） section・・・タイトル（緑）、コンテンツ（濃青） article・・・記事（黄色） aside・・・サブメニュー（紫）、リンク（ピンク） footer・・・フッター（薄赤）また、section要素やarticle要素の中にarticle要素やaside要素が入ってくる、というのはどのような場合でしょうか。最初のうちにきちんと使い分けを覚えたいと思いますので、よろしくお願いします。
- ベストアンサー
- HTML
HTML5について
HTML5を勉強した方がいいと言われたので、ちょっと検索して下のサイトを見つけました。そこのセクションのところの要素についてお聞きします。 http://www.html5.jp/tag/elements/index.html 質問１セクションのところのheaderとfooterがあります。これは<div "id=header">とかしていたものが専用の要素に置き換わるということでしょうか。質問２上記の場合、headerとかfooterとかは大きなブロックですよね？ h1～h6も同じところにありますが、これはp要素と同じコンテンツのグループ化の方ではないですか。
- ベストアンサー
- HTML
HTML5の記述について
現在、HTML5について勉強をしているのですが、下記サンプルコードが間違っているのではないかと思います。サンプルコードでは、途中にsectionタグでarticleタグを囲っている部分があります。今回の場合、articleタグでsectionタグを囲ったほうがいいのではないでしょうか？様々なサイトを見て回ってこのように感じたんですが、自分の見解が合っているかがわかりません。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf8"> <title>おかずまみれ</title> </head> <body> <header> おかずの部屋 <nav> ホームリンク集プロフ </nav> </header> <section> 今日のおかず <article> おいしいおかず 25 おかず25のレシピ </article> </section> <section> 新着!おかず!! <article> おいしいおかず 01 おかず01のレシピ </article> <article> おいしいおかず 02 おかず02のレシピ </article> </section> <aside> おかず本がいっぱいおかず本 1 おかず本 2 おかず本 3 </aside> <footer> このサイトは xxxxxによって運営されています。 </footer> </body> </html>
- ベストアンサー
- HTML
HTML5をCSSでレイアウトする場合
section 　articleといった新しい要素をCSSのfloat等でレイアウトするのは間違いなのでしょうか？いろいろと調べてみましたが、sectionを使ったレイアウトは駄目で、divでレイアウトするとか… また、article aside nav 等をCSSでカラムレイアウト解説をしているサイトもありました… また、Q&Aサイトで <div id="article_1"> <article> …………… </article> </div> のようなsampleで、わざわざ無駄なことをせずにhtml5の新しい要素でレイアウトしましょう…？ <article id="article_1"> …………… </article> と言うような回答もありましたが… 確かに、HTML5でWEBページ作成をするのに、レイアウトは<div>でネストするのは意味がないように思いますが… よりよい方法を教えてください。m(_ _)m
- ベストアンサー
- HTML
HTML5でサイドバーのメニューが、左に移動しない
いまHTML５とCSSを使って勉強しているのですが、サイドバーを右側にFloatしたいのですが、google Chrome確認しても実行されません。私の記述ミスだと思うのですが、何度見直しても原因がわかりません。わかる方にご教授願います。・htmlソース <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 L20 Step 1_1</title> <link rel="stylesheet" href="※CSSのリンク張ってます" type="text/css" media="all"> <style>/* CSS */</style> <script>/* JavaScript */  </script> <noscript> JavaScript が非対応になっています。 </noscript> </head> <body>  <header id="header"> <h1>Web開発室ブログ</h1> <nav> <ul> <li><a href="#hoge">最新の投稿</a></li> <li><a href="#hoge">アーカイブ</a></li> <li><a href="#hoge">開発者向け</a></li> <li><a href="#hoge">お問い合わせ</a></li> </ul> </nav> </header> <section id="main_section"> <article class="contents"> <header> <h2>なぜHTML5が次のWeb開発スタンダードになりえるのか</h2> <p> 開発プロジェクトリーダー太郎 <time datetime="2010-10-01T14:39">October 1st, 2010 at 2:39PM</time> </p> </header> <p> HTML4.01が世の中に発表されてから、HTML規格の外側で様々なアイデアやシステムが試行錯誤されてきました。結果、複数の団体が「Webの基準」を目指してアイデアやシステムの営業に躍起になっていました。つまりHTMLは、基本的なぶぶんでは「業界標準」でしたが、求められる装飾や細かな部分については機能不足だったのです。 </p> <aside> <p> スマートフォンのブラウザはパソコンのブラウザよりも意図的にHTML5の仕様に対応しています。 </p> </aside> <p> 機能不足が指摘されていた「装飾」の部分について、HTML5は大きな一歩を踏み出しました。オーディオやムービーをHTML5の機能だけで実現できるように拡張し、本来の利用方法とは違った使われ方をしていた様々な要素に対する解決策を打ち出しました。 </p> <footer> <p><a href="#"><i>25 コメント</i></a>...</p> </footer> </article> </section> <section id="sidebar"> <nav> <h3>アーカイブ</h3> <ul> <li><a href="2010/10">October2010</a></li> <li><a href="2010/9">September2010</a></li> <li><a href="2010/8">August2010</a></li> <li><a href="2010/7">July2010</a></li> <li><a href="2010/6">June2010</a></li> <li><a href="2010/5">May2010</a></li> <li><a href="2010/4">April2010</a></li> <li><a href="2010/3">March2010</a></li> <li><a href="2010/2">February2010</a></li> <li><a href="2010/1">January2010</a></li> </ul> </nav> </section> <footer id="footer"> <p>©2010 パソコン教室</p> <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="about">About</a></li> <li><a href="terms.html">サービスの条件</a></li> <li><a href="privacy.html">プライバシーについて</a></li> </ul> </nav> </footer> </body> </html> ・CSSソース @charset "utf-8"; /*START：ページのコンテンツを中央に配置し、フォントも設定*/ body{ width:960px; margin:15px auto; font-family:Arial,"MS Trebuchet",sans-serif; } /*END：ページのコンテンツを中央に配置し、フォントも設定*/ /*START：基本的な設定*/ p{ margin:0 0 20px 0; } p,li{ line-height:20px; } /*END：基本的な設定*/ /*START：ヘッダの幅を定義*/} header#header{ width:100%; } /*END：ヘッダの幅を定義*/ /*START：ul要素リンクを水平ナビゲーションバーに変換*/} header#header nav ul,#footer nav ul{ list-style:none; margin:0; padding:0; } #header nav ul li,footer#footer nav ul li{ padding:0; margin:0 20px 0 0; display:inline; } /*END：ul要素リンクを水平ナビゲーションバーに変換*/ /*START：main_sectionセクションは左寄せにして幅を調整*/} /*aside要素内の吹き出しも調整*/ section#main_section{ float:left; width:74%; } section#main_section aside{ float:right; width:35%; margin-left:5%; font-size:20px; line-height:40px; } /*aside要素内の吹き出しも調整*/ /*END：main_sectionセクションは左寄せにして幅を調整義*/ /*START：サイドバーを整列させ、幅も調整*/ section#sidebar{ float:left; width:25%; } /*END：サイドバーを整列させ、幅も調整*/ /*START：フッタをページの一番下に設置*/ footer#footer{ clear:both; width:100%; display:block; text-align:center; } /*END：フッタをページの一番下に設置*/
- ベストアンサー
- HTML
2カラムのレイアウト
2カラムのレイアウトにおいて、HTMLの記述部分において。【例1】コンテナーの「★外」に、フッターがある場合と。・「コンテナー(コンテンツ+サイドバー)」・「フッター」【例2】コンテナーの「★中」に、フッターがある場合。・「コンテナー(コンテンツ+サイドバー+フッター)」があるように思いますが? ★どっちでもいいんでしょうか? (どっちも、同じレイアウトになるんでしょうか?　そんな感じがします。)　 ^^ HTML/CSS　初心者なもので。。。よろしくです。　^^ ---------------------------------------------------------------- 【例1】 <div id="container"> 　　<div id="contents">　本文 </div>　　　<div id="sidebar">　サイド部分 </div> </div>　 　<div id="footer"> 　　<p>著作権</p> 　</div>  【例2】 <div id="container"> 　　<div id="contents">　本文 </div>　　　<div id="sidebar">　サイド部分 </div> 　<div id="footer"> 　　<p>著作権</p> 　</div>  </div>　
- ベストアンサー
- HTML
HTML5コメント欄の<article>について
現在HTML5でブログテンプレートをコーディングしています。その中で、<article>について調べるとコメント欄にも<article>を使うと良い、といった記述をよく見かけます。導入しようと思ったのですが、私のサイトは3カラムの幅固定floatで構築してありソースの記述順序上、メインカラムの中にコメント欄が入りません。簡単に構造を書くと <div id="wrapper"> <div id="main"> //メインカラム～～ </div> <div id="left"></div> <div id="right"></div> <div id="comment"></div> </div> こんな感じになっており、#main,#left,#rightの3つをfloatさせて横並びにしています。このサイトバー2つを"div#comment"の下にしてしまうと3カラムが崩れてしまいます。 (勉強不足かもしれませんが、どうCSSで弄ってもコメント欄より上にサイドバーが上がらなくなります) なので、<article>でメインカラムを囲みたいのですがコメント欄が<article>に入らない。かといって、<article>で全体を囲むとサイドバーまで<article>に含まれてしまう、という状況です。このような状況の上で、コメント欄を<section>で括り、コメント1件1件を<article>で括るのは間違いでしょうか？ http://www.w3.org/TR/html5/sections.html#the-article-element ここにあるコード例ではまず<article>で記事全体を囲み(コメント欄も含み) コメント欄にきたら<section>に入り、<article>で1件1件を囲っていますね。その<article>に<hn>タグがないことが疑問に思わせた発端なのですが恐らく、<article>内<article>は親の<article>(記事全体)に関連した独立コンテンツ、という名目があるので <hn>タグをつけていないのだと思われます。だけど私の場合、<article>でまず記事があって、それとは離れてコメント欄があり記事<article>とは親子関係のない<section>の中に<article>が来ることとなります。これが合っているのかどうか、調べてもよく分からなかったので質問させて頂きました。どなたかご教授宜しくお願い致します。
- ベストアンサー
- HTML
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に詳しい方々。是非ご教授ください。
- 締切済み
- HTML
ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。それほど複雑な構成ではないシンプルなタグ構造だと思います。ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
Dreamweaverのh1についておしえてください
Dreamweaverのh1についておしえてください。 Dreamweaverの付属のテンプレートを見たら、ヘッダーにh1を使い、コンテンツにもh1が使用されているのですが、h1は1ページ1回と認識していたのですが、ヘッダーとコンテンツなら大丈夫なのでしょうか？ CSSは、下記のようになっています。 <body class="thrColHybHdr"> <div id="container"> <div id="header"> <h1>見出し</h1> </div> <div id="sidebar1"> <h3>sidebar1 コンテンツ</h3> <p>省略。 </p> <p>省略 </p> </div> <div id="sidebar2"> <h3>sidebar2 コンテンツ</h3> <p>省略 </p> <p>省略 </p> </div> <div id="mainContent"> <h1> メインコンテンツ </h1> <p>省略 </p> <p>省略 </p> <h2>H2 レベルの見出し </h2> よろしくご指導お願いします。
- 締切済み
- ホームページ作成ソフト

HTML5のsection,articleについて

ORUKA1951の回答

お礼 2011/09/01 14:18

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

HTML5のsection,articleについて

ORUKA1951の回答

お礼 2011/09/01 14:18

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

カテゴリ
一覧

専門家に質問してみよう
専門家登録