- ベストアンサー
HTML５セクション要素の使い分けについて
ORUKA1951の回答
＞例えば、・・・【中略】・・・直接的にサービスには関わらないけれど載せたい記事は、・・・【中略】・・・独立した記事（article）として見なす、という認識で大丈夫でしょうか。 その場合は、asideのほうがよい場合もあるでしょう。asideだと、googleはたぶん無視する。articleだと拾っていく。 このあたりの使い分けは、内容と製作側の意図も絡むでしょう。 ＞ナビゲーションといわれるとそのHPのタブなどのメニューのみ、 navはページ内の目次も含みます。必ずしもウェブサイト内や他のページへのリンクではない。 逆にfooter内に書く簡単なリンクはnavで囲うべきではありません。footer自体にすでに意味があるので・・
関連するQ&A
- HTML5のsection,articleについて
１．sectionについて h2とh2に関する記事pがある場合 <section> -<h2></h2> -<p></p> </section> でいいですよね？h2はsectionの外・・・ではないですよね？ （<div id="section">的に使う） 2.article/asideについて <article> -コンテンツ -<aside>関連ないもの</aside> </article> みたいに「article内」でasideを使い除外していいのでしょうか？ （<div id="container">的に使う） 3.全体として <article id="container"> -<h1></h1> -<aside> --<header></header> --<nav></nav> -</aside> -<section> --<h2></h2> --<p></p> -</section> -<aside> --<footer></footer> -</aside> </article> ではどうなんでしょうか？ header/nav/footerを除外するかどうか h1をロゴ・会社名にせず、サイト上部の１行文にするべきか そこらへん調べたのですが納得できるはっきりしたものがないので、よろしければご回答願います
- ベストアンサー
- 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について
HTML5を勉強した方がいいと言われたので、 ちょっと検索して下のサイトを見つけました。 そこのセクションのところの要素についてお聞きします。 http://www.html5.jp/tag/elements/index.html 質問１ セクションのところのheaderとfooterがあります。 これは<div "id=header">とかしていたものが 専用の要素に置き換わるということでしょうか。 質問２ 上記の場合、headerとかfooterとかは大きなブロックですよね？ h1～h6も同じところにありますが、 これはp要素と同じコンテンツのグループ化の方ではないですか。
- ベストアンサー
- 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 */ <!-- window.alert("Web開発室ブログ"); //--> </script> <noscript> JavaScript が非対応になっています。 </noscript> </head> <body> <!--Web開発室ブログ--> <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
- 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
- CSSでfloatした要素の高さを100%にしたい
はじめまして。 下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。 この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。 heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。 以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html>
- ベストアンサー
- CSS
- 【HTML】タブメニューの中身となる要素について
HTML、CSSについて勉強中の者です。 タブメニューによってコンテンツ部分を切り替えるようなサイトがありますが（参考：http://hyper-text.org/archives/2013/05/css_only_tab_ui.shtml）、ほとんどのサイトで、中身となるコンテンツ部分は、全て同じHTMLファイルに記述しているように見受けられます。 コンテンツ部分がそこまで内容的に大きくないものであれば問題ないかと思うのですが、コンテンツ部分で少し複雑な処理をさせる場合などは、どうされているのでしょうか。 iframe要素をコンテンツ部分に入れて、別ファイルを呼び出すような書き方をするのが一般的なのか、あるいはどれだけ長くなろうとも全て一つのHTMLファイルに書いているのか、 もしくは全く別の方法で書かれているのか…。 皆さんがどうされているのか、教えていただきたいです。
- 締切済み
- HTML
- HTML5の<section>要素について
HTML5で追加された<section>要素ですが、皆様使っていらっしゃいますか？ 勉強する過程の中で解説書や解説サイトを調べると、<section>を使う用例としてはブログ記事があげられることが多いです。 ブログのテンプレートを作るなら、納得できるのですが、それ以外のサイトではあまり使わないような気がしています。 見出しを含む一節を囲みたいデザイン等の場合にはdivの代わりとして使えそうな気もしますが、サイトによっては「見た目のために使うのならdivを使え」とあります。 ならば、<section>はどのようなシーンで使えばいいのでしょう？ ただ単に、節や章の塊を明示化するためなのであれば、それをすることで何かメリットはありますか？また、やらないことでのデメリットはあるのでしょうか？ 「そういうルールになったんだからやらなきゃいけない」と言われてしまえば、そうなのかもしれませんが、ずっとモヤモヤしているので、具体例があると嬉しいです。 よろしくお願い致します。
- ベストアンサー
- 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
- CSSによるデザインの切り替えに際して
HTML、CSSについて勉強中の者です。 HTMLで文書構造を書き、複数のCSSでデザインを切り替える、ということを勉強しているのですが、例えばあるCSSではnav要素とarticle要素（更新情報のお知らせ欄）をheader要素に入れるのに対し、別のCSSではnav要素のみをheader要素に入れ、article要素はsection要素内に表示させたい、となった場合、同じHTMLを使用することは難しいのでしょうか。 CSSである要素にある要素を入れるということはできるのか、できない場合は諦めてそれぞれHTMLを作成するべきなのか悩んでいます。 HTML側で全要素をそれぞれdiv要素にしてしまえばできるのかも？と思うのですが、それでは正しい文書構造にはならないと思いますので、あまり考えてはいません。 お詳しい方がいらっしゃれば、教えていただきたいです。
- 締切済み
- CSS
お礼
お礼が遅くなりました。すみません。 慣れれば悩まずに使えるようになるのだと思いますが、現時点では難しいですね。 自分なりにもう少し調べてみます。 ありがとうございました。