P-0013 CSS のテクニック・アクセシビリティ編 - 閲覧者から見て「嬉しい」 CSS の使い方 -
- 2000/2/26
- 2000/5/25
- 2000/7/13
- 2000/12/15
- 2001/1/9
- 2001/2/2
はじめに
スタイルシートを使う利点は大きいのですが、同時に、環境の違いからくる多少のリスクも伴ってしまいます。ここではスタイルシートの一つ・ CSS を使う上で、そういったリスクを回避して「より多くの閲覧者に見てもらえるページ」を作るためのテクニックを紹介します。トリッキーで派手な視覚効果のテクニック紹介ではないので、ご注意下さい。
尚、以下の文書はある程度 HTML や CSS の知識がある人……少なくとも HTML ソースを直書きできる人を対象にしていますので、悪しからず。
ここに書いてあるのはメモ程度の内容なので、各ブラウザでの障害等もっと詳しく調べたい方は、リンク集から各参考サイトへ飛んでください。
基本
相対指定を基本とする
CSS では
全ての人が自分と同じ環境でページを見てくれるとは限りません。人によってはブラウザをウィンドウ状態にしているかも知れませんし、そもそもディスプレイの大きさ自体が違うということもざらです。自分の環境では幅 20cm でぴったりでも、別の環境では画面内にすら収まらないかも知れません。
相対値を使ってレイアウト指定を行うということは、レイアウトの「バランス」を指定するということです。「バランス」だけが指定されていれば、どんな環境でも（だいたい）同じように表示されます。
なお、
スタイル指定の混在を避ける
CSS を使う場合に忘れてはいけないのが、まだ CSS に対応していないブラウザも多いということです。
CSS で背景を指定して、文字の色は HTML の属性で指定……というような HTML と CSS の指定の混在は、できる限り避けるべきです。この例だと、色の指定によっては CSS 非対応のブラウザでは文字が全く読めないということにもなりかねません。
そうでなくても、 CSS の指定と HTML の指定が複雑に絡み合っている場合、管理が非常に煩雑になり、いざレイアウトを変更しようとしてもこれでは作業が進みません。 CSS を使う場合、その前準備として、 HTML 文書から全ての見た目に関する指定を剥奪しておくのが望ましいです。この作業は大変といえば大変ですが、後々のことを考えればやっておいて損はないでしょう。
CSS に依存しない
CSS を使うと、「ポインタが上に来たときだけ見えるようになるリンク」のようなダイナミックな効果や、テーブルを使わない複雑な配置が可能になります。しかし、それに依存してはいけません。
「駄目な例」としてよく挙げられるものに、「影付き文字」などがあります。この例では、 CSS で影付き文字の効果を得るためだけに HTML 文書を書いたという風に、 CSS と HTML 文書の主従関係が逆になってしまっています。これでは、 CSS に非対応の環境では「作者が一体何を伝えたかったのか」がさっぱり分かりません。
CSS は Web ページの装飾のための技術で、ページそのものを作る技術ではありません。よって、「まず最初に HTML 文書があって、文書内容に改変を加えずに CSS で装飾を加える」という考え方が重要になります。言い替えれば、 CSS を使った文書は「 CSS があれば綺麗な見栄えで閲覧できるが、無くても支障はない」という程度の作り方であるのが望ましいのです。あくまで HTML 文書のための CSS ですので、 CSS のために HTML 文書を書かないということは常に心がけておきましょう。
ちょっと手の込んだテクニック
リンク文字列を判別しやすくする
CSS では「ポインタが上に乗っているとき」などの状態に対してもスタイルを指定できます。これを利用して操作中のリンクの背景・文字色を反転して特に目立つようにすると、閲覧性を大きく向上できます。
a:link, a:visited { color: blue; }
a:link:hover, a:link:focus, a:link:active,
a:visited:hover, a:visited:focus, a:visited:active
{ color: white; background: black; }ポインタが上に乗っている（ :hover ）リンク、 Tab などでフォーカスされている（ :focus ）リンク、クリック中のリンク（ :active ）に対しまとめて指定しておくとわかりやすいでしょう（当サイトではそのようにしています）。
メニューなどいくつものリンクがひしめき合っている部分では、どのリンクの上にポインタがあるのかパッと見でわからず間違えて別のリンクをクリックしてしまうこともあるので、こういう配慮があると結構有り難いものです。
ここでは文字色と背景色を変更していますが、通常はリンクの下線を消しておきアクティブな時だけ下線を表示する、という方法も有効でしょう。とにかくアクティブなリンクとそうでない文字列とを一目で判別できるようにスタイル指定するのがポイントです。
画像はページの最後に置く
トップページに大きな一枚絵を<img>で貼り付け、そこに position でメニューを重ねたりする場合、 ちょっとした工夫で CSS 非対応環境での閲覧性を高めることができます。
仮に、画像をページの先頭の方に置いたとしましょう。 CSS に非対応のブラウザでは画像とメニューの重ね合わせができませんので、画像は画像で・メニューはメニューでそれぞれ表示のために領域を使い、閲覧者に画像の分だけ無駄にスクロールさせなければなりません。これは、そのサイトを何度も訪れている人には結構なストレスになります。
そういうストレスをなくすには、画像をページの最後の方に置くといいでしょう。 CSS のポジショニングを使ってページの先頭に再配置すれば、画像がページのソースのどこに埋め込まれていても好きな位置に後から自由に表示できます。そう、なにもページの中身を表示順に記述していく必要はないのです。（無論、表示される順番通りに書いた方が分かり易いですが）。単純に閲覧しやすい順にソースの記述を並べ直すだけでも、「 CSS オフの時の見やすさ」は大きく変わるのです。
CSS 非対応環境向けの記述を埋め込む
「このサイトは CSS でレイアウトされています」といったメッセージなど、 CSS が有効な環境の人には関係ないが CSS が無効の人には読んでもらいたい文章というのはあるでしょう。また、 CSS オンだとページ内にメニューが色々集まるが、 CSS オフだとメニューがダーッと順番に表示されてしまい下の方のメニューまでスクロールするのが大変ということもあります。
こういう場合、一旦 CSS 非対応のブラウザ用のメッセージや専用のナビゲーションを書いてからその部分を CSS で非表示にする、という方法を使いましょう。
.NoCSS /* CSS 非対応ブラウザ用の記述 */
{ display: none; /* CSS 有効時には非表示 */ }
<p class="NoCSS">当サイトは CSS を使用しています。</p>
<ul class="NoCSS">
<li><a href="#mainmenu">メインメニュー</a></li>
<li><a href="#pickup">今日のお薦め</a></li>
<li><a href="#appendix">付録</a></li>
</ul>display: none; を指定した要素は、 CSS が適用されると表示されなくなります（存在しないのと同じ扱いになる。見えなくするだけのときは visibility: hidden; と指定する）。これを利用することで CSS 非対応環境向けのナビゲーションを見栄えを損なうことなく埋め込むことができますので、是非活用しましょう。
「見えない水平線」を入れる
CSS では見出しや段落にボーダーライン（ border ）を指定できるため、簡単な記述で（視覚的に）読みやすいページを作ることができます。ところが、非 CSS 環境だと CSS の border が表示されないため、文章の区切りがわかりにくいということがあります。
こういう場合、文書の区切り位置に<hr>を挿入し、<hr>に対して CSS で display: none; と指定すると、 CSS 非対応環境でのみ表示される水平線にすることができます。長文の場合などは章・節の句切りが意外と重要なので、章ごとくらいに挿入するといいでしょう。
代替スタイルシートを用意する
Netscape 6 などの一部のブラウザは代替スタイルシート機能に対応していて、複数のスタイルシートを任意に切り替えられるようになっています。例えば以下のように指定した場合、
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="style1.css" type="text/css" title="style1"/>
<link rel="alternate stylesheet" href="style2.css" type="text/css" title="style2"/>
<link rel="alternate stylesheet" href="style2_sub.css" type="text/css" title="style2"/>「 style.css 」は永続シート（常に適用される）、「 style1.css 」はお薦めシート（ページ読み込み時に永続シートと共に適用される）、「 style2.css 」「 style2_sub.css 」は代替シート（ページ読み込み時には適用されていないが、メニューなどで切り替えるとお薦めシートと入れ替わって適用される）となります。配置関係の指定を永続シート、色関係の指定をお薦めシートと代替シートでそれぞれ分けて指定しておけば、標準の配色で読み辛い人にはシンプルで見やすい配色で見てもらう、といったことも可能です。
ただし IE にはシートの切り替え機能がありませんので、切り替えスクリプトなどを自前で設置する必要があります。
また、複数の link 要素で同じファイルを使うと、ブラウザによっては切り替え機能がうまく働かなくなる（ Mozilla Seamonkey ）など、問題が起こることがあるようです。ファイルはなるべく一つにまとめておき、組み合わせは @import で行うようにするといいでしょう。
ブラウザ固有の障害に対処する
NetscapeNavigator （ Communicator ） 4.x の問題と、その回避
リサイズ時の障害
position: absolute; を利用した配置を使っている場合、 NN 4 では、ウィンドウサイズを変更すると画面が大きく乱れてしまうことがあります。こういう時には「再読込（リロード）」すれば表示は戻りますが、いちいち手動でリロードするのは面倒です。
このような場合、 JavaScript を使ってウィンドウサイズ変更時に自動リロードするようにすることで、閲覧者のストレスを軽減することができるかもしれません。ページの<body>タグ内に以下の文字列を書き加えれば OK です。
onresize="JavaScript:if (document.layers) location.reload()"この指定は、ブラウザが NN 4.X の場合のみリサイズ時に再読み込みするというものです（ IE などでは無視されます）。ただし、再読込の際に若干時間がかかるという欠点があります。
また、このスクリプトを使うとリサイズするたびにカウンターが回ってしまうので、正確なアクセス数がわからなくなってしまうことがあります。 Cookie を使ったカウンタ（リロードしても数字が増えない）と組み合わせて使うなどの注意が必要でしょう。
line-hight には要注意
line-hight は行間を指定するプロパティですが、 NN で line-hight を設定したブロック要素内に画像を配置すると、その後に続く文章が画像と重なってしまうというバグがあります。
一番手っ取り早い回避方法は line-height を使わないことですが、どうしても使いたい場合、画像をブロック要素から出すという方法があります。ちょっとイリーガルな方法ですが、現時点ではこれがベターな解決策だと思います。
落ちる要素がある
NN 4.x は、バージョンによっては以下の条件で強制終了してしまうことがあります。
- 外部 CSS ファイルを読み込ませている
- NN 4 未対応の要素（以下の要素）を使用している
- abbr
- acronym
- del
- dfn
- ins
- q
回避方法としては以下のようなものが考えられます。
- 上記の要素を使わない
- 外部 CSS ファイルを使わない（ style 要素や style 属性のみでスタイル指定する）
- CSS 自体使わない
- CSS 切り替えスクリプトなどで問題の起こるバージョンに対してのみスタイル指定を無効にする
スクリプトを用いるのが、最もリスクが少なく現実的な方法だと思います。尚、この問題は後期のマイナーバージョンアップ版（ NC 4.7 など）では起こらないようです。
URL は絶対 URL で指定する
CSS で背景画像を指定するときなどに使う「 url( 〜 ) 」は、相対 URL （ ./img/bg.jpg のような形式）を記述した場合、 CSS 勧告ではその CSS ファイルを基点とした相対 URL に解釈することになっていますが、 NN 4.x では CSS ファイルを適用した HTML ファイルからの相対 URL で解釈されてしまう不具合があります。背景画像などを url( 〜 ) で指定するときは、絶対 URL （ http://piro.sakura.ne.jp/img/bg.jpg のような形式）で指定しておきましょう。
「 em 」指定に気をつける
相対値の「 em 」は「1文字の高さ」を表しますが、 NN 4.x では em の処理にバグがあり、表示がとんでもないことになってしまいます。相対指定を使うべきという話と矛盾してしまいますが、 NN 4.x 向けのシートには em を使わないようにするのが安全でしょう。
@import で障害を回避する
NN 4.x は @import 構文による CSS の連携をサポートしていません。これを逆手にとって、 NN で障害の起こる記述を別ファイルにまとめ、 NN でだけ読み込まれないようにするというテクニックがあります（当サイトでも使っています）。
@import url(common.css);
@import "menu.css";上記二つのどちらの書き方でも OK です。なお、「 @import "〜"; 」の形の指定は IE 4 は非対応（＝ IE 4 でも無視される）ですので、 NN でだけ無効にしたい場合は「 @import url( 〜 ); 」を使ってください。
ちなみに、 @import を使わなくても、「 media 」属性を使うことで同様の効果を得ることもできます。
NN 4.x と IE でシートを使い分ける
NN 4.x はここで挙げたほかにも様々なバグを抱えています。 IE などの比較的正しい実装のブラウザと同じシートを使うより、いっそのこと IE 用と NN 用でシートを使い分けたほうがいい場合もあります。
NN の仕様と IE の独自拡張を用いれば、この二者でシートを使い分けることができます。
<link rel="stylesheet" href="NN 4.css" type="text/css" disabled>
<!-- IE は「 disabled 」の指定された link を無視します。 -->
<link rel="stylesheet" href="IE.css" type="text/css" media="all">
<!-- NN 4.x は media に「 screen 」以外を指定された link を無視します。 -->ただしこの方法だと Opera などのブラウザで問題が起こります。より安全確実にシートの使い分けをするには、 CSS 切り替え用のスクリプトを使うのがベターでしょう。
InternetExplorer 4.x/5.0x for Macintosh の問題
フォント指定
font-family を使うとフォントセットやフォントファミリーを指定できますが、指定によっては MacIE がフリーズしてしまうことがあるようです。フォント指定が必要な場合は、後述の @media セレクタを使った回避を使うようにすると安全でしょう。
ちなみに当サイトでは、一部の要素で「 Century Gothic 」「 Verdana 」「ＭＳ Ｐゴシック」「ＭＳ ゴシック」「 Osaka 」「 Osaka −等幅」をまとめて指定していますが、これといって問題は起こっていないようです。よって、 @media による回避も行っていません。
@media で障害を回避する
CSS には、画面表示や印刷などの「出力対象」別にスタイルを指定するための仕組みとして「 @media 」という仕組みがあります。 MacIE はこの「 @media 」内の指定を無視するので、これを使って、「 MacIE で問題の起こる可能性のある指定を MacIE でのみ無効にさせる」ということができます。
@media screen,print
{ /* この中は MacIE では無視される */
h1 { font-family: "Centuly Gothic",sans-serif; }
h2 { filter: dropshadow(offx=5,offy=4,color=#888888); }
}
overflow の問題
MacIE では、 overflow: auto を指定すると要素の中身が表示されなくなる場合があります。ありみかさとみ氏によると p, pre, h1 〜 h6, center, address, form, dl, noscript, noframes でこの現象が起こり、また、 ul, ol では中に含まれる最後の行がスクロールバーに隠れてしまう問題が出るそうです。これらの要素に overflow 指定を行う場合、 scroll か無指定かのどちらかにしておいた方が良いでしょう。
div に対しての指定は問題なく動作するそうなので、最悪の場合 div で囲ってしまう手もあります。
InternetExplorer3.0x の問題
IE 3 は Windows 版・ Mac 版共に CSS の実装がバグだらけなので、 IE 3 では全てのスタイル設定を無視させるようにしておくのが賢明です。
IE 3 は<link>で複数指定した外部シートは一番下のものだけしか読まないので、空のファイルを一つ余計に指定すれば、 IE 3 でスタイル指定を無効にすることができます。
<link rel="stylesheet" href="style1.css" type="text/css">
<link rel="stylesheet" href="style2.css" type="text/css">
<link rel="stylesheet" href="dummy.css" type="text/css">
↑このシートしか読み込まれない指定するシートは実在するファイルでなければならない（実在しないファイルだとフリーズすることがある）ので、中身が空のファイルを必ず作っておいてください。
また、 IE 4 以前は URL の指定方法で「 "〜" 」という記述に対応していないため、 @import と組み合わせることで IE 3 でスタイルを無効にすることができます。ただし MacIE 3 は「 @import "〜"」に対応しているため、無駄なようです。
ソースの例
CSS の駄目な使い方の例
<h1>
<span class="shadow">タイトル</span>
<span class="front">タイトル</span>
</h1>
.shadow{
color: gray;
}
.front{
color: white;
display: block;
position: relative; top: -1.4em; left: -0.2em;
}大見出し（文書のタイトルなど）を意味する<h1>要素に、上のようなスタイルを指定したとしましょう。これを表示すると、以下のようになります。
タイトル タイトル
IE でご覧の方には、なんて事ないかもしれません。しかしこれを CSS 未対応のブラウザで見ると……
タイトル タイトル
このように表示されます。はてさて、その文書は「タイトル タイトル」なんてタイトルだったのでしょうか？ 違いますよね。
line-height のバグの回避策
<p>本文 1
<img src="img.jpg" alt="絵" width="10" height="20">
本文 2</p>
CSS の記述： body, p { line-height: 1.4; }こういう記述の場合、以下のように書き直します。
<div class="text">
<p>本文 1</p>
<img src="img.jpg" alt="絵" width="10" height="20">
<p> 本文 2</p>
</div>
CSS の記述： p { line-height: 1.4; }
body にも指定されていた line-height を p のみに指定し直し、<p></p>の外へ<img>を追い出すことで、 line-height の影響を受けなくなります。また、単純に<img>を<p></p>の外へ出しただけでは匿名ブロックが生じる可能性がありますので、<div class="text">でこの部分全体が「本文（文章部分）」であることを改めて明示します。
※「 div class="text"」の親要素にも line-height が指定されている場合、 line-height 指定が継承されてしまう可能性があります。この方法を使う場合、必ず p など行間指定が必要な要素にだけ line-height を指定し、その中には絶対に<img>を入れないといった「規則」を自分で決めておく必要があります。