Demoを見る

もう年内は書かないと言ったのですが、24 waysさんにA Festive Type Follyという面白そうな記事があったのやってみました。後、もっと前にRomán CortésさんがHomer CSSというのをやっていたのを思い出しプラスアルファして上記のリンクに。

以下のように汚いソースを書き、CSSのpositionプロパティを使って絶対配置してるだけなんですねぇ。

タイトルロゴのHTML

<div id="labs-01">
<p><a href="/"><em class="word-01">★
<span>★
<span>★</span></span></em>
<em class="word-02">M
<span>e
<span>r
<span>r
<span>y</span></span></span></span></em>
<em class="word-03">Christmas</em>
<em class="word-04">2008</em>
<em class="word-05">★
<span>★
<span>★</span></span></em></a></p>
</div>

Merry Christmas：サンタクロースのHTML

<div id="labs-02">
<p><a href="/"><em class="word-01">★
<span>★
<span>★</span></span></em>
<em class="word-02">M
<span>e
<span>r
<span>r
<span>y</span></span></span></span></em>
<em class="word-03">C
<span>h
<span>r
<span>i
<span>s
<span>t
<span>mas</span></span></span></span></span></span></em>
<em class="word-04">2
<span>0
<span>0
<span>8</span></span></span></em>
<em class="word-05">★
<span>★
<span>★</span></span></em></a></p>
</div>

使用したCSSはこちら

Safariで見ると画像のように見えますね！サンタクロースは飽きてきたのでクオリティが低いですが見えますよね？やってみたかっただけなので実用的でないとか画像のaltでいいという突っ込みは受け付けません。ではでは、よいクリスマスを！

追記

IE6とMacのSafariで表示が上手くされてないですね。。
例としてはjontangerine.comでサイトのロゴの部分に使っておられます。

少し前に取り上げたリセットCSSを使わない？という向きもあるですが、実際はそうも言ってられないわけです。。自分（社内？）用のリセットCSSについて見直しておこうと思います。以下のものが、比較的最近のもので公開できるリセットCSSですかね。確かCSS Tools: Reset CSSを参考にしたと思うんですが。。

• yusukenakanishi.com のリセット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;を指定してましたね。。

「リセット用CSSを使わない」ことが流行ってる（らしい）理由やCSS Nite in Ginza, Vol.23のまとめを見てショックを受けたというお話。本当に仕事に関係するネタだよ。

• どのブラウザでも同一の見た目にするのは、テーブルレイアウト時の負の遺産
• 若干ブラウザ間で見た目に違いがあってもいいじゃない
• ブラウザ間の見た目の違いよりも、ブラウザが既にもっているスタイルを有効利用しよう

Webサイトはまったく同じ見た目である必要はないにもあるけど、レイアウトが崩れていても良いという意味ではなく“若干”というところがミソなんだろうね。きっと。ブラウザごとの差を生かしてサイトにひと味加えられると格好いいんだろうなぁ。

でもね。クライアントやディレクター、デザイナーがCSSのディフォルトのスタイルを考慮してくれるとは思えないし、しかも納得させる術なんて持ってないよ。。やっぱりこの辺はマークアップエンジニア以前の問題だと思うんだけどなぁ。リセットCSSにしろ、CSSハックにしろ、画像置換にしろ、それらを使わないという設計で進んでこないと、いざコーディングの時にやっといてねと言われて出来るもんでもなし（出来ることもあるけど）。それにねこれを言い訳？にしたらクライアントにサボってるとかアマチュアだとか言われそうかなと。。

リセットCSSは使っていく方向で。様子見。

実は僕、画像置換はすっごく抵抗持ってます。何で画像じゃダメなのかな？
CSSシグネチャを利用する時とかはメリットはあるんだけどもね。
ま、好き嫌いでは仕事できないから納得させる知識が必要なんだよね。