• 締切済み

headerのセクションを作る場合

headerのセクションを作る場合、classとidでは、どちらで指定すればいいのでしょうか? <div id="header"> ヘッダの内容 </div><!-- /header --> と <div class="header"> ヘッダの内容 </div><!-- /header --> では、どちらが良いですか? headerはページ内に1つしかないから、idで宣言すればいいのでしょうか?

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

>headerはページ内に1つしかないから、idで宣言すればいいのでしょうか?  ひとつしかないわけないです。HTML5が参考になりますが <body>  <header>   この記事のheader   <nav>サイトナビゲーション</nav>  <header>  <section id="section1">   見出し<h1~h6>を一つだけ持つと期待される本文   <section id="section1-1">    見出し<h1~h6>を一つだけ持つと期待される本文    <article>     header,section,footerを持つと期待される完結した記事     <header>     </header>     <section id="section1-1-2"></section>     <footer></footer>    </article>    <article>     <header></header>     <section></section>     <footer></footer>    </article>    <aside>本文と直接関係ない記事</aside>    <nav id="tableContent">ナビゲーション</nav>   </section>   <section id="section1-2">   </section>  </section>  <footer></footer> </body> ・・・・headerは、その記事の集合のheaderなのですから、一つのページ内に何度も登場する可能性があります。  基本的にリンクやjavascriptのターゲットになるとき以外はidは使わないほうが無難です。詳細度が高くなってスタイルシート時に面倒になる。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』のですから、一ページに何度も登場する可能性のあるheaderはclassのほうが適切でしょう。リンクターゲットして一意な要素が必要なら <div class="header" id="TOP">とでもしておけば良い。  将来的にHTMLに書き直すことを念頭において、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )をclass名にして文書構造を示すのが、色々な意味で良いでしょうね。【後述のサンプル】  自動変換ツールでHTML4.01→HTML5にできますし、googleなどの検索エンジンも、それが文書構造を示すclass名と理解してくれているようですから・・。 <body>  <div class="header">   この記事のheader   <div class="nav">ナビゲーション</div>  </div>  <div class="section" id="section1">   見出し<h1~h6>を一つだけ持つと期待される本文   <div class="section" id="section1-1">    見出し<h1~h6>を一つだけ持つと期待される本文    <div class="article">     header,section,footerを持つと期待される完結した記事     <div class="header">     </div>     <div class="section" id="section1-1-2"></div>     <div class="footer"></div>    </div>    <div class="article">     <div clas="header"></div>     <div class="section"></div>     <div class="footer"></div>    </div>    <div class="aside">本文と直接関係ない記事</div>    <div class="nav" id="tableContent">ナビゲーション</div>   </div>   <div class="section" id="section1-2">   </div>  </div>  <div class="footer"></div> </body>

全文を見る
すると、全ての回答が全文表示されます。

