Tuesday, July 15, 2008
MyリセットCSSについて
少し前に取り上げたリセットCSSを使わない？という向きもあるですが、実際はそうも言ってられないわけです。。自分（社内？）用のリセットCSSについて見直しておこうと思います。以下のものが、比較的最近のもので公開できるリセットCSSですかね。確かCSS Tools: Reset CSSを参考にしたと思うんですが。。
ただコーディングする際に問題点があるので書いておきます。下記のようにh1～h6の見出しに画像を入れると変な余白ができてしまいます。
<h1><img src="" alt="" width="" height="" /></h1>以下のCSSで解決はするのですが、この方法でいいんでしょうか？皆さんどうされてますか？それともこんな症状はでないのでしょうか。。
h1 {
line-height: 1;
}DOAS
リセットCSSの上部に概要を書いているのですが、僕はこういうのにルールがあるほうが嬉しいのでDOASを採用しています。VERSIONFIVEさんにも詳しく書かれています。社内の共通ルールとしても採用しようと思っているのですがどうなんでしょうかね。案件によってはルールが定められていたり、余計なこと書かないでと言われたりなので臨機応変にというところでしょうか。
主として単一ファイルで完結しているJavaScript, Perl, PHPなどのスクリプトやXSLT, CSSなどのスタイルシートの概要を、ファイル内に記述するための語彙。
The Web KANZAKI：DOAS: Description of a Script/Stylesheet vocabularyより
YUI Fonts CSS
フォントのクロスブラウザ対策に使ってます。他にも対策の仕方はあるのですが僕はYUI Fonts CSSが好きなので使ってます。ただ、下記のような<span>～</span>の間だけ文字を小さくしたい場合はどうすればいいのかわかりません。法則性があるのかなといろいろ検証してみたのですがなさそうです。。
<p><span>中西祐介</span>ナカニシユウスケ</p>どうしてもっていう時は以下のようにそれぞれの<span>～</span>にフォントサイズを指定して解決しているのですが不細工なんですよね。
<p><span>中西祐介</span><span>ナカニシユウスケ</span></p>リセットCSSの見直しというよりも質問ばかりになってしまっています。心優しい誰か教えてください。。
追記（Wednesday, September 17, 2008）
h1～h6の見出しに画像を入れると変な余白ができる件についてです。
コメント欄にもありますが、makoさんのお陰でわかりました。
body {
line-height: 1.5;
color: #212121;
background: #eae5e3;
}
bodyにline-height: 1.5;を指定してましたね。。
