2007年05月06日

タグH1の中の画像 @ ウェブ

某所の書き込みを見て気になったので・・・。

HTMLのH1の中に画像を入れることを躊躇う人が未だに居るようなのですが、仮に画像を入れない方向で同じ事をしようとした場合にどうするのか考えてみます。おそらくは、H1の背景画像としてCSSに記述することになり、H1に何らかの見出し用のテキストを入れて、このテキストが見えないようにdisplay:noneやvisibility : hiddenとCSSに指定するのでしょう。しかし、これは問題有りです。インデントでマイナス指定して画面エリアから外してしまうならばまだしも、表示しない設定にしてしまうと、音声ブラウザで読まれない可能性があります。重要な見出しが情報として伝わらないのです。そのことを踏まえれば、display:noneが不味いことに気付くと思います。でもこの方法って結構やる人が多いようです。実際に過去の解説本などでも紹介されていた方法なので、正しいと思い続けているらしい。私も過去のページで良くない方法をやってしまったことがあります。(^_^;) display:noneではなくvisibility : hiddenなので、まだマシな方なのですが、お勧めできる方法ではないです。

ちなみに本家本元のW3Cでもこの様な記述がされてます。

<h1 id="logo"><img alt="The World Wide Web Consortium (W3C)" height="48" width="315" src="/Icons/w3c_main" /></h1>

H1の中身は画像だけです。

World Wide Web Consortium
>>関連リンク

・・・

ウェブデザインに関しての記事とか解説本って、実は昔から間違っているモノが結構あります。ウェブページの製作方法は、勿論時代によって進化するモノなので、お行儀がよいやり方と、苦肉の策で生まれたやり方など、その時代によって変化します。テーブルレイアウトがわかりやすい例で、HTML3.2時代に生み出されて一世を風靡しましたけど、現在のHTML的には正しくないテクニックです。TITLEタグを連続して記述し、アニメーションさせる方法なんてモノもありました。今ではあり得ない方法です。(笑)

HTMLの場合、タグ集だけ見ても判断付かない部分もありますし、バージョン毎に微妙に違ったりするので、難しいとは思いますけど、企業のウェブページを仕事として受けるならば、基礎くらいは勉強して欲しいですね。発注する側の人はHTML-lint辺りを使って納品されたモノの構文チェックするくらいはしてみた方がよいです。エラーだらけのHTMLと言うのも結構ありますから。そのエラーに対して的確な理由が言えない業者はハッキリ言ってプロとは言えないです。

Another HTML-lint gateway
>>関連リンク

閲覧数: 2617 / はてなブックマークusers

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト