notizbloc / kentymmt

数百ページの静的コンテンツを制作する機会があり、原稿は上がって来次第作成&サイトマップは変更の可能性大という案件があって、いつもどうり制作して行ったらCSSの管理で後悔したので、CSSのファイル構成やら分割方法やら一回整理したくなったのでメモ。

とりあえず反省点としては

• コメントを面倒くさがらずに書く
• ぶっつけでやらない（とりあえずで作らない）

僕がいつもやっているのはhtml側では

<link rel=”stylesheet” type=”text/css” href=”css/import.css” media=”screen” />
<!–[if lt IE 6]>
<link rel=”stylesheet” type=”text/css” href=”css/ie.css” media=”screen” />
<![endif]–>

と書き、CSS側で

@charset “utf-8″;

@import “basic.css”;
@import “layout.css”;

と書く。InternetExpolerはそれ用にまとめて書きたいのでまとめ（実際には書かないで済む事が多かったりして…）主にHTMLタグの初期化用のbasic.cssとレイアウト用のlayout.cssにする。しかしこれでは、ページ数が多ければ多いほどlayout.cssが膨大なものになってしまう。今回の場合は

<link rel=”stylesheet” type=”text/css” href=”css/import.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”css/hogehoge.css” media=”screen” />
<!–[if lt IE 6]>
<link rel=”stylesheet” type=”text/css” href=”css/ie.css” media=”screen” />
<![endif]–>

みたいに、ある程度のまとまり（原稿の上がってきた時期やらおおまかなディレクトリごとや）で別のCSSを作成する状況になってしまった。考えてみたのは

<link rel=”stylesheet” type=”text/css” href=”css/import.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”css/layout.css” media=”screen” />

@charset “utf-8″;

@import “basic.css”;
@import “common.css”;
@import “ie.css”;

共通のCSS（主にID）はcommon.cssに。それ以外をlayout.cssにする。あんまり変わってないか。しかもこれじゃie.cssはハックを使わざるおえなくなる。まとまらんな。

参考　http://2xup.org/log/2006/10/17-2115

話は変わって、今日はウェブサイトで文字を斜めに配置出来んのか！と酒の席で談義になり、色々と試してみた。結果としては、なんとか出来る。というか、かなり面白い。これは近々作品にしたいです。是非ソースを見て笑っていただきたいです。

Tags: CSS