CSS

雑記の方でも先日触れたが、トップページをCSS主体に直してみた。
色合いなどが多少異なるのはあえてそうしているだけで、後で元に戻すかも知れない。

CSSだけで表組みしようとしたのだが、これがまたなかなか大変だった。
ブラウザによって見え方が違ったりして、おそらく何か良い解決方法があるのだろうがそこまでには至らなかった。
仕方がないのでCSSとテーブル組のハイブリッドという、不具合が起きたらテーブルで誤魔化す的な手を使った。
とにかく線を引く部分は、その線が1dotずれても支障の無いようなデザインにしておかないと厳しい。
それこそ最初に作った二重テーブル方式ならば、タグは複雑だがブラウザによる見え方の違いは最小だ。
しかし今回はそのあたりを簡略化するためにCSS化してみたわけで、結局CSS+テーブルなのだ。

この方式だとケータイからでも見る事が出来るが、だったら今まで通りでも同じじゃんと言われそう。
最初はCSSでどんどん指定していったのだが、ブラウザ依存とかそのほかの解決を進めるうちにだんだん元に戻ってきた。

センタリングなどはCSSで指定した上でタグも書いたりとか、フォント修飾もダブっている所もある。
唯一メリットと言えるかも知れないのは表示順序で、テーブル組の場合は否応なしにページの左のメニュー部分から表示されたのだがCSS化によって雑記本文が先に表示されるように出来た。
これによってケータイブラウザなどで見た場合はメニューは一番下に行く事になり、本文が最初に読める。

そんな作業中に気づいたのが、テキスト入力ボックスを付けるとIE＋XPでのスクロール速度が遅くなる事。
これはPC依存というかグラフィックカードの能力による所も大きいのだろうが、Google検索ボックスを外すとスクロールが速くなる。
そこで新型検索ボックスに変えてみた。
サイト内検索とWeb検索の一発切り替えがなくなったのが少し不便かも。

タグのネストなどは単純化されはしたが、その分だけブラウザ依存度は大きくなったように思う。
特にIEとそれ以外で見え方が異なるのだが、これの解決には至っていない。
苦労した割に対してページサイズも小さくなっていないし、相変わらずCSSで修飾したり修飾タグを使ったりの混在だし、もう少し改造しないといけないかな。
ただし、何をどういじっても見栄えが同じであればそれは自己満足にしかならない。

以下のリンクをIEで見ると花びらの部分が単純な四角形だ。
http://www.cssnewbie.com/example/css-art/flower.html
しかしFireFoxはChromeでみれば角が丸くなって花びらっぽく見えない事はない。
トップページの左上もIEで見ると直角だが、それ以外で見れば角丸になっているし細かな所ではリンクの下線の位置も違って見える。
同じIE8でもXP上で動くそれとWindows7ではまた少し違う。
IE9だとCSS3対応と言われているので、FireFoxのように見えるのかも。

テーブルタグは今でこそほぼ同じように見えるようになったが、以前はこんな調子だった。
http://www.fnf.jp/table_test.htm

従来のテーブル主体のページをケータイブラウザで見ると、レイアウトはそのままに左右が圧縮された形で表示される。
CSS主体にするとブラウザはCSSを理解しないので、上に書いたように表示順を変える事が可能になる。
そこで中央のテキスト、右のテーブル、その下に左のテーブルという風な順序で表示されるようにした。