「header」の編集履歴（バックアップ）一覧はこちら

「header」(2015/05/07 (木) 20:50:36) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

HTML5でのheaderタグの使い方。

#contents

*headerタグのイメージ
コンテンツの先頭にくる部分。一般的にはページ全体の最初の部分（ロゴやサイトタイトル）等に使われるが、仕様書的にいうと、例えばブログの一つの記事の先頭部分（タイトルなど）に使われてもよいらしい。~
作ったHTMLが文法的に正しいか気になる人はhttp://validator.w3.org/を使ってみてください。

*headerの使い方
**ページ全体のheader部分（ロゴやサイトのタイトルなどの部分）が一つしかない場合
この部分に関しては、headerタグがそのページで１つしか存在しない場合、HTML部とCSS部は以下のようにする。~
&u(){HTML部}
 <header>
 <h1>サイトタイトル</h1>
 </header>
&u(){CSS部}
 header{
  background: #000;
 }
もし、header内に様々な部分（ロゴ領域やサイトタイトル、ナビゲーション等）ができる場合はdivを使う。~
&u(){HTML部}
 <header>
 <div id="logo"><img src="logo.gif" width="100" alt="ロゴ"></div>←alt属性はHTML5で書くよう要求されている。
 <div id="header_title">サイトタイトル</div>←header部分にくるタイトルとして、このようにしましたが、どんな名前でもいいです。
 </header>
&color(red){つまり、headerの中に<header id="hoge">というものを入れてはいけないということ。headerの中にheaderは入れてはいけません。}~
&u(){CSS部}
 /*headerタグ部分開始*/
 header{
 プロパティ名:値;
 }
 #logo{
 プロパティ名:値;
 }
 #header_title{
 プロパティ名:値;
 }
 /*headerタグ部分終了*/

というように書く。
**ページ全体の中でheaderタグが二つ以上ある場合。
この場合はheaderの中にid属性などを付けて行う必要があります。~
&bold(){１、ページの上部にくるheader部分}
 <header id="header">
 いろいろ書いて・・
 </header>
何でもよいのですが、headerと書いた方が、多くの人がページ全体のヘッダーだと認識すると思うのでこれでいいです。~
&bold(){２、ページ全体のheader以外で先頭にくる部分（ブログの記事部分の先頭にくるものなど）}
 <header class="article_header">←一つのページのブログの記事内容が２つある場合もあるのでクラスにしました。一ページにつき１つしかなければidでもいいです。
 色々書いて・・・（でも記事のタイトルだけだと思うけど）
 </header>
と書いておけば、サイト全体のヘッダー部分と差別化できます。~

自分のコードをいざチェック
http://validator.w3.org/

HTML5でのheaderタグの使い方。

#contents

*headerタグのイメージ
コンテンツの先頭にくる部分。一般的にはページ全体の最初の部分（ロゴやサイトタイトル）等に使われるが、仕様書的にいうと、例えばブログの一つの記事の先頭部分（タイトルなど）に使われてもよいらしい。~
作ったHTMLが文法的に正しいか気になる人はhttp://validator.w3.org/を使ってみてください。

*headerの使い方
**ページ全体のheader部分（ロゴやサイトのタイトルなどの部分）が一つしかない場合
この部分に関しては、headerタグがそのページで１つしか存在しない場合、HTML部とCSS部は以下のようにする。~
&u(){HTML部}
 <header>
 <h1>サイトタイトル</h1>
 </header>
&u(){CSS部}
 header{
  background: #000;
 }
もし、header内に様々な部分（ロゴ領域やサイトタイトル、ナビゲーション等）ができる場合はdivを使う。~
&u(){HTML部}
 <header>
 <div id="logo"><img src="logo.gif" width="100" alt="ロゴ"></div>←alt属性はHTML5で書くよう要求されている。
 <div id="header_title">サイトタイトル</div>←header部分にくるタイトルとして、このようにしましたが、どんな名前でもいいです。
 </header>
&u(){CSS部}
 /*headerタグ部分開始*/
 header{
 プロパティ名:値;
 }
 #logo{
 プロパティ名:値;
 }
 #header_title{
 プロパティ名:値;
 }
 /*headerタグ部分終了*/

というように書く。&color(red){つまり、headerの中に<header id="hoge">というものを入れてはいけないということ。headerの中にheaderは入れてはいけません。}~


**ページ全体の中でheaderタグが二つ以上ある場合。
この場合はheaderの中にid属性などを付けて行う必要があります。~
&bold(){１、ページの上部にくるheader部分}
 <header id="header">
 いろいろ書いて・・
 </header>
何でもよいのですが、headerと書いた方が、多くの人がページ全体のヘッダーだと認識すると思うのでこれでいいです。~
&bold(){２、ページ全体のheader以外で先頭にくる部分（ブログの記事部分の先頭にくるものなど）}
 <header class="article_header">←一つのページのブログの記事内容が２つある場合もあるのでクラスにしました。一ページにつき１つしかなければidでもいいです。
 色々書いて・・・（でも記事のタイトルだけだと思うけど）
 </header>
と書いておけば、サイト全体のヘッダー部分と差別化できます。~

自分のコードをいざチェック
http://validator.w3.org/