Web Site のCSS化

少し前の話ですが、The Double BogeyのサイトをCSS化しました（まだ未完部分残ってますが）。Webで情報発信したければ、今はブログで簡単にできてしまので、こんなこと覚える必要もないんでしょうけど、僕は物好きなのか？ちょっとした探究心で首をつっこんでしまったので、メモ代わりに書いておきます。

このサイトをつくったのが約3年前。とりあえず使えるオーサリングソフトがあったので、それで作るのはいいとして、テキストを打つ、リンクを貼る、画像を貼るぐらいはわかるんだけど、レイアウトがどうにも思う様にならない。情報収集の結果行き当たった本が「テーブルの枠線を非表示にして、そのセルの中に文字や画像を入れて、レイアウトを固定しよう」というもの。要は古本でちょっと時代遅れの手法を習得してしまったわけだけど、結果的に僕にとってはこれがよかった。素人なりに納得のいく見栄えものがつくりたかったので、オーサリングソフトのレイアウトビューとテーブルで視覚的に配置していく方法は分かりやすかったし、時代遅れとはいえ一昔前は主流だった手法なので、それなりのものができた。これがなかったら僕は作りかけたサイトをお蔵入りにしてしまったかもしれない。この時点ではHTMLは全くと言っていいほど理解しておらず、ソースを見ようともしてませんでした。

そんなわけで、公開、更新を始めたわけですが、
　１）更新が億劫になってきた（ありがち）
　２）OSのバージョンが上がるに従ってオーサリングソフトの動作が怪しくなってきた
　３）今はCSSが主流で、ベターな手法である事がわかってきた
バンドのサイトだからライブごとにタイムリーに更新できないと意味がない。情報を都度継ぎ足していくんだけど、テーブルのセルを増やし、テキスト、画像を入れ、書式を整えるという作業が結構面倒。オーサリングソフトの動作が重いこともあってだんだん億劫に。更にソフト自体が少し古いバージョンで、MACを買い替え、OSが新しくなったりするうちに動作が不安定になってきた。買い替えようにも、この手のソフトは結構高価。一方でいろいろ興味がわいてWebデザインの本を読んでいるうち、CSSが合理的であることが分かったり、ブログて多少HTMLタグを覚えたこともあって、CSS化に挑戦してみようか？と言う気になってきました。

よくわかるXHTMLとCSSによるWebサイト作成 (よくわかるトレーニングテキスト)

そこで、試しにこんな本を参考にテキストエディタで一からHTML＋CSSを書いて、デモサイトのようなものを作ってみたところ、意外とそれなりのものができる。CSSでボーダーや背景色を指定したり、テキストのロールオバーまでできるので、画像を使わなくてもそれなりにビジュアルになる。さらにデザインをCSS側に任せることで、HTMLソースがシンプルになるので、中身が理解できて、追加や修正も難なくできる。何よりテキストエディターは動作が軽いのでストレスなく作業ができる。

ここまで確認して、いよいよThe Double Bogeyのサイトに手を入れることを決心。ここで更に後押ししてくれたのがこの本。

「XHTMLマークアップ&スタイルシート」リフォームデザインガイドブック

テーブルレイアウトのサイトをCSSにリフォームするという、ちょうどぴったりの内容。これを読みながらフォントやテーブルのタグをHTMLから削除し、CSSに置き換えて行く作業。

驚くのはCSS化することで不要になるHTMLがいかに多いかということ。テーブルタグは本来の目的と違う使いかたをしてるので当然と言えば当然。ひどいのはフォントタグで指定した覚えのないところにもやたらと細切れに入っている。多分、オーサリングソフトで試行錯誤した跡がそのまま残ってしまったんでしょう。どこかのサイトにも書いてあったけど、オーサリングソフトは「高速自動代書システム」みたいなもんで、ビジュアルに指定したことをHTMLという本来あるべき言葉で書き出してくれるありがたいツールですが、やっぱり「おまかせ」ではなく、結果書き出されたHTMLをチェックできたほうがいいですね。

まぁ、そんなこんなで、一応主要なページのCSS化を、ちょっとしたデザイン変更も含めて完了しました。メリットが顕著なのはLive Histoyのような、同じパターンの情報を規則正しく並べ、追加していくページ。書式はCSS側で記述してあるので、追加するときも、例えばタイトル部分をしかるべきタグで囲ってやるだけで、CSS側の記述に従い統一された表示になってくれるので、いちいち手作業で書式を指定する手間がない。よって更新が楽になる。

と、ここまではいいことづくめのようですが、最後に難関が。その難関とは「IE対策」。困ったことにブラウザシェアNo.1、天下の Internet Explorer が「バグが多い」「Web標準を素直に解釈しない」困った存在だそうで。上に紹介した「リフォーム」本にも「バグの少ない、CSSを正しく解釈するFirefox, Opera, Safari等で検証を済ませてから、バグの多いIE対策を行うのが効率的」とあり、IEのバグを逆手に取って意図したとおりに表示させる裏技がいろいろ紹介してある。マイクロソフトさんはそうそう簡単に仕様を変えてくれない、でもトップシェアだから無視するわけにもいかず、世界中のWebデザイナーが考えた裏技がひろまってるそうな。今回もそういった裏技をいくつか仕込みましたが、なかなか一筋縄ではいかず、まだ表示がおかしいところが残ってます。

というわけで、何の知識もなかった僕が無謀にもHTML＆CSSに挑戦した記録でしたが、、、参考に、、、ならないすよね。ただの駄文です（笑）。IE問題さえなければ言うことないんですけどねぇ。

Comments

[投稿情報: やっくん]

はい！よ〜く分かりました！

カタカナとアルファベット以外は！（笑）

[投稿情報: bogey#1]

おぉ、やっくん！
よくぞ駄文におつきあいいただきました。
よ〜く分かっても、あんまりええことはないと思うけど、悪しからず（笑）。