Posts Tagged ‘CSS’

table で form を構築して Ajax.Updater で部分的に更新させる場合は注意が必要

例えばお問い合わせフォームを作る時、以下のようになることがあると思います。

1
2
3
4
5
<form method="post">
<table>
<tr><th>名前</th><td><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10">

これは問題の無い場合です。しかし以下のようになると問題が発生します。問題が発生するというか、本来これは間違った書き方になるので問題が発生するしないに関わらずダメなんですが、通常どのブラウザでも問題なく表示されてしまうのでミスだということに気付けません。

1
2
3
4
5
6
<table>
<tr><th>名前</th><td><form method="post"><input type="text" name="yourname" size="28" value="" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="youraddress" size="28" value="" /></td></tr>
<tr><th>お問い合わせ内容</th><td><textarea name="contact" cols="30" rows="10"></textarea><br />
<input type="submit" value="メール送信" /><input type="reset" value="クリア" /></form></td></tr>
</table>

しかし、上記のような間違った書き方をしているファイルを、Ajax.Updater で部分的に更新させるために別で読み込もうとすると IE Chrome Opera Safari などのブラウザでは問題なく表示されますが、Firefox ではレイアウトが崩壊するようになります。おそらく CSS が上手く適用されなくなるのが原因だと思われますがあくまで推測です。Firefox は真面目で本当に良い奴ですね。

Firefox にバグがあるわけではなく、Firefox が Ajax に上手く対応できていないわけではなく、自分が間違っているので Firefox に怒らないでください。私は(Firefox にもバグあるじゃないか!と)怒ってしまったので後悔しています……。

Firebug は最強の開発ツール。もっと早く出会いたかった

Firebug
Firebug を使えば複雑なボックスを視覚化してくれるので、CSS や HTML に詳しくない初心者にはかなり役立つツールではないでしょうか。

width や padding や border を同時に指定すると、どうしても想像していたものと違ったボックスが誕生してしまうことがあります。まだまだ初心者の頃は、これらについてあまり深く理解していないので、なかなか想像通りのものを作ることができません。今では私も完全に理解しているので、ボックスの構成で悩むことはありませんが、完全に理解するまでには結構な時間がかかりました。

でももし Firebug にもっと早くから出会っていれば、もっと早く理解することができたかもしれません。

ちなみに Firebug には Javascript をリアルタイムに編集デバックすることができます。ボックスの視覚化だけではなく、こんな物凄い機能もあるみたいなので、今すぐインストールしましょう。

Firebug の使い方を説明しているページ

Ajax初心者入門講座: Step4・Firebugでデバッグする
Ajax初心者入門講座: Step5・Firebugで変数の値を変更する
Ajax初心者入門講座: Step6・FirebugでCSSを編集する
Ajax初心者入門講座: Step7・Firebugでボックスを視覚化する

JavaScriptやCSSで簡単にIE6でアルファ画像(透過png)を使う方法

IE6はアルファ画像(透過png)が使えませんが、今回紹介する方法で簡単にIE6でもアルファ画像を使うことができるみたいなので、いつも通りメモしておきます。
ちなみに透過を活用することによって、さらにデザインの幅が広がるかもしれません、あー楽しみかもです。透過を活用したウェブデザインは以下のサイトでいろいろ紹介されています。
透過をきれいに使ったウェブデザインいろいろ | DesignWalker Read more…

IE6のよく忘れてしまうバグ対策総まとめ

IE6 に対する怒りが増し、だんだんと Microsoft に対して良い気持ちが持てなくなってきました。今回はカロリーデータベースの構築中に、こんなことも正しく解釈できないのか……と思わせるほど、あるはずがない、あってはいけないと思ってしまうほど致命的なバグで忘れやすいものを(自分専用に)まとめてみました。 Read more…

IE6はCSSのmin-widthやセレクタが使えない。

子供セレクタはIE6では使えないようです。このブログでいくつか使用していたため、IE6ではとんでもないレイアウトになってしまいます。
セレクタ(selector) CSS 前提知識

あとmin-widthも使えない。これによって、いろいろとやりたいことが制限されます。このブログもmin-widthが使えないがために、IE6では横幅を強制的に指定することになってしまいました。できるだけFirefoxやIE7などで見てほしいです。

ちなみにmin-widthをIE6で実装する方法について、とても分かりやすくまとめてあり、大変参考になりました。
IE6のmin-width、min-heightハックに関して – Webtech Walker
IE6でmin-widthを実装する方法のまとめ – Webtech Walker

ちなみにNetscapeでも若干レイアウトが崩れます。Webデザインって難しい……。

CSSセレクタに関する非常に分かりやすいページ。

セレクタ – CSS2リファレンス
このページはあまりにも分かりやすい。私がはじめてCSSを勉強したサイトはどこか忘れたけど、セレクタについての説明も特になく、要素に直接styleで適用する感じだった。といっても、その時は将来本気でやろうとは思っていなかったから、別に見えれば良かったから問題なかったんですが。 Read more…

  • Date: 2009-1-27 (火) 21:41:19
  • Category: CSS
  • Tags: