「知っていること」を書く難しさ

シェアする

#### 無駄な労働力
勤務先で、社員が閲覧するページを作っています。内容が確認できればいいようなクオリティしか求められていないので、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](http://www.dbfnetwork.info/tinderbox/demos/fixed-1c/index.html “the css tinderbox: fixed 1-column layout (basic)”)を選択。──あまりにもシンプルすぎるのと、`div`の切り方が大ざっぱなので、ちょっとだけ苦労しましたが。
しかし、作業中に利用していたOperaでは問題ないデザインが、IE6だと崩れる状態。主に、フォントの大きさが違うのが原因でした。
さて、どうしよう──。


#### 困ったときのKyoゑもん
CSSデザインで困ったときの駆込み寺、[hail2u.net](http://hail2u.net/ “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](http://developer.yahoo.com/yui/fonts/ “Yahoo! UI Library: Fonts CSS”)を見て、「ああ、そんなんなら自分でも書けた(知ってた)のに!」と悔しがっている人もいるのでは?
#### 真琴さんの言葉
──というときにいつも思い出すのが、hxxk.jpの真琴さんが書いたこの記事。


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

「簡単だけれども知っていると有効な tips 」をこまめに書いて、注目を得る土台を作っていることが羨ましいという一文は、たぶん、*血涙で書かれている*と思います。うんうん、わかる!
改めて、「自分が当たり前に思っていること」でも積極的に書く、ということについて考えました。
──さて、自分は*何を知っている*んだろう?
#### この記事のタグ(偽)
[Kyoゑもんは怒られる?][CSSは簡単だが奥が深い][上記のお二人ともCSSコードが美しすぎる]

コメント

  1. 真琴 より:

    いやまあ、血涙まではw
    e-luckさんは知識を惜しみなく公開して、それでいて腰の低い方なので、そういった面でも尊敬している人です。
    ところで、ここで取り上げられているkyoさんのCSSですが、おかしな点が複数ありますね……。ここのコメントで書いても何なので、近々考察してみようかなあ。

  2. asiamoth より:

    そうですね。e-luckさんの物腰柔らかな書き方は、自分も好きです。
    ──しかし、血涙は言い過ぎでしたか(笑)