スタイルシートの技

見出しレベルを作成したけど、表示させなくない時には？

このコンテンツに興味を示しているような方には説明不要かと思いますが、 アクセシビリティとは体の不自由な人のためのブラウザ、例えば音声ブラウザや目が悪い人のための視覚ブラウザなど、 また最近では高齢な方も閲覧しますので文字が小さすぎるとか… 現実に直面した問題であると言えます。 そういった「すべての人」が見れるようにするために出された規格です。

それは最初にも述べましたが、 HTMLは文書構造に従って記述し、デザインはスタイルシートで行う… というものです。 これはどういう意味を持っているか？と言いますと、通常五体満足な方は、 普通に見ている事でも、体の不自由な方は音声ブラウザがHTMLの要素などを判別して声のトーンを変えたり、 一呼吸置いたりと色々変わって来ます。ここで、デザイン・構造をともにHTMLでしてしまうと、 そのようなブラウザが混乱してしまう可能性があるという事になります。

その点、HTMLではコンテンツの構造だけをしっかりと記述し、デザインはスタイルシートに任せるというような 手法を取れば、音声ブラウザなどにはスタイルシートは「見栄え」を定義するものなので、 構造と、見栄えをきちんと分ける事ができます。結果、目が見えない方には文書の構造だけが欲しいので、 このようにしておくと都合が良い訳です。では「構造」と言いましたが、どのようなものを言うのでしょうか？

ここでグダグダ書くとキリがないので以下のサイト様を参考にしてください （ちょっとこれを自分が書くのは抵抗ある…というのもあったりしますが）

見出しレベルというのは「h1」〜「h6」要素の事です。 「アクセシビリティ」を考慮した時には避けて通れない要素群です。 この「h1」〜「h6」を「ただフォントサイズが違うだけ」と言うのは正しくありません。 これは「見出し」の「レベル」を意味しており、「h1」でしたら「大見出し」、つまりそのコンテンツ内で最も強く言いたい事、 タイトル的なものになります。ブラウザによってはこれで目次を作る場合があるようです。 新聞を思い浮かべるととても良く分かると思いますが、大見出し、小見出しの順番になっていますし、 論文にしてもタイトル、サブタイトルがあり、それを表す事ができる要素です。 拙作「ez-HTML」のアウトライン機能を使えば見出しレベルに従って解析もできます。

このコンテンツを読んでいる人は多かれ少なかれ 「アクセシビリティ」を意識していると思います。 しかし、これをドキュメント内では意味を示すために書いても、実際にブラウザ上では見えないようにしたい！と思う方も いらっしゃるでしょう。その場合には以下の1行を書くだけで大丈夫です。

h1
{
    display: none;
}

「display」というのは表示方法を制御するためのスタイルシート属性です。 他にも「inline」「block」などさまざま指定できますが、「inline」などを「h1」に適応すると、 「h1」はブロック要素なので、通常その後の内容は改行が空いた後に表示されますが、その次に続いて表示されます。

また、見出しに画像を利用したい場合にはどのようにすれば良いのでしょうか？ この場合には、例えばアクセシビリティを考慮して以下のように書く事が推奨されています。 今、"title.jpg"という横幅480ピクセル、縦幅64ピクセルの画像を使うとします。

<h1><img src="title.jpg" alt="タイトル" width="480" height="64"></h1>

これを仮に、すべてのページのh1要素に共通の画像を適応したい時にはやはりページごとにimg要素を記述していては変更する際に大変なので、 以下のようなスタイルシートとHTMLを記述すれば良いでしょう。

スタイルシート部分
h1
{
    background-image: url('title.jpg');
    background-repeat: no-repeat;
    width: 480px;
    height: 64px;
    text-indent: -9999px;
}
HTML部分
<h1>タイトル</h1>

このようにすれば画像のみがうまく表示されます。 "<h1>...</h1>"においては、要素内で囲まれたテキストを空白にするのは、 アクセシビリティ上良くありません。そこで、文字列を記載し、意味合いを添えた上で、 外観上はその文字列を画面遠方へ飛ばしています（text-indent: -9999px;）。

top