今回のねらい いよいよ登場した、Adobe Creative Suite 3。Dreamweaverのバージョンも、Dreamweaver CS3 となりました。
今回は、Dreamweaver CS3 バージョンアップされた機能を紹介します。 第五回目は、ブラウザの互換チェックについて見てみましょう。
ブラウザの互換チェックCSSレイアウトのページでは、ブラウザごとにCSSの対応状況が違うため、表示が異なることがよくあります。そのため、各ブラウザで正しく表示されるかどうかのチェックが必ず必要です。 「ブラウザの互換チェック」では、各ブラウザごとにソースコードの文法チェックを行うことができます。 ブラウザチェックの設定チェックを行う前に、チェック対象となるブラウザの指定を行います。 - ドキュメントツールバーの[ページのチェック]ボタンをクリックし、[設定]を実行します。
- [ターゲットブラウザ]画面から、必要なブラウザにチェックをつけ、リストからバージョンを指定します。
- [OK]ボタンをクリックします。
- [結果]パネルにチェック結果が表示されます。
- 今回チェックしたページは、以下の図のように、ページレイアウトの外枠幅（700ピクセル）に対して、内部にあるレイアウト枠幅（700ピクセル）が同じになっている状況です。
- [結果]パネルを確認すると、「フロートの落下に関する問題」が表示されています。
これは、Internet Explorer 6及び7のバージョンで、レイアウト枠の中にレイアウト枠がある場合に余白に余裕がない場合に収まりきらずに下に落ちてしまうというエラーを示唆したものです。
ブラウザの互換チェック一度ブラウザの設定を行えば、[ページのチェック]ボタンから[ブラウザの互換チェック]を実行すれば互換チェックが行えます。 
CSSブラウザチェックの結果をさらに詳しく確認するための「CSS Advisor」サイトが準備されています。 - [結果パネル]の右下にある「解決方法」の文字をクリックします。
- Adobeサイトの「CSS Advisor」のサイトに接続されます。また、先ほどの問題点をさらに詳しく解説し、解決方法まで記載されています。
- 解決策を読むと「中のレイアウト枠の幅の指定に余白を持たせるか、幅指定が必要なければ削除する」とある通りに、該当場所の幅の指定を削除し、もう一度ブラウザチェックをかけるとエラーが改善されています。
- ■CSS Advisor
- 「CSS Advisor」は、Adobeが運営する「CSSやブラウザの互換性に関する問題の解決策」ためのコミュニティサイトです。ユーザーが問題点を書き込んだり、解決策を書き込んだり、評価することができます。現在はまだベータ版の段階のようですが、CSSレイアウトで良くあるトラブルが書き込まれていますので、サイトをよく読むことで勉強になると思います。
r360studioからのお知らせ
|
職種からお仕事情報を探す
Webディレクター│
Webデザイナー│
コーダー│
ネットショップ運営│モバイルサイト│その他
今週の特集
