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
>>関連リンク
関連日記
- 2006年09月03日 NASA日本語公式サイト (69103)@ ウェブ
- 2004年09月19日 フジグラン緑井に出店する店舗 (24029)@ 広島
- 2004年09月29日 正多角形の作り方 (20496)@ Shade
- 2009年12月11日 Wiimote Whiteboard (19483)@ 電子工作
- 2010年05月16日 ArduinoとJapanino (17386)@ 電子工作
- 2007年04月05日 タイマーIC 555 (17260)@ 電子工作
- 2007年01月08日 PICでSPI通信 (16489)@ 電子工作
- 2009年05月14日 iPhoneの小技「Respring」 (16359)@ iPod touch
- 2007年02月10日 USB経由でPIC書き込み (15398)@ 電子工作
- 2009年04月07日 ストロボ式ギターチューナー (14669)@ 電子工作
- 2009年03月31日 iPhone用Skype (13714)@ iPod touch
- 2007年06月15日 「小さな植木鉢」植え替え (13579)@ 雑
- 2008年12月03日 ホームボタン長押しでメモリ解放 (11963)@ iPod touch
- 2010年12月12日 NHK「ビットワールド」の探索ゲーム「幽霊屋敷の謎」 (11907)@ ゲーム
- 2006年09月03日 フォントの商業利用 (11743)@ ウェブ
- 2009年11月11日 MacHeist nanoBundle (11434)@ Mac
- 2006年05月10日 あのフォントを仕事で使う場合、あっちの方はどうなのよ? (11060)@ Mac
- 2006年09月01日 GPS-CS1Kなサイト色々 (10456)@ 雑
- 2007年03月13日 トランジスタ規格表 (10440)@ 電子工作
- 2009年02月10日 ウェブアクセシビリティの色 (10099)@ ウェブ
- 2008年02月07日 MSゴシックとMS明朝 (10075)@ Windows
- 2006年11月26日 mikroC for PIC (10038)@ Windows
- 2006年11月26日 PIC16F88でシリアル通信 (9788)@ 電子工作
- 2007年09月15日 視線入力装置 (9611)@ 雑
- 2007年01月20日 アナログシーケンサーをお一ついかが? (9447)@ 電子工作
- 2009年04月20日 Quartz ComposerでARToolKit (9291)@ Mac
- 2005年09月06日 LED電光掲示板キット (9281)@ 雑
- 2006年05月12日 FontGallery Deluxe CD Super II (9175)@ Mac
- 2006年02月17日 Illustratorでデータの差し込み (8869)@ Mac
- 2009年10月12日 CSS : -webkit-border-imageを試してみた (8784)@ ウェブ
アマゾン広告
この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。