Webふぉれすとうぇぶ実験室：デザイン通りにコーディングしたい！


	Web制作、Webデザインのスキルアップに役立つ情報をお届けします！みんなが癒され、元気になるWebを目指します。

Webふぉれすとトップ > うぇぶ実験室


	デザイン通りにコーディングしたい！

どんなにステキなデザインを考えても、コーディングして表示が崩れていたらダイナシです。
表示が崩れないようにコーディングする方法を考えてみます。

【実験の前に】画像処理ソフトを使ってデザイン案をつくる（今回はFireworks4.0を使用）
*画像をクリックすると実際のサイズの画像を見ることができます。		・画像サイズ：600ピクセル×480ピクセル・メニュー、文章、著作権表示はテキスト。・テキストサイズは、リンクが14ピクセル、その他は12ピクセル。・メニュー部分は、リンクしてあることがわかりやすいように、マウスオーバーなどで色が変わるようにしたい。・ページの中央にレイアウトする。

【実験1】画像を書き出す→コーディング
1.画像を書き出す。今回は背景画像とタイトル文字の2コ書き出しました。
○背景	○タイトル
2.コーディングする ○結果
○Internet Explorer6.0	○Netscape4.7
*画像をクリックすると大きな画像を見ることができます。
▼Internet Explorer6.0とNetscape7.0では、デザイン通りに表示されていますが、Netscape4.7では、上のように表示がくずれています。 ▽問題点 1.背景がきちんと表示されていない。 2.メニューボタンの背景の色がきちんと表示されていない。 3.（上の画像ではわからないのですが、）マージンを指定しなかったので、上の方にくっついて表示されている。 ▼Netacapeは4.7以前のものだと、背景がセルごとに表示されるので、複数のセルにまたがって大きな背景画像を表示させることはできません。 ▼Netacape4.7は、テーブルを入れ子にしていると外側のテーブルへの指定の影響が、内側のセルにでてしまうことがあるようです。今回の場合だと、メニューのセルには、指定した背景色ではなく、外側のテーブルの背景に指定された画像が表示されてしまったものと思われます。


▼私がメインに使っているのは、Internet Explorer6.0なので、作成中は、つい、Internet Explorer6.0のみを確認しながら、コーディングしてしまい、よくこういう失敗をします。

｜ページのトップへ｜Webふぉれすとトップへ｜

Copyright(c)2002-2004 Step-First All rights reserved. [About WebForest]
E-Mail：webforest@step-first.com