新着記事
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%縮小

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


posted by Masako at 15:56 | Comment(0) | TrackBack(0) | サイト制作試行錯誤 | このブログの読者になる | 更新情報をチェックする
2007年03月09日

テーブルレイアウトからの脱却

Internet Explorer7の自動更新による配布が近い。
参照→自動更新による配布は2007年第2四半期から
タブブラウザであるInternet Explorer7になると、今まで複数のウィンドウを開く都合上画面を小さくして見ていた人も、メニューバーを出した画面で見ていた人も、サイトを最大画面で見るようになるのではないか。それがデフォルトの仕様になっているからである。(私には信じられないのだけど、左サイドにメニューバー「お気に入り」を常に表示させているネットユーザーが意外に多いらしい)

私のウェブサイトはページのほとんどをあえてピクセル指定でサイズを固定したテーブル内に納めるように作成しているので(%指定で可変のテーブルレイアウトもあり)、常に最大画面で見てもらえるのはありがたいこと。しかしテーブルレイアウトというのは既に遅れている手法である。

私はHTMLの予備知識ゼロからオーサリングツール(ホームページ作成ソフト)によってサイト作成を始めた素人だけれども、飽きずに7年間もの間サイト作成を続けていて、ほんとうに徐々にだがスタイルシートでのデザインの手法も覚えてきた。また2年前からブログを始めブログのデザインカスタマイズに挑戦したことで、スタイルシートに関しての理解が深まったように思う。ブログが現在のように広く一般に普及し「内容部分はHTMLで、デザインはスタイルシートで」というサイト制作が定着してきたこと、そしてブラウザのCSS対応も思ったより急速に進んでいることにも気づかされた。

自己満足の域をでないウェブサイトでも、それなりに進化させていきたい。IE7はIE6に比べてスタイルシートの解釈も進んだということなので、Internet Explorer7時代が到来する前に、今よりは一歩進んだデザインのサイトにリニューアルすることにした。特にテーブルでがんじがらめに固定していたレイアウトはやめ、スタイルシートを使ってのレイアウトにチャレンジした。

そのリニューアルのための勉強や作業の過程で分かったことなどを、数回に分けて書くことにする。
続きを読む
posted by Masako at 08:17 | Comment(0) | TrackBack(0) | サイト制作試行錯誤 | このブログの読者になる | 更新情報をチェックする
2007年03月05日

ファビコン設置

タブブラウザで複数のwebページを見ることが多くなってくると、ファビコンがあると見分けが付きやすくて便利だと思いました。そこで自分のwebサイト(ホームページと複数のブログ)にもファビコンを設置しました。

webページのファビコンは16×16ピクセルですが、デスクトップ用アイコンにも対応できるように32×32ピクセルで作成してみました。先ずグラフィックソフトでgifかpngのファイルを作ります。もしくはフリー素材サイトで配布しているファビコンを用意するか、ファビコンを作成してくれるwebサービスサイトもあります。
FavIcon from Pics

実はファビコンを設定する機能があるブログのほうで、以前からファビコン1←こんなファビコンを持っています。しかしあまり丁寧に作っていなかったので、あらためて作成することに。

ファビコン2←こんなのも作りましたが、結局表示が一番クリアなファビコン3←これにしました。

作成したgif(またはpng)画像のファイル名を「favicon.ico」と変更し、サーバーにアップロードします。
ホームページの場合は、HTMLファイルの<head>と</head>の間に以下の一行を記述します。
<link rel="shortcut icon" href="favicon.ico">
無料ブログサービスのブログに設置する場合は、HTMLファイルが編集可能なブログならできます。アップロードした画像のディレクトリが別なので、以下のように絶対パス(http://〜から)のアドレスを指定すれば簡単で間違いありません。
<link rel="shortcut icon" href="http://…/…(imageとか)/favicon.ico">
※表示の都合上「http://」のhは全角です。

さて、これでOKのはずですが…
続きを読む
posted by Masako at 17:58 | Comment(0) | TrackBack(0) | サイト制作試行錯誤 | このブログの読者になる | 更新情報をチェックする





×

この広告は180日以上新しい記事の投稿がないブログに表示されております。