新着記事
2007年03月12日

DOCTYPE宣言とIE7の拡大機能

ウェブページの一部にはInternet Explorer7で見ると、レイアウトが激しく崩れるページや真っ白になって何も表示されないページがあるということをネット上で読んだ。それで慌てて調べたり勉強を始め、結果としてはサイトのリニューアルをしているところなのだ。しかし実際はIE7になってもホームページビルダーで作成しているウェブページに限ればIE6の場合の表示とほとんど変わらず、まず余計な心配はしなくてもよい。ホームページビルダーで作成した場合、ブラウザがウェブページをどのように表示するかを判別するための「DOCTYPE宣言」がそもそも正しい「DOCTYPE宣言」ではなく、後半の「システム識別子」が省かれた省略形なので(※)、ブラウザの描画モードは「互換モード」になるからである。(他のオーサリングツール(HP作成ソフト)の場合は知らない)

※ホームページビルダーユーザーのあなたのウェブページのソースを見てください。一番上の一行目がDOCTYPE宣言。ただし正しくない省略形。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

ホームページビルダーなどのオーサリングツール(HP作成ソフト)ユーザーの大部分は初心者であり素人なので、「DOCTYPE宣言」って?…ブラウザの描画モードって何?という人が多いと思う。「DOCTYPE宣言」とブラウザの2つの描画モードについての知識は知っていて損はないので、もし初耳だったら以下のページは短くわかりやすく書かれているので、ざっと読んでください。

DOCTYPE宣言がないとIE7でも表示は古いまま〜All About

もちろんIE6やIE7できちんと表示されているからといって、他のブラウザ(Firefoxとか Operaとか Sleipnirとか…)が同じように表示してくれるとは限らない。「互換モード」でもブラウザそれぞれで若干解釈が異なり、段落とかテーブルの高さ指定などが原因で、レイアウトが大きく崩れてしまうこともある。これを回避しどんなブラウザでも思ったようにそして同様に表示させるためには、「標準モード」であると解釈してくれるDOCTYPE宣言をするしかない。ところが上記参照ページに述べられている「HTML 4.01 Strict」宣言となると、初心者には敷居が高い。前述で紹介した記事から引用〜(URLの一部は全角英字に変更)
●HTML 4.01 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

「HTML 4.01 Strict」は、HTML4.01で定義されている要素や属性のうち、利用しないことが望ましいとされている「非推奨」な要素や属性を一切使わないで記述したHTMLであることを示すDOCTYPE宣言です。このDOCTYPE宣言を書いた場合は、b要素(<b>〜</b>)で太字にしたり、font要素で文字サイズや色を指定することはできません。(それらの装飾にはスタイルシートのみを使います。)

今回のリニューアルにあたって、b要素(<b>〜</b>)はできるだけ排除し(
<strong>〜</strong>)に変えているのだが、font要素での文字サイズや色の指定を全部をスタイルシートでというのも手間なので一部は残している。IEとFirefoxとNetscapeでほぼ同じように表示されるなら、厳密な解釈をする「HTML 4.01 Strict」でなくても、現段階では多少お目こぼししてくれる「HTML 4.01 Transitional」でいいやと考えた。で、スタイルシートを駆使したリニューアルにしていながらも、DOCTYPE宣言はホームページビルダーのデフォルトの設定である「HTML 4.01 Transitional」の省略形のままにしておいた。

ところがである。
IE7の新しく追加された機能のひとつに「拡大機能」というものがある。これは文字のサイズの拡大・縮小ではなくて、画面全体を拡大・縮小させる機能である。(画像左は125%で拡大画面 画像右は50%で縮小画面)

125%拡大画面50%縮小

この機能を使ってリニューアルした自分のページを見ると、レイアウトが崩れてしまうのである。

125%拡大画面75%縮小

拡大画面では「回りこみ」で表示させている左側コンテンツが落ちてしまい、縮小画面では左側部分とメイン部分が重なってしまう。あまり縮小してみようという閲覧者はいないだろうが、縮小機能はページ全体のキャプチャーに便利なので、レイアウトは崩したくない。拡大機能は視力の問題で利用する閲覧者がいるかもしれないから、左サイド部分が落ちるのを防ぎたい。

どうしたらよいのだろうか。
いろいろやってみた結果、「互換モード」用のDOCTYPE宣言でも、省略形ではなく正しい「HTML 4.01 Transitional」を宣言すれば、IE7の拡大機能で見てもレイアウトが崩れないことが判明した。以下の画像参照。

125%拡大75%縮小

ホームページビルダーのDOCTYPE宣言を正しい「HTML 4.01 Transitional」にする方法は、
〔ツール〕→〔オプション〕とクリックし→〔ファイル〕タブを開く。
DOCTYPE を出力する(D)(設定を変更していなければチェックが入っている)の下の欄の
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

に変更しOKを押す。
(コピーして貼り付けでよい。このページは「http://www.w3.org/〜」部分は、表示の都合上最初のhは全角hに変えてあります)

ホームページビルダー・ダイアログ画面この正しい「HTML 4.01 Transitional」に変更した場合、font要素で文字サイズや色を指定するくらいは大丈夫だが、テーブル(表)の左揃え・中央揃え・右揃えなどの位置揃え指定や幅・高さ・余白などの指定をすると、指定が実現しなかったりレイアウトが崩れたりする。それらの指定は本来スタイルシートでするものだからである。IEではスタイルシートの表のセンタリング設定が無視されてしまうようである。その場合は「表の属性」のダイアログでの指定はしないこと。(左画像を参照)ただし表のセルに関する指定はしても大丈夫。

【ご注意】私はホームページビルダーがなくてはウェブサイトが作れない、それこそ試行錯誤して発展途上中の初心者ですので、記事に間違った箇所があるかもしれません。なのでこの記事及び「サイト制作試行錯誤」のカテゴリーの記事は、自分の覚書として、そしてたまたま読んでくださった人への“あるヒント”程度のものになれば良いと考えて書いています。本当に勉強したい人は、本を買ったりwebで調べてください。

web上にはウェブデザイナーさんやプログラマーさんなどその道のプロがHTMLやスタイルシートを易しい文章で解説してくれたり、ホームページビルダーの使い方指南のサイトが幾つかあります。ホームページビルダーユーザーでも少しでも進歩したサイト制作を目指すなら、検索してお気に入りの先生を見つけましょう。上記で挙げたAll Aboutのコンテンツ[ホームページ作成]は初心者にも理解しやすく書かれています。そして私の推奨サイトをもうひとつ紹介しておきます。

ホームページ・ビルダー11ではじめてのWebページ

拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 15:56 | Comment(0) | TrackBack(0) | サイト制作試行錯誤 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
最近のトラックバック