スタイルシート大改造?

ブログのデザインを地味に変更しましたw
前よりは読みやすくなってると思います(≧▽≦)
リンクにマウスオンするとぴこっと動くのが面白い(笑)スタイルを数行書き加えるだけでできるのでオススメです。

今回試したのは、
「スタイルシートの複数ファイル分割管理」
どうしてもスタイル定義が多くなって管理が大変なので、ここらで大改造して管理しやすくしようと目論んだ次第です。
大改造はうまくいった。かな?w

まずcssファイルをどういう分割の仕方にしようかで悩んだ(汗)
最終的に、ボックスカラムレイアウト(box layout)・テキストフォーマット(text format)・色、画像、デコレーション(color decoration)と、レイアウト・デザインの段階ごとに分かれるようなイメージで分けて管理することに。
あとはここにクロスブラウザレイアウトのためのハックは別ファイルにしていきたいと考え中。今は同じファイルに。
htmlファイルに直接linkするmain.cssにて、

@import url(default.css);
@import url(layout.css);
@import url(text.css);
@import url(color.css);

とこんな感じで、あとはそれぞれのcssファイルを編集するのみ。
default.cssはブラウザのデフォルトスタイルをリセットするcssファイル。
ここまでしたら、あとは各ファイルの「編集・アップ・確認・(悩むw)」を繰り返しておりましたw

これやって気づいたこと。
このブログはMovable Typeで作ってるんですが、htmlだけじゃなくてcssとかのテンプレートでも更新するたび再構築が面倒(汗)というか遅い。
今までこんな効率悪い事してて(汗)Movable Typeのタグを使わないファイルはFTPソフトでアップした方が早いです(笑)
どうしてもっと早く気づかなかったo(´□`o)w

cssの管理とかここら辺のことでご意見ある人はぜひぜひコメントをw
もっと知識をつけて使いやすくしたいですからね。
それ以外のひともコメントをw
あ、各ブラウザ対策ほとんどしてないので、見えないってヒトも報告いただけたらありがたいです。
現在はFireFoxで確認しながら作って、InternetExplorerにちょこっと対応wという作りかたしてます。

あと、便利なもの発見!
It's All Text!
FireFoxのアドオンです。テキストエリアにフォーカスすると右下にちっちゃな「edit」ボタンが出ます。
押すと外部のエディタでテキストエリアに書き込むことが可能!初回起動時にエディター選択できます。後から変更も可能。
そのエディタで保存をすれば、すぐそのテキストエリアに流し込まれます。すごい!
自分の好きなエディタで書けるので快適です♪このエントリも早速このアドオン使って更新w
FireFox ver.1.5.0.2で動作確認。ver.2.0では動くのかな?

以上長い更新でしたw
最近えにっきを描いて無いなぁと思いつつ。最近コーディングばっかりだったので久しぶりに絵もいいな。

関連記事