無駄な労働力

勤務先で、社員が閲覧するページを作っています。内容が確認できればいいようなクオリティしか求められていないので、UIがどうの、デザインがどうの、というのはどうでもいい、という要望です。

しかし──せっかく作るんだったらデザインも見やすい方がいい、UIも使いやすい方がいい──ということで、

  • (X)HTML文章の記述に配慮
  • CSSによるデザイン
  • (そこそこ)使いやすいUI

というのを念頭に作り始めました。──まぁ、勤務先はデザイン会社でもWeb制作会社でもないので、会社的には全く無駄な労働力を発揮してますが。

(X)HTMLテンプレートサイト

一から作るのは面倒なので、既存のテンプレートを利用しました。

The CSS Tinderbox - Open Source Web Design TemplatesThe CSS Tinderbox - Open Source Web Design Templates

あまり凝ったデザインにするつもりはなかったので、シンプルなfixed 1-columnを選択。──あまりにもシンプルすぎるのと、divの切り方が大ざっぱなので、ちょっとだけ苦労しましたが。

しかし、作業中に利用していたOperaでは問題ないデザインが、IE6だと崩れる状態。主に、フォントの大きさが違うのが原因でした。

さて、どうしよう──。

困ったときのKyoゑもん

CSSデザインで困ったときの駆込み寺、hail2u.netにお知恵を拝借。

hail2u.net - Weblog - ちょっとだけリデザイン @ 2006/08/29hail2u.net - Weblog - ちょっとだけリデザイン @ 2006/08/29

ここで紹介されているCSSを参考に、何とかOperaとIE6で差異のないページデザインができました。Kyo氏に感謝!

参考にしたCSSに思うこと

上記のページで使われているテクニックの一つがこちら。

body {
  font: 13px Verdana, Geneva, sans-serif;
  *font-size: small;
  *font: x-small;
}

この短いコードは、

  • IE6以前はフォントサイズをpx単位で指定するとサイズ変更できない
  • IE6以前はプロパティ名の前に*(または_)を付けると無視する
  • モダンブラウザ(FirefoxやOpera)では問題なくサイズ変更・読み込み可能

ということを知っている人なら、十分書けるはず。かくいう自分も、知っていました。

しかし、それを記事にして広めるまではできなかった。上記の元ネタ、Yahoo! UI Library: Fonts CSSを見て、「ああ、そんなんなら自分でも書けた(知ってた)のに!」と悔しがっている人もいるのでは?

真琴さんの言葉

──というときにいつも思い出すのが、hxxk.jpの真琴さんが書いたこの記事。

hxxk.jp - コロンブスの卵hxxk.jp - コロンブスの卵

「簡単だけれども知っていると有効な tips 」をこまめに書いて、注目を得る土台を作っていることが羨ましいという一文は、たぶん、血涙で書かれていると思います。うんうん、わかる!

改めて、「自分が当たり前に思っていること」でも積極的に書く、ということについて考えました。

──さて、自分は何を知っているんだろう?

この記事のタグ(偽)

[Kyoゑもんは怒られる?][CSSは簡単だが奥が深い][上記のお二人ともCSSコードが美しすぎる]

[2] このページの一番上へ戻る