三十六日目！（～見出し構造、不可視化～）

続きいきます。

●見出し要素の構造

div#header
表紙や目次に相当する「div#header」部分では、まずロゴである「<img alt="BlueDrop-ns&acute;s desing"・・・/>」をh1要素でマークアップ。デザインカンプにはないが、「div#global-nav」には「当サイトの主要コンテンツ」というh2要素を用意。

人が見ればグローバルナビゲーションであることがわかる情報でも、音声ブラウザなどの読み上げソフトを使用している人にも「どのような情報のかたまりなのか」がわかるように、このように見出しをつけておくとよい。通常のブラウザでは見えないように不可視化している。

div#new-entry、div#previous-enty
「div#new-enty」では、エントリー名をh2要素としている。「div#previous-entry」では「Previous entries・・・」をh2要素とし、エントリー名をそれぞれは一段階見出しレベルが低いh3要素でマークアップ。

すべてのエントリー名を同じ見出しレベルにしたいのであれば、「div#new-entry」に「最新のエントリー」というh2要素を追加してもよい。

div#other-contents
「About me・・・」「Archives・・・」「Category・・・」それぞれをh2要素としている。また「div#other-contents」の直下に「その他のコンテンツ」というh2要素を追加し、「About me・・・」「Archives・・・」「Category・・・」をそれぞれh3要素としてもよい。

ここでは「div#other-contents」より前までは、各種エントリーに関する内容であるのに対し、一転して「About me・・・」「Archives・・・」「Category・・・」といった情報が出現しますので、「その他コンテンツ」と見出しを追加するまでもなく、それまでの情報と質が変化しているのが明白と判断し、それぞれをh2要素でマークアップしている。

div#footer
書籍でいう著者・出版社情報などの奥付部分に相当する「div#footer」。デザインカンプでは著作権表記のみとなってるが、ここでは「当サイトの共通情報」というh2要素を追加し、何の情報であるかをしっかりと示している。

●内容を不可視化するテクニック
作例の中には、ＸＨＴＭＬに記述されているものの、ブラウザ上に表示されない内容がいくつかある。
具体的には次の内容。

・　「div#global-nav」のh2要素
・　「div.entry-footer dl dt」の一部
・　「div#step-nav」のh3要素
・　「div#footer」のh2要素

文書構造として必要な情報ではあるものの、人間の目で見た場合には、表示されていなくても直感的にわかるだろうという情報。CSS側で不可視化する指定をしなければ、当然画面にでてきてしまう。

以下、要素を不可視化するテクニック。状況に応じて使い分けるのが大切。

●一般的な不可視化テクニック
コンテント領域の大きさを「０」にして、はみ出した内容は消してしまうという一般的な方法。手順としては、まずwidth/heightプロパティの値を「０」とする。すると、内容がコンテント領域からはみ出してしまう。コンテント領域からはみ出した部分はoverflowプロパティで制御できるので、「hidden」という値を指定する。

#global-nav h2,
#step-nav h3,
#footer h2 {
  width: 0;
  height: 0;
  overflow: hidden;
}

不可視化していない状態

●positionプロパティを利用した不可視化テクニック
作例では「div.entry-footer dl dt」の一部を不可視化している。ここでは上記の方法ではなくpositionプロパティを利用して不可視化している。理由は、dt/dd要素に「display:inline;」を指定しているため。
インライン要素へのwidth/heightプロパティの値は無効になってしまうため、内容をはみ出させて「overflow:hidden;」で非表示にすることができない。

このような場合、positionプロパティを利用して不可視化する。「position:absolute;visibility:hidden;」と指定する。「visibility:hidden」でボックスを不可視化する。この時点で、ボックスが完全にいなくなったわけではなく、ボックスの範囲は確保される。なお、「position:absolute;」を指定された要素は、他の要素にとっては存在しないものとして配置が行われる（ボックスの範囲がなくなったように見せることができる）。


ただし、「visibility:hidden;」を指定された要素は、一部の音声ブラウザで読み上げられないという問題がある。したがって「visibility:hidden;」の代わりに「left:-9999px;」と指定し、画面外へ追いやる方法（オフレフト）が使われる。

.entry-footer dt.time,
.entry-footer dt.tag {
   position: absolute;
   left: -9999px;
}


●displayプロパティを利用した不可視化テクニック
不可視化テクニックには上記二つ以外にもある。もっとも簡単なのは「display:none;」を指定すること。難しいことを考えずに、実にあっさりと要素を消すことができる。しかし、一部の音声読み上げブラウザで読み上げられないという問題があるので、「display:none;」は利用しないのが一般的。

このように、一部の要素を不可視化するというひとつの目的を達成するうえでも、見た目だけを追及するのではなく、アクセシビリティなどの観点から考えて、よりよい判断ができるように努めるのが大切。

●定義リストの使いどころ
見た目ではわからないが、「div.entry-footer」のなかで「更新時間」「タグ」「コメント」「トラックバック」には定義リスト（dl要素）を利用し、ていないなマークアップを心がけている。「更新時間」「タグ」は、人が見れば情報の意味がわかるはずだが、文章構造を意識してそれぞれにdt要素を指定している。
このように、「○○は○○」（たとえば「更新時間は11：32」など）という関係が成立するものがいくつか並んでいる場合には、定義リストが利用できる。

今日はここまで。