Category : Web

previous entry CSS Naked Day | CSS Nite LP, Disk 3に next entry

コーディングコンテスト Vol.1に応募

Date2007-04-28 Trackback0 Comment0 CategoryWeb Tags

コーディングコンテスト Vol.1に作品を応募してみました。

あまり自信ありません。恥をさらすのを覚悟で,力試しのつもりです。締め切り間際で焦ってやったところもあったので,見返すとあちこち直したいところもありますが。

CSSファイル

ここのところCSSファイルの分割管理を試しています。何枚ものファイルに細かく分けるとかえって管理しづらいですね。それで,今は,「どのファイルに読み込まれるか」で分けています。

  1. サイトのすべてのページに読み込まれるもの
  2. 特定のレイアウトのページに読み込まれるもの
  3. ひとつのページだけに読み込まれるもの

たとえば商品の紹介のページとコラムのページではレイアウトが異なってきます。商品紹介のページで使うものと,コラムのページで使うものは,product.css,column.cssという具合に別にしておく。これが2.のファイルです。

オプションがいろいろあって,他の商品紹介のページと違う部分が出る,というふうなときは,そのページ専用のCSSファイルを作る。こちらは3.

すると,だいたい1ページに3枚くらいのファイルを読み込むことになるのですが,XHTMLファイルからは3.にリンクして,1.と2.は3.にインポートする。というふうにしてみました。(サイトのボリュームやページ構成・デザインなどによって,少々パターンが変わることはあるかもしれませんが)

今回は2ページだけだったので,共通するCSS1枚と,各ページのCSSがそれぞれ1枚ずつ,計3枚ということになりました。1.と3.ということですね。

XML宣言

XML宣言を書いています。今は,こうした企業サイトのファイルをXHTMLにすることによる恩恵はさほどないと思っています。でも,数年先,XMLで書かれていることのメリットが出てくるんじゃないか。XSLTを通して様々に加工して利用される状況が出来上がっていくんじゃないか。とも思っています。それなら,XMLファイルであることをちゃんと明示しておいたほうがいい。

XML宣言を書くとIE6が過去互換モードになってしまいます。なので,IE6対策でちょっと苦労しました。XML宣言のせいだけではありませんが,CSSコーディングの半分くらいの時間はIE6のために費やしたという感じです。

知りたいこと

解決したい疑問が何ヶ所か。

  • トップページの最新製品情報の角丸の枠3つの横並び,下辺を揃えるのにどうするか。
    heightemなどで指定するというのも考えたのですが,font-sizeを変えたときのことを考えて,高さ可変にしてみました。でも,ぼくがやったのはちょっとアクロバティックでエレガントな方法じゃない。
  • 画像の切り分け。特にヘッダー部分。極端なことを言うと,1枚の背景画像にしてしまうこともできるのですが,メニュー項目が増えるとか,ロゴだけちょっと修正とかというとき,その部分だけ画像を取り替えるほうが便利かも。
  • 角丸の枠を使うとき,無駄な要素を増やさずに内容に合わせて高さを可変させるのはちょっと難しい。スマートな方法を知りたい。

審査結果とコーディングデータが公開されたら,皆さんのコーディングをぜひ参考にさせていただきたいと思っています。


機会をつくってくださったHappyLifeの平澤さんはじめ,企画をすすめてくださった関係の皆さんに改めて感謝申し上げます。

CSS Nite LP, Disk 3 参加申込みしました。会場でお会いできるのを楽しみにしています。

banner:CSS Nite LP, Disc 3 -Coder's High-

Trackback (0)

Trackback URL :
http://blog.d-spica.com/MT/mt-tb.cgi/29

Comments (0)

Add Comment

Top