テーブルレイアウトのフォームをCSSで再現してみて失敗したの巻 : WebとPCのメモ帳

2009年10月
≪
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
≫
2009年12月

WebとPCのメモ帳
Web・Blog
HTML・CSS
テーブルレイアウトのフォームをCSSで再現してみて失敗したの巻

テーブルレイアウトのフォームをCSSで再現してみて失敗したの巻

2008: 08/04(Mon)

Category

Tags

このBlogは連絡先としてメールアドレスを表示せず、メールフォームを使っています。経緯はFC2ブログにCAPTCHA機能付きのメールフォームを設置するというエントリに書いてあるとおりで、spam対策でFC2の標準機能をアップロードしたHTMLから利用しているだけです。

ところでこの自作フォーム、本当に最低限の機能しかなく、見た目の装飾も一切ありません。別に機能には何の影響もありませんが、まあ見た目が寂しいといえば寂しいのは間違いないでしょう。

そこで思いついたのが、前に使っていたFC2フォームレンタルの見た目をCSSで再現できないか？という実験です。このサービスで提供されているフォームの見た目はほぼ完全にテーブルレイアウトで作られており、テーブルレイアウト→CSSへの変換の練習になるのではないかと考えました。構造自体が単純で時間がかかりそうには見えませんし、軽く試すには丁度いいと思ったのです。

ところが、これを実際にやってみるとどうにも上手く行かないもので……。

テーブルレイアウト → CSSへの変換実験

今回この実験をやるにあたって、ある程度の条件を設定することにしました。「何をやってもいい」ではあまり面白くありませんからね。

使用するのはHTML 4.01 Strict
なるべく「妥当」と思われるマークアップをする
「装飾のため」の要素(タグ)は作らない
The W3C Markup Validation Serviceで「Valid」になる
見栄えは全てCSSで設定する(画像を使ったりはしない)
IE6・IE7・Firefox 3・Opera 9.5で破綻なく見ることができる
(面倒なので)CSSを振り分けたり、CSSハックを使ったりはしない

再現する対象としては、FC2フォームレンタルのサンプルページである以下のものを使いました。以前私が使っていたものと同じです。

お問い合せフォーム

そして完成したのが以下のフォーム。

メールフォーム : WebとPCのメモ帳

見てのとおり、完全に再現することはできませんでした。(*1)「本文」の部分の背景色と、「確認ボタン」の枠の内側部分です。
([*1]上部の注意文の部分が白いのはそっちの方が読みやすいと思えたので変更しただけで、同じようにすることは可能。)

前者は高さ(height)をCSSで設定すればFirefoxとOperaでは再現できましたが、IE6とIE7でレイアウトが完全に崩れてしまって諦めました。原因はよくわからないんですが、多分IEのfloat周りの挙動の問題でしょう。後者はdivの中にdivを入れれば問題なく再現できるのですが、「装飾のため」の要素(タグ)は作らないと決めたので方法が思いつかなくなりました。もしかしたら何か方法があるのかもしれませんが……。

こんな簡単なサンプルでも、私の腕だと同じものが作れないとわかりました。IEで上手く表示されないため思ったより時間がかかりましたし、まだまだ勉強が足りませんね。