EKAKINOKI

とりあえずCSSに書き換え

HTMLの仕様を取り決めるW3C(WWW Consortium)が「今後はCSSでやってくれ。CSSに書き換えないのはみんなの怠慢だ。」と言ったとか、、、そんな噂がネットを経由してちょこちょこと耳にはいっていた。「HTMLオンリーのままではちゃんと表示されなくなる、、いつかはCSSに書き換えないといけない、、」・・・ちょっと不安〜

とはいっても・・・

いまあらたにCSSを勉強する気なんてないし、なによりも「HTMLはHP(ホームページ)を作るうえで基本中の基本じゃん。」しかもえかきのきは、よりシンプルなHTMLを身上としてきた。いくら頂上会議でそんなこと決めたって、HTMLオンリーだときちんと表示されなくなるとか、そんなこと一朝一夕には起こりえない。W3C御宣託のために世界中のひとがHP書き換えるなんてのもちょっと非現実的。

HTMLに対するそんな信頼感みたいのもあった。そういうことに詳しいひとにもサグリをいれてみたけど、「いつの日か・・」ったってまだまだ余裕あるみたいだし。。とりあえずいいや。。むろん「一抹の不安」は残る、でも・・・いつの日かはやらなきゃならないだろう、その「いつの日か」ができるだけ遠い日でありますように、ぐらいで、ともかく、抱かえきれるぐらいの不安におさまっていた。

ところがある日・・・

Macromedia社のDreamweaverMX2400(英語ヴァージョン8が最新)に試供版があるって〜?!DreamweaverはFlashとか動きがあるHPを作成できるソフトとして有名で、もちろんCSS作成にも完全対応。(いままでつかってたDreamweaverは超古いヴァージョン3とかで、それでCSSなんてかんがえもしなかった。)

喜び勇んでダウンロードして(このとき「禁断の実」だと気づくべきだった)、舌なめずりしながらためしているうちに、、いつしか「CSSの深〜い谷」にさまよい込んでいました〜

http://www.macromedia.com/jp/

CSSは「Cascading Style Sheet」、一般的にスタイルシートなどと呼ばれている。CSSの基本的なコンセプトを理解させてくれたのはつぎのサイト↓

スタイルなCSSの基礎講座
http://www.parkcity.ne.jp/~chaichan/src/cssmain.htm

HTMLというのは「基本的な構造」、建物で言えば「骨組み」みたいなものでこれはなくならない。っつ〜か、骨組みは骨組み。ただ、壁はスペイン風にするとか、天井の高さは共通に2メートルにするとか、「そういうレイアウトの部分はひとつのファイルにまとめちゃえ」というのがCSS。つまり、個々のファイルにレイアウトはごちゃごちゃと書き込まず、CSSファイルのどのレイアウトを適用するかだけを記述すればいい。

こういうCSSの基本的なコンセプト、CSSをどうやって書いたらいいかを理解するのは、HTMLをある程度わかっているひとにはむずかしくない。本も一冊買ったけどほとんど見なかった。おもに上のサイトと、その他ウェブ上でちょこちょこいろんなサイトを参照しただけ。基本的なところをおさえれば、あとはむしろどれだけDreamweaverを使いこなすかのほうにアタマをつかう。

具体的に・・・

CSS書き換えをはじめると、ページソースを「構造とレイアウト」にはっきりわけて考えるようになり、HTML本来の意味がより見えてくる。それで、理解していたつもりのHTMLをいままでいかにいいかげんに書いていたかということにまず気づかされた。これは成果。

えかきのきは一応シンプルさを身上としてきたので、じっさいにすることはそんなにない。フォントとテーブルに関するすべてのタグを取り払ってCSS形式にする・・・それだけ。問題は、タグを取り払うのと、適当なCSSに置き換えるのとを同時に行えれば、早く片付く。

どってことないだろうとタカをくくっていた。ところが・・・

「検索・変換」などをつかってタグは簡単にはずせても、それがかならずしも手際よくCSSに置き換えられるものばかりではない。置き換えがうまくいかないとソースに矛盾が生じたりし、、、けっきょくは、ファイルひとつひとつ(!)に丹念に目を通さなくちゃならないじゃ〜〜〜ん!

そればかりじゃない。シンプルさを身上としてやってきたつもりでも、案外いろんなところでアドリブ的なレイアウトをつかっていたりする。

CSSにするということは「余分なレイアウトをどれだけ削れるか」。CSSファイルに書く命令の数は、より少なくより整然としているほうがやりがいがある。あらためて「レイアウトの一貫性」「レイアウトのシンプルさ」をかんがえさせられた。

けっきょく、、、ボチボチやってCSS形式への書き換えをあらかた終えるのに一ヶ月強(HTMLからCSSへの変換ソフトみたいのないの?) ・・・

<BR>属性とか<MAP>とかの問題はまだ残っているし、INDEXだけは段組みなので、生兵法ではこわいから<TABLE>のままにしてある。レイアウトの微調整とかもあるし(これはカンタン!CSSファイルの数字を変えればすべてのファイルが反応する)、、そういうのはおいおいやっていくとして、、

CSS形式にしてみると・・・

構造だけではなくレイアウトまでページソースがシェイプアップされて、ほんとシンプルで美しい〜〜〜〜〜!<TABLE>と<TR>と<TD>と<FONT>で埋め尽くされた「以前のなんとか」に、2度と戻りたいとはおもいません〜〜

それにしても、新規サイトを立ち上げたほうがずっと楽なぐらい、ものすごい体力勝負でした。 。

(2005.10.16.)

※ このファイル中のタグ例は全角で表記してあります。

※ IEとNetscapeでページの動作確認をするのが一般的ですが、個人的に最新版Netscapeの使い勝手が気に入らなかったのと、サイトのアクセス分析をみてもNetscapeをつかっているひとがいまはほとんどいないのと、またまた個人的にですが、Firefoxが気に入っているのとで、えかきのきではIEとFirefoxでのみ動作確認しています。

かんれんサイト

World Wide Web Consortium
http://www.w3.org/

CSS 文法チェック
http://www.htmlhelp.com/tools/csscheck/

CSSによる段組
http://allabout.co.jp/computer/hpcreate/closeup/CU2004..

絵画 ロシア イタリア