- ベストアンサー
sectionとarticleの使い分け
sectionはh1などの見出しをいれないといけないと聞きましたが、見出しになる場所にテキストを入れたくない(たとえば画像のみ)の場合はどうすればいいのでしょうか。 また何個かsectionでかこんだものがトータルでブログの記事だった場合それをarticleで囲むということなのでしょうか。 参考書を見てもsectionとarticleの使い分けがわかりません。 だれか教えてください。よろしくおねがいいたします。
- みんなの回答 (2)
- 専門家の回答
関連するQ&A
- HTML5のsection,articleについて
1.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をロゴ・会社名にせず、サイト上部の1行文にするべきか そこらへん調べたのですが納得できるはっきりしたものがないので、よろしければご回答願います
- ベストアンサー
- HTML
- article、section、hgroup?
HTML5にある<article>、<section>、<hgroup>の3つのタグの使い分けに困っています。 普通に書いたら下記のように3つのタグが並ぶと思います。 <section><article><hgroup> <h1>本文</h1> <h2>タイトル</h2> <h3>日時</h3> </hgroup></article></section> CSSでどのタグを指定しても同じ装飾になります。 この3つのタグが無意味にしか感じられません。 h1~h6はhgroupで囲む。1つの括りで扱える情報なのでarticleが付く。 そして1つのセクションとしてのまとまりなのでsectionが付く。 けれどCSSでどのタグに装飾しても同じ。 こんな3つもタグを並べる意味はあるのでしょうか? 前回の質問: SEO的に最も良いh1~h3指定順位とは? http://okwave.jp/qa/q7730062.html 前日の質問: Webサイトにスライディングサイドバーを設置したい http://okwave.jp/qa/q7728373.html
- ベストアンサー
- CSS
- 【HTML5】セクションを示す要素の使い分け
HTML、CSSを勉強中の者です。 HTML5のセクションを示す要素(section・article・aside など)をどのように使い分けるべきなのかいまいちわからず、質問させていただきました。 様々なサイトで調べてみたのですが、サンプルを見るとどれも微妙に定義が違っているように見受けられ、理解が曖昧です。 あまり詳しくないサイトだと、単純にヘッダー部分はheader要素、フッター部分はfooter要素、タブメニューなどはnav要素、リンクなどはaside要素、そしてメインとなるコンテンツ部分はsection要素、といったことしか書かれていませんでしたが、別のサイトにはsection要素の中にarticle要素やaside要素が入ってくると書かれており、「???」という感じです。 例えばですが、添付した画像のようなサイトの場合は、下記の考え方で合っているのでしょうか? header・・・ヘッダー(オレンジ) nav・・・タブメニュー(薄青) section・・・タイトル(緑)、コンテンツ(濃青) article・・・記事(黄色) aside・・・サブメニュー(紫)、リンク(ピンク) footer・・・フッター(薄赤) また、section要素やarticle要素の中にarticle要素やaside要素が入ってくる、というのはどのような場合でしょうか。 最初のうちにきちんと使い分けを覚えたいと思いますので、よろしくお願いします。
- ベストアンサー
- HTML
- 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
- HTML5の<section>要素について
HTML5で追加された<section>要素ですが、皆様使っていらっしゃいますか? 勉強する過程の中で解説書や解説サイトを調べると、<section>を使う用例としてはブログ記事があげられることが多いです。 ブログのテンプレートを作るなら、納得できるのですが、それ以外のサイトではあまり使わないような気がしています。 見出しを含む一節を囲みたいデザイン等の場合にはdivの代わりとして使えそうな気もしますが、サイトによっては「見た目のために使うのならdivを使え」とあります。 ならば、<section>はどのようなシーンで使えばいいのでしょう? ただ単に、節や章の塊を明示化するためなのであれば、それをすることで何かメリットはありますか?また、やらないことでのデメリットはあるのでしょうか? 「そういうルールになったんだからやらなきゃいけない」と言われてしまえば、そうなのかもしれませんが、ずっとモヤモヤしているので、具体例があると嬉しいです。 よろしくお願い致します。
- ベストアンサー
- HTML
- HTML5コメント欄の<article>について
現在HTML5でブログテンプレートをコーディングしています。 その中で、<article>について調べるとコメント欄にも<article>を使うと良い、といった記述をよく見かけます。 導入しようと思ったのですが、私のサイトは3カラムの幅固定floatで構築してあり ソースの記述順序上、メインカラムの中にコメント欄が入りません。 簡単に構造を書くと <div id="wrapper"> <div id="main"> //メインカラム ~~ </div><!-- #main--> <div id="left"></div> <div id="right"></div> <div id="comment"></div> </div><!-- #wrapper--> こんな感じになっており、#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】articleについて
cssでarticleの横幅を定義すると、それに合わせて中の文字の配置がかわるかと思いますが、 英語だけの場合は、幅にあわせて変わってくれません。 何か書き方がわるいのでしょうか? 例) <article> <h4>Let'sStudy</h4> gjrjahreie1ahuuularhjgvikjerakgviahejkrgvfhjakiufhjkriuehfjakrouihfjkaofrueihufdjkoriehjfkdkioui </article> width: 300px
- ベストアンサー
- 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
- HTML5の文法上正しいかについての質問です。
現在、HTML5の勉強も兼ねてBlogを作っています。 例えば、下の例のように<section>と<article>の間に<div>を入れても良いんでしょうか? 例 <section id="blog"> <h1>blog</h1> <div id="post-list"> <article> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </article> </div> </section> ソースを覗いてみても、実際に使っているサイトを見たことがなかったこともあり、文法上誤った使い方をしているか知りたく、今回アップしてみました。 当方、素人の為もし参考になりそうなサイトを教えていただけたら幸いです。
- ベストアンサー
- ブログ
- 何故か<article>がずれてしまいます
こんにちは。 お世話になります。 表題にもありますように、 ソース上の<article>の位置がどうしてもずれてしまいます。 ソース上の希望の場所に入力しても、画面を移動、というのでしょうか、 別のページをに飛んでから、ソースを再度確認すると、<article>の位置が ずれてしまうのです。 入力したソース上のタグは、下記の通りになります。 <html> <head> <meta charset="UTF-8"> <title>真夏のひまわり畑-forest studio</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> </header> <h1>FOREST STUDIO</h1> <article> <h1>真夏のひまわり畑</h1> <p>森の工房の隣にある畑は、毎年夏になると満開のひまわりの 花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、 太陽に向かって花を咲かせます。大きなひまわりは背丈が2 メートルを超え、見ごたえも十分です。畑の周囲は約5キロ の散策コースになっていますので、花を見ながら散歩をする のもおすすめです。</p> <p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥 たちの餌になります。また、ひまわり油も抽出し、料理屋やお 菓子作りに活用しています。ひまわりの種を香ばしくロース トしたクッキーも人気商品です。</p> </article> </body> </html> ですが、下記のように、<article>の位置がずれてしまいます。 <html> <head> <meta charset="UTF-8"> <title>真夏のひまわり畑-forest studio</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> </header> <h1>FOREST STUDIO</h1> <article> </article> <h1>真夏のひまわり畑</h1> <p>森の工房の隣にある畑は、毎年夏になると満開のひまわりの 花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、 太陽に向かって花を咲かせます。大きなひまわりは背丈が2 メートルを超え、見ごたえも十分です。畑の周囲は約5キロ の散策コースになっていますので、花を見ながら散歩をする のもおすすめです。</p> <p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥 たちの餌になります。また、ひまわり油も抽出し、料理屋やお 菓子作りに活用しています。ひまわりの種を香ばしくロース トしたクッキーも人気商品です。</p> </body> </html> どうして位置がずれてしまうのか、さっぱりわかりません。 どなたか、教えてはくださいませんでしょうか? よろしくお願いたします。
- ベストアンサー
- CSS
- ハーフサイズのMILコネクタを入手する方法について
- 自作するためには、ハーフサイズのMILケーブル用のコネクタを入手する必要があります
- コネクタを入手するためには、専門の販売店やオンラインショップを利用することがおすすめです
お礼
大変わかりやすく勉強になりましたありがとうございます。