header要素

ページやページ内文章のヘッダー(見出し情報)を示す要素です。
例えばタイトル、概要、日付などを<header>で囲います。

<body>
<header><!--サイトの見出し情報 -->
<h1>日本の詩</h1>
<nav>メニューナビゲーション</nav>
</header>
 <article>
  <header><!-- 文書の見出し情報 -->
  <h1>くらかけの雪</h1>
  <p>宮沢賢治『春と修羅』より</p>
  </header>
  <p>たよりになるのは
  くらかけつづきの雪ばかり
 野はらもはやしも
 ぽしやぽしやしたりくすんだりして
 すこしもあてにならないので
 ほんたうにそんな酵母かうぼのふうの
 おぼろなふぶきですけれども
 ほのかなのぞみを送るのは
 くらかけ山の雪ばかり
   (ひとつの古風こふうな信仰です)
 </p>
 </article>
<aside>サイドバー</aside>
<footer>フッター</footer>
</body>

上記のように、サイト全体のヘッダー情報や、各文書内の見出し情報である部分はheader要素として囲うことができるため、一つのページに複数回使用可能。
<header>の中に<header>を入れたりしてはいけません。

ちなみにmetaタグやCSSなどを記述する<head>とは別物。

h1~h6の見出しが必ずしも必要ではない

html5を学習し始めの頃は、<header>は「ヘッダー」なんだから、必ず見出しタグが必要なんだ!と思い込んでいたけど…必ず必要というわけでもないとのこと(笑)

<article>
<header><!--▼見出しを入れなくてもいい -->
<p><time datetime="2013-09-15">2013.09.15</time></p>
<p>新着情報のお知らせ</p>
</header>
<p>サイトをリニューアルしました。</p>
</article>

<header>の中には、通常は<h1>–<h6>や <hgroup>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。

<header>-HTML5タグリファレンス

でも、個人的には見出しを入れたほうが様になる?気がして、見出しを入れてコーディングするようにしてますが・・。

なんとな~く分かってきた?html5

今までのhtmlでは、一つのページ内に大見出しタグ<h1>は「一つ」という決まりがありました。一つのページ内にh1タグを複数使用することは、文書構造的にアウト。下手したら検索エンジンロボットにスパム扱いされてしまい、seo的には最悪な結果になってしまいます。

