REDLINE MAGAZINE | [B]RLMの作り方・その２-１

[B]RLMの作り方・その２-１

前回の続きで今回は左上の部分を作ります。

左上は四角い「h1」なのですの巻

この部分が丸々h1になってます。

上記のとおり、左上部分は丸々h1タグです。普通にヘッダがあって左上にロゴがあって･･･という形のサイトではロゴ部分がh1になってたりするんですが、このサイト、ヘッダに該当するものがないので、ちょっとここではh1タグをこういう四角い形にして使ってます。

まずはここのソース部分の巻

XHTMLソース

<h1 id="sitelogo">
<a href="http://redline.hippy.jp/">
REDLINE MAGAZINE | webデザインに関するさまざまな情報掲載サイト
<img src="xxx.gif" alt="REDLINE MAGAZINEトップページへ" />
</a>
</h1>

上のソースが改行してあるのは見やすくするためだけで、本当は１行に書いてあります。まずh1タグに「sitelogo」というidをつけました。別に名前はなんでもいいです。後でidに対してcssで見栄えを整えます。(本当にキッチリしている方はもっとちゃんと意味を持たせたid名をつけてらっしゃると思います。)で、h1の中に内容を入れます。

「REDLINE MAGAZINE | webデザインに関するさまざまな情報掲載サイト」はリニューアル前の名残でえらく長いサブタイトルみたいなんをつけてますが、ちょっと長すぎです。反省してます。(別に入れてはダメってことではないです。)

ポイントはその後のimg部分です。このh1部分はCSS側で「画像置換」という方法を使ってテキストを消して背景画像だけを表示させるという仕組で成り立ってます。実はその「画像置換」私は大好きなんですが、アクセシビリティの問題で少し前にweb関係の方のブログなんかでよく話題に上がっていました。

画像置換問題をどう回避するかの巻

その問題とは何かというと、画像置換でよく使われるのはcssで幅や高さを指定して背景画像を表示し本来その部分にあるはずのテキストを「text-indent:-9999px;」などとして画面外に追い出して非表示にしたり、「display:none;」ですべてを消してしまったり(こちらはもうあまり使われてない気がします)する方法。

その手法を使う場合、CSSが有効で画像の表示を無効に設定してあるブラウザではその該当部分には何も表示されなくなるという問題が発生します。サイトのコンテンツ内容や想定ユーザー層などの条件によってその問題に対処したりしなかったりという現状なんですが、最近の議論を見ているとサイトロゴやナビゲーションなど、必ず意味を持つ部分の背景画像に対してはキチンと対応しておいた方がいいなというのが個人的な感想です。(この辺りの解釈は作る人や案件によって変わってくると思います。)

ちなみにアクセシビリティに関して、画像非表示の場合、それぞれ内容は何らかの形でちゃんとユーザーに伝わるのかどうか、音声ブラウザの場合も含めた内容は以下の表の通りです。

	テキスト	画像(imgタグ)	text-indent	display:none;
画像無効	○	altを表示	×	×
音声ブラウザ	○	altを読み上げ	○	×

上で「display:none;は今はもうあまり使われてない気がする」と書いたのはこの表のとおり、display:none;を使うデメリットが目立つからです。メリットは記述が楽だから、そのくらい。display:none;の代替方法を使った方がアクセシビリティ的にも良い、ということで最近は画像置換もtext-indentが主流だと思います。それをふまえた上でここでのCSSソース･･･なんですが、ページが長くなってきたので、[B]RLMの作り方・その２-２へ続きます。

2007年04月13日 22:59 | Red | パーマリンク