学級日誌番外（ホームページ作成ノウハウ集）

８．Webデザインの○と× （2003年10月5日）

◎環境: ・Web環境全般
◎解説: Webを見る環境は様々で、OSの違いやブラウザの違いなど組み合わせにより十種類以上の環境が存在する。
HTMLは非常に柔軟な言語であるため、多少記述が間違っていてもブラウザ側で勝手に解釈して表示をしてくれる。
しかし、その勝手な解釈のために環境によっては、意図したような表示にならないことがよく起こる。
今回は、そんなHTMLの記述が表示に与える影響を○と×という形で紹介する。
略号>>　IE：InternetExplorer　NN：NetscapeNavigator

（１）背景色の指定を忘れずに

白背景のページを作る時、MacのNNで見ると背景色がグレーになってしまう
ことがある。
>>原因・・・<body>タグのbgcolor属性忘れ

            <body bgcolor="#ffffff">

            <body>

（２）表示位置のマージン指定を忘れずに

画面の左と上の余白がIEとNNで異なる場合がある。
>>原因・・・ページのマージン指定がIEとNNで異なるため
leftmargin：IE用左右マージン、topmargin：IE用上下マージン
marginwidth：NN用左右マージン、marginheight：NN用上下マージン

            <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

            <body>

（３）文字の位置合わせはテーブルで

スペースを挿入して文字位置合わせをした場合、文字面がバラバラになって
しまうことがある。
>>原因・・・Mac標準の画面表示用フォント「Osaka」が等幅フォントであるのに
対し、Windows標準の画面表示用フォント「MS Pゴシック」がプロポーショナル
フォントであるため。

            テーブルのセルを使って各項目を整理する

            文字の位置合わせをスペースの数で調整する

（４）スライスイメージを組むときは<td>～</td>を１行で

大きな画像をいくつかにスライスし、それをテーブルでひとつにまとめ直す
場合、イメージとイメージの間にすき間が出来てしまうことがある。
>> 原因・・・</td>のところでの改行

            <td><img src=～></td>

            <td>
              <img src=～>
            </td>

（５）テーブルのセル内は空にしない

テーブルセルの背景色が抜けてしまう場合がある。
>> 原因・・・NNではセル内に何も要素が無いと色が抜けてしまう

            <td width="100">　</td>　←全角スペース有り

            <td width="100"></td>

（６）<form>タグは<td>タグの外側へ

フォームのテキストフィールドの下に余計なスペースが出来ることがある。
>> 原因・・・<form></form>と<td></td>の位置関係

            <form ～>
              <td>～</td>
            </form>

            <td>
              <form ～>
              </form>
            </td>

Webデザインの世界は技術の進歩が早く、取り残されないように勉強がかかせません。ネットで最新情報を検索するのも良いですが、自分のペースでじっくり学ぶには昔ながらの書籍もお勧めです。