ところが、html5は基本、一つのページにh1を幾つ使ってもOKという構造になっているんです。「h1タグは一つだけっ!」という感じで今までやってきてた私は、1ページにh1が乱発しているとなんだか気持ちが悪い(笑

ですが、html5を理解しはじめると、<h1>が以前ほど重要ではなくなり、ページの内容とその構成がより重要視されているんだ…と思い知らされます。

続きを読む なんとな~く分かってきた?html5

article要素

<article>は「単体で完結できるセクション」を示す際に使用する要素です。

articleで囲う箇所について

  • そのページから切り取っても単独で成り立つ文章(箇所)であること
  • そのページの主要な内容であること

一つのページに複数使用可能

ページに単体でなりたつ文章が複数ある場合は<article>で区切ってもOK。

ニュース情報などの場合–追記更新

作成中

TOPページなどの場合–追記更新

作成中

入れ子にしてもよい

<article>を入れ子にして使用する場合は、必ず外側の<article>の内容に対し、内側の<article>の内容は関連しているものでなければならない。

<article>
<header>
<h1>『屈折率』</h1>
<p>宮沢賢治「春と修羅」より</p>
</header>
<p>七つ森のこつちのひとつが
 水の中よりもつと明るく
 そしてたいへん巨きいのに
 わたくしはでこぼこ凍つたみちをふみ
 このでこぼこの雪をふみ
 向ふの縮れた亜鉛あえんの雲へ
 陰気な郵便脚夫きやくふのやうに
   (またアラツデイン 洋燈ラムプとり)
 急がなければならないのか</p>
<section>
  <header>
  <h2>コメント</h2>
  <p>2件のコメントが投稿されました</p>
  </header>
  <article>
  <header>  <p>Hさんのコメント</p>
  <p><time datetime="2013-03-02">2013-03-02</time></p>
  </header>
  <p>七つ森のひとつが明るい(屈折でより大きく見える)に対し、でこぼこ雪、縮れた亜鉛の雲、陰気な郵便脚夫のように険しく孤独な道を行く…賢治の修行僧のような人生を暗示しているような詩だ。</p>
  </article>
  <article>
  <header>
  <p>Kさんのコメント</p>
  <p><time datetime="2013-01-15">2013-01-15</time></p>
  </header>
  <p>光の現象による屈折と、心情の現象による屈折。光と影、明から暗へ…といった二つの対象とカタチを実に美しく表現していると思います。</p>
  </article>
</section>
</article>

<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。

<article>-HTML5タグリファレンス

section要素

<section>は、ページ内のその部分が一つの文章の章や節(セクション)であることを示すタグ。見出しを含む文章の区切りなどに使用します。

section要素内には見出しタグが必要

前述にあるように<section>で囲われた箇所は、章や節であることを意味づけるので<section>要素内には必ず、h1~h6の見出しタグが必要不可欠です。

どの見出しタグから記述しても大丈夫なようですが、ページ全体の文章構成の流れがおかしくならないよう注意。

<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。

セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。

<section>-HTML5タグリファレンス

sectionが必要?不必要?と迷ったら…

なんとなく理解できたと思って、コーディングし始めると、ここは<section>で囲うか囲わないべきか?と戸惑うことがあります。

そんなときは見出しが必要か必要でないかで判断するといいそうです。
「見出しが必要ないor無理に付ける内容でもない」=「章や節として区切る必要はない」と判断できるから、<section>で囲う必要もないってわけですね。

section使用の注意点

  • レイアウト目的で使用しない。レイアウト目的なら<div>を使用。
  • 見出しを付けれない、また付ける必要ながない部分を<section>で囲まない。

article、nav、aside、header、footerなどもセクションのひとつ

より具体的な意味がある内容は、各セクションタグにあわせコーディングすることが重要です。
例えば、コンテンツの主要内容であれば<article>、ナビゲーションであるなら<nav>、コンテンツ本文と関係あるがややそれる内容であるなら<aside>を使用する…など。

HTML5でサイトをコーディングする際は、各セクション要素の意味を理解しておくことが必要不可欠ですね。

HTML5のレイアウト構造

html5で作った場合の基本レイアウト。あくまで基本です。

ワンカラムレイアウトの基本

<body>
<div id="container">
<header>
<h1>サイト名:ロゴ</h1>
<nav>ナビゲーション</nav>
</header>
 <main role="main">
  <article>
  <h1>タイトル見出し1</h1>
   <section>
   <h2>タイトル見出しh2</h2>
   <p>本文</p>
    <section>
    <h3>タイトル見出しh3</h3>
    <p>本文</p>
    </section>
   </section>
  </article>
 </main>
<aside>カテゴリなど</aside>
<footer>フッター</footer>
</div>
</body>

サイドバーなど複数のカラムで構成されたレイアウトの場合

フルードレイアウト基本

<div id="wapper">
<header>
<h1>サイト名:ロゴ</h1>
<nav>ナビゲーション</nav>
</header>
<div id="contents">
 <main role="main">
 <article>
  <h1>タイトル見出しh1</h1>
  <section>
   <h2>タイトル見出しh2</h2>
   <p>本文</p>
    <section>
    <h3>タイトル見出しh3</h3>
    <p>本文</p>
    </section>
   </section> 
  </article>
 </main>
 <aside>カテゴリーなどのサイドバー</aside>
</div>
<footer>フッター</footer>
</div>

<article>要素は、それ単体でも成り立つセクションに使用。複数使用ができます。
<main>要素は一ページに一つだけ、そのページのメイン部分を囲います。
また、他セクションの子孫として使用してはいけない。
ただ<div >の中に<main>があるのはよいのか…?<div>は装飾用タグだからいいんじゃないか…?考察中….
<div>の中に<main>もOK。
<div>は装飾タグなので基本どこへ使っても問題はないと思います。

main 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP

大見出し要素<h1>の複数使用

htm4では、h1要素は一つのページに一つで、複数使用すると構造的にアウト。SEOでもスパム行為とみなされます。

しかしhtml5では、h1要素を複数使用することができるんです!

とはいえh1内にキーワードを乱発すると結局スパム扱いされてしまいそう…なのでキーワードの多用に注意しながら、階層ごとにあった見出しにするよう注意が必要です。

<hgroup>要素は使わない

wordpressデフォルトテーマ「twentyeleven、twentytwelve」では、見出しをグループ化する要素<hgroup>が使用されていますが…

■hgroup要素の使用例

<header>
 <hgroup>
 <h1>見出し1</h1>
 <h2>見出し2</h2>
 </hgroup>
</header>

が、新テーマ「twentythirteen」では使用されていません!
このhgroup要素は2013年4月に廃止勧告がされています。

HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除

なのでhgroupは使用は避けましょう。

WEB標準はXHTMLからHTML5へ

ウェブページは基本、HTMLという言語で表示されます。デザインを補うにはCSS言語。
今の標準はXHTML+CSSですが、これからは・・・HTML5×CSS3。

IE8以下のブラウザはHTML5のタグを認識せずCSS3にも対応していません。だから2、3年前まではHTML5なんてまだまだ…と思ってたんですが!スマホの普及と、Microsoftが発表したwindowsXPのサポート終了※でさらにHTML5が加速するでしょう。(※2014年4 月9 日以降はXPのセキュリティパッチは有料となる)

運営しているサイトのアクセス履歴をみると、既にPCはIE9以上のアクセスが増えてIE8以下は減っています。あとはiphone、ipad仕様でSafari、Android仕様でChromeブラウザが急増。う~ん…IE8以下はもう切り捨てゴメンにしていいでしょうか?だめ?

ちなみにhtml5.jsとselectivizr.jsというJavaScriptファイルで、HTML5×CSS3をIE8以下に対応させることが可能ですが、レスポンシブウェブデザインで作ったサイトをIE8で見ると表示がやや遅れます。

スマホはHTML5×CSS3×jQueryで

さらに、スマホ用サイトにはjQuery(ジェイ・クエリー)が必要不可欠。JavaScriptのひとつで、画像の拡大表示やスライドショー、ドラッグドロップ、アコーディオンタブなどさまざまな動作を可能にします。

ただ、個人的にショックだったのがスライドショー関連。これFlashでお勉強してまで作ったのに、iPhone・iPadのiOSは標準でFlashをサポートしていないことが判明。(アプリで見れる?らしいですが…)
なんで、jQueryプラグインで作り直し…しかもHTMLに文字+画像を入れて動かすjQueryスライドショーは、SEO的にScript記述しかしないFlashより優れているじゃありませんか!
なんなんだよもぅ!

レスポンシブウェブを学習してみる

運営しているサイトで最近売上げが落ち気味。
アクセス数は以前とあまり変わらないのに…なぜ?サイトコンテンツ自体に問題があるかもしれないけど、気になるのがスマートホンからのアクセス急増。
PC半分、スマホ半分。とくにiphone端末が多い。

docomoがiphone出すということでさらに需要が増えるでしょう…もう一般ユーザーはPCよりスマホ派が多くなるんでは!?ということで遅いけどスマホ用のサイトコーディングを勉強ことにしました。

で、頭をフル回転してマスターしようとしてるのがレスポンシブウェブデザイン。メモることが多くて、忘れてしまいそうなのでこのブログにじゃんじゃんメモしてこうと思います。

レスポンシブウェブってなんじゃらほい

レスポンシブウェブとは、1つのテンプレートでPCをはじめスマートフォン(iphone 、Android)やipadなどのタブレットなどさまざまなデバイスに対応するウェブデザインの制作手法です。

Multi Device

サイト構造によっては向き不向きがあるようですが・・・

  • これ以上テンプレートを増やしたくない
  • 元々シンプルな構造のサイト

な場合はもうレスポンシブウェブにしてしまったほうがいいと思います。

WordPressなど記事投稿内容はシンプルにする

サイトはほとんどWordpressで構築しているのですが、記事投稿で画像+文字+CSSやTableで複雑にデザインを組んじゃってるページは崩れるはず・・・。まぁでも長い目で見れば今修正しておけば、後々の運営が楽になることでしょう。

  • 記事投稿はとにかくシンプルに
  • PCで見るよりスマホで見たときを意識して投稿する