2006年10月01日

divタグサイトの作り方

現在divタグをメインとした(意としては、テーブルタグでメイン部を作らない)ページに移項するために必死で移項するようにサイトを作成しているのですが、面倒です。

何が面倒かというと、昔の自分に触れることが。
サイトは半年以上前に作成したものですが、その頃はCSSやHTMLの知識が稚拙だったため非常にまずい状態だったわけです。そのため、随分更新作業をしました。
それはテンプレートも同じ。昔作成したテンプレートをそのまま引っ張ってきているもんだからソースが汚い汚い。仕方がないからdivタグで一から作り直すことにした。

それが失敗だった。
基本的にdivタグ系サイトを作成経験が少ない私には鬼門。
現在、移行中のページがはじめてなのに、作り直すなんて作業したもんだからブラウザとの互換がとれず非常に苦労しました。

Internet Explorer と Netscape系(Firefox含む)はブラウザの表示が大分違うので、互換を考えずに作成してしまうと滅茶苦茶になるわけです。IEで動作確認しながら途中まで作成したところでFirefoxで確認してみるとこれまた酷い表示になっているわけです。

まず、センタリングされるべきところがセンタリングされなかったりしてましたからね。
そういったところを一つ一つ修正。
paddingなどの値も考慮してどんどん修正作業を続けました。

しかし、途中でいきなりつまってしまったのは、Firefoxでは何故かレイヤーを使った表示になっていました。つまり、テキストや画像が浮いている状態になっていました。これは一体なんでなんだろうといろいろ弄っていたのですが全く分かりませんでした。1時間以上ずっと考えていました。
しかし、答えは回り込みの解除をしてなかったという単純なものでした。

こういったようにブラウザの互換云々を考え出すと非常に疲れるのです。

とりあえず、IEとネスケ系ブラウザは次のバージョンはpadding値の表示の仕方だけでもいいので同じにしてくれると非常に助かります。

簡単なdivタグ構築ポイント

・回り込み(floatタグを使う)
・回り込みを解除する
・サイズ固定(固定しないと大分厳しい)

忘れないようにこんだけくらいは書いておかねば。。。

trackbacks

trackbackURL:

comments

comment form

(no title - blog - にはじめてコメントされる場合、不適切なコメントを防止するため、掲載前に管理者が内容を確認しています。適切なコメントと判断した場合コメントは直ちに表示されますので、再度コメントを投稿する必要はありません。)

comment form