関連する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
  • <div id="header">

    ソース内に <div id="header">でくくれば、 グーグルのロボットは、その範囲ナンがヘッダーだと認識するという事ですか?

    • ベストアンサー
    • HTML
  • セクションをdivで囲むと見出しのランクは下がるの

    例えば <body> <header> <h1>サイトタイトル</h1> </header> <section> <h2>ページタイトル</h2> </section> </body> をdivで囲むと <body> <div> <header> <h2>サイトタイトル</h2> </header> <section> <h3>ページタイトル</h3> </section> </div> </body> に書き換えるべきですか? それともdivで囲んでもdivが存在しないものとして振舞いますか? ちなみにスタイルシートを無効にして実際に書き換えずにやってみるとh1の大きさが変わりませんでした やっぱり書き換えなくてもいいんでしょうか? ご回答よろしくおねがいします ここから下は関係ないですけど html5とcssってホントにややこしいですね。見出しのランクなんてcssがあればもはや何の意味もないし(だからh1で統一できるようにしたんでしょうkど)、cssでは特にpositonとfloatは頭がおかしいと思うし、この二つがクソなので結局シマンティックセクションとか関係なくdivで囲まざるを得ない。html5のセクションはユーザーじゃなくてロボットに対して役に立つもの なんでもっと柔軟に直感的なレイアウトができるようにしなかったんでしょうね? じゃあhtml4使えよってのはなしで あとjavascriptで各セクションの高さを取得して足し合わせたものを左サイドバーの高さに代入してレイアウトを綺麗にするのとかもどれか1つのセクションにposition:absoluteがあるとおかしくなるしブラウザによってはいけたりするし本当に頭がおかしい

  • headerをページによって表示、非表示にする

    トップページのみヘッダーのjavasprictを使い、他ページでは非表示にしたいのですが、header.phpをもう一つ作り(javaのタグが入ってないもの)別名で保存し、header.phpと同じデレクトリーに保存しページの<?php get_header(); ?>の部分を<?php get_header1(); ?>に変えたのですがエラーでした。 これはどうすれば別々に見る事ができるでしょうか?? 今のページ設定は以下になってます。 <?php get_header(); ?> <div class="span-24" id="contentwrap"> <div class="span-14"> <img src="http://pimpkidz.com/wp/wp-content/uploads/2011/08/side.jpg" /> <div id="content"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <div id="indexthumb"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'post_thumbnail' )); ?></a></div> <div id="indexcontent"> <h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <p class="postdate"><span><?php the_time('Y/n/j(D)') ?> </span></p> <div class="entry"> <?php echo excerpt(40); ?> <div class="readmorecontent"> <a class="readmore" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Continue</a> </div> </div> </div> <div style="clear:both;"></div> </div><!--/post-<?php the_ID(); ?>--> <hr><?php endwhile; ?> <?php else : if ( is_category() ) { // If this is a category archive printf("<h2 class='pagetitle'>Sorry, but there aren't any posts in the %s category yet.</h2>", single_cat_title('',false)); } else if ( is_date() ) { // If this is a date archive echo("<h2 class='pagetitle'>Sorry, but there aren't any posts with this date.</h2>"); } else if ( is_author() ) { // If this is a category archive $userdata = get_userdatabylogin(get_query_var('author_name')); printf("<h2 class='pagetitle'>Sorry, but there aren't any posts by %s yet.</h2>", $userdata->display_name); } else { echo("<h2 class='pagetitle'>No posts found.</h2>"); } get_search_form(); endif; ?> </div> </div> <?php get_sidebars('right'); ?> </div> </div> <?php get_footer(); ?> もし他のソースが必要でしたら言ってください。宜しくお願い致します。

    • ベストアンサー
    • PHP
  • ヘッダー等を別ファイルに分ける場合

    <div id="header"> <?php include 'header.php'; ?> </div> こんな感じでヘッダー等、前ページで共通な部分を別ファイルに分けるのはよく使われていることなんでしょうか? header.php自体をアクセスされると困るんですが、そのような場合はパーミッションの設定で見られないようにするんでしょうか? 関数呼び出しでHTMLを吐き出したほうが楽だなぁと思っています。

    • ベストアンサー
    • PHP
  • セクション区切りについて

    仕事でワードをはじめたばかりでうまく説明出来ませんが何とか くみとって頂けると助かります(^^;; ワード2007使用です 5ページ ページセクション6 6ページ ページセクション6 7ページ ページセクション6 8ページ ページセクション6 この状態で5ページ目のヘッダーだけを変更したい場合、 セクション区切りを入れて「前と同じ・・何とか」というオレンジのボタンを外して ヘッダーを変更してみるのですが5、6、7、8ページ全部一緒に変わってしまいます。 よく見ると、全てのページがページセクション7になってしまっているんです。 だから全部一緒に変わっちゃうんですよね^^; でもちゃんとセクション区切りは6ページの最後でも切ってあるんです。 何か他に原因があれば教えて頂けませんかm(_ _)m 他の方の問いや回答も読んでいるのですが分からなくて、昨日から作業がとまりっぱなしです^^;; よろしくお願いいたします。

  • footerのclear:bothが効きません

    教えてください。 コーダー初心者です。 タイトルどおりフッターで指定したクリアーが聞きません。 上ヘッダーで、左にナビ、右にコンテンツ 右コンテンツ内に右幅いっぱいの文章をその下に右コンテンツを二段組した文章をいれました。 フッターは現在右コンテンツ側によってしまい。 左ナビしたまできてくれません。 右コンテンツを幅一列で組んでいたのですが、二段組のレイアウトを追加指定したあたりから フッターがおかしくなりました。 原因は何でしょうか? 教えてください。 下記はhtmlです。 <div id="wrapper"><!--全体囲み --> <div id="head">ヘッド</div> <div id="left">ナビ</div> <div id="right">コンテンツ<!--右側 --> <div id="section01"> <div class="section01" > 横一文章 </div> <div class="section01" id="Benefits"> 右文章 </div> <div class="section01" id="Lose"> 左文章 </div> </div><!--右囲み終わり --> <div id="footer"><!--フッター --> </div><!--フッター終わり --> </div><!--wrapper終わり --> </body> </html>

    • ベストアンサー
    • CSS
  • ワード2000でセクション区切りの挿入をしたい

    こんばんは。 ワード2000を未だに使用していますが、セクション区切りが挿入出来ず困っています。 現状は、ワードで表組みを入れたものを40頁ほど作って、ヘッダーフッターにデータを入れています。それぞれのページでヘッダーの内容の変えたいのですが、ページ末にセクション区切りを入れないと前ページと同じヘッダーになってしまいます。ここでセクション区切りを入れようとするのですが、表がページいっぱいで改行マークを入れることが出来ません。 何か対策はありますでしょうか??

  • CSSで、高さが違う画像を入れ替えるとずれます。

    headerに、横は同じで高さが違う画像を入れ替えると、ページのセンタリングがずれます。 <div id="header>は、画像のみです。 indexページの<div id="header>に、840×240の画像を入れて、 会社概要等の他のページの<div id="header>には、840×130の画像を入れると、ページのセンタリングがずれてしまいます。(←headerやmenu、footer等を包括しているdivです。) IE6ではOKなんですが、firefoxで見ると崩れます。 headerの、width・heightの指定をしなくても、 header1、header2と分けて、サイズ指定してもずれます。 どうしたらいいでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • css固定したフッターが本文と重なってしまいます

    #all { height:100%; min-height:100%; } #header { left:150px; position:absolute; } .main { top:60px; left:150px; position:absolute; } #footer { left:150px; bottom:0px; position:absolute; } ------------------------------------------------------------- <div id="all"> <div id="header"> ヘッダ部 </div> <div class="main"> メインの記事 </div> <div id="footer"> フッター </div> </div> ============================================================== このように指定したのですが、 ウィンドウを小さくしたり、長い文を書いたりすると、 メインの記事がフッターと重なって読めなくなってしまいます。 記事が短い時は、ページ全体の下部に、 長い時はスクロールした一番下にくるようにしたいです。 テーブルのheight指定を使えば同じような効果は得られますが、 テーブルの無いレイアウトをやってみたかったので。 同じような質問は発見したのですが、いい解答が見つかりませんでした。

    • ベストアンサー
    • HTML