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;を指定してましたね。。
はじめまして。
画像に余白ができてしまうバグの解消でしたら、
ボクはこうやっていますが・・。
h1 {
vertical-align:bottom;
}
yusukenakanishi.com のリセットCSS で検証したわけではないので、
同様のバグではないかもしれないですが・・・。
余談ですが、ブログ楽しく読ませてもらってます。
ボクも静岡のWeb会社でマークアップエンジニア風（もちろん、いろいろ掛け持ちですが・・）な仕事をやってます。
マークアップエンジニア大変ですよね。分かります・・・。
Tuesday, September 9, 2008 wonder
ああ、間違えですね。
imgタグにかけるんでした。
h1 img {
vertical-align:bottom;
}
Tuesday, September 9, 2008 wonder
＞ wonder さん
はじめまして！コメントありがとうございます。
僕も最初にvertical-align: bottom;で検証してみたのですが違うようです。。
もしかするとリセットCSSの書き方がまずいのかもしれませんね。
楽しんで頂いているなんて嬉しい限りですね。
このブログは方向性が明確でないのと更新度が低いのが問題ですので改善できるよう頑張ります。
マークアップエンジニアは確かに大変ですね。
僕は自分の技術力が不安になります。このままで大丈夫かなぁと。。
ま、日々目的を持って勉強するしかないのですが。
Tuesday, September 9, 2008 なかにしゆうすけ
はじめまして。
いけサイから来ました。
京都でお仕事されてるんですね。
僕も京都でWEBデザイナーしています。
と、いっても市内じゃなくて、田舎でほそぼそやってるんですけどね。
h1の件なのですが、これって
bodyのline-height:1.5が反映されてるんじゃないでしょうか？
全然、違うこと言ってたら申し訳ないです。
では、また見に来ます。
Tuesday, September 16, 2008 mako
＞ mako さん
はじめましてー！コメントありがとうございます。
そうです京都です。なので仲良くしましょうね。
ikesai.comに載せていただいたお陰でアクセスがびっくりするほどアップしましたね。ikesai.comって誰が運営しているんだろうか。。
＞ h1の件なのですが、これって
＞ bodyのline-height:1.5が反映されてるんじゃないでしょうか？
全部の要素に行間をつけちゃっているのでこれっぽいですね。
また検証して報告するようにします。
是非、また来てください。
Tuesday, September 16, 2008 なかにしゆうすけ
＞ mako さん
ありがとうございます。
やっぱりbodyのline-height: 1.5;だったようです。
こんな指定したつもり無いのですが。いつの間に。。
いつになるかわからないですがリニューアルする時に直すようにします。
Wednesday, September 17, 2008 なかにしゆうすけ