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でサイトのロゴの部分に使っておられます。

皆様、いかがお過ごしですか？僕の会社は毎年末忙しいです。
ブログさぼってるわけじゃないので許してください。ま、誰も読んでないだろうし気楽ではありますが。。

Takazudoさんが何やらありがたいネタを提供しておられたので乗っかってみました。マークアップな人たち（じゃなくてもいいけど）の忘年会 -2008年が事の起こりのようですね。呼ばれるわけないけど呼ばれてない。。それにしても豪華な顔ぶれの飲み会、羨ましいなぁ。コーダーが気にしちゃうことバトンということで以下に。

1. エディタは何使ってますか？
2. 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？
3. ブラウザごとのCSSバグ対処方法はどうしてますか？
4. 画像置換についてどう思いますか？
5. 印刷についてどうしてますか？
6. スクリーンリーダーにて確認などはしますか？
7. IE7のズーム機能について、対応させていますか？
8. JavaScriptライブラリのライセンスについてクライアントに説明しますか？
9. JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？
10. CSSやJavaScriptの圧縮をしていますか？
11. コーディングにかける時間はどのくらいでしょうか？
12. あなたのコーディングのこだわりはコレ！みたいなものがあれば。
13. 「コーディングやってて背が3cm伸びました」みたいなことがあれば
14. 興味がある、覚えたいと思っている技術や言語は何ですか？

エディタは何使ってますか？

秀丸とDreamweaverです。
会社のおすすめツールということで何となく使っています。CSS HappyLifeの平澤さんご提供の秀丸エディタの強調表示定義ファイルを作ってみたなんかも入れてみたりしてます。エディタについてはもう何年も模索中です。。Eclipseとかaptanaとか家で使ってみたりしてます。

高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？

時と場合によりますとしか言えませんが、最近はJavaScriptを積極的に使っています。
JavaScriptをOFFにされると痛いのですが、揃ってなくて情報が読み取れないようなコーディングはしていないはずです。ま、基本CSSで何とかなるように頑張ります。

ブラウザごとのCSSバグ対処方法はどうしてますか？

CSS hackで対応してます。9割以上IEのためですが。。
メンテナンス性が悪いのでhack用のCSSファイルというのは作りません。メインのCSSに直接書いています。コメントアウトとかでわかりやすくしてあげると親切かも。

画像置換についてどう思いますか？

好き嫌いで言うと嫌いです。
これも案件によって使わざるを得ない場合がありますが、極力使わないようにしています。何故かって聞かれると特に何もないのですが、何となく気持ち悪いんです。。画像としてあったほうが安心します。

印刷についてどうしてますか？

ある程度の範囲で頑張っています。
でも印刷についてそこまでうるさく言わた案件はまだないと言っていいのかな？

スクリーンリーダーにて確認などはしますか？

確認していません。
今までの案件で求められたことはありませんね。。当たり前ですが論理構造などには注意しているので大きな問題は無いと思いたいです。

IE7のズーム機能について、対応させていますか？

対応させています。
これはよく対応してくださいって言われます。zoom: 1;を使って対応したり、positionプロパティを極力使わないようにしたりとかですね。

JavaScriptライブラリのライセンスについてクライアントに説明しますか？

求められないので説明しません。
自分でMITとかGPLとかの確認はしていますが、大丈夫かな？ちゃんとしないといけない所ですね。もっと神経使うようにします。

JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？

最近ではjQuery、YUIを使ってます。
ただ、まだまだ勉強不足なので頑張らないといけないところです。

CSSやJavaScriptの圧縮をしていますか？

CSSはしませんがJavaScriptはします。
どっちにも言えますけどメンテナンスがしにくくなりますよね？JavaScriptは頻繁に書き換えることがないので圧縮しちゃってます。

コーディングにかける時間はどのくらいでしょうか？

案件のスケジュールを守るようにしています。
どのくらいって言われてもなぁ。。コーディングの手はかなり遅くて僕の弱点でもありますね。スピードよりスケジュールとクオリティのバランスをこれからも大切にしたいと思います。もちろんスピードアップさせることはプロとして当たり前なので頑張りますよ！

あなたのコーディングのこだわりはコレ！みたいなものがあれば。

常に先のことを考えてメンテナンスしやすいものにする。
カッコイイこと言ってるっぽいですが後で楽したいだけです。画像置換を極力使わないってのもこだわりになるんでしょうかね。後は、フォントサイズの大小しても見やすいものにする。これについては主要ブラウザがズーム機能をデフォルトにしているので気にしなくてもいい感じですがIE6はまだまだ現役なので。。HTML Validatorでエラーを出さないとかも。

「コーディングやってて背が3cm伸びました」みたいなことがあれば

WordPressやMovableTypeに出会ったお陰でPHPとかのプログラミング言語も少し興味が。
少しだけですよ。後はデザインのディティールにますますこだわるようになったし、グリッドデザインって改めて大切だと思った。

興味がある、覚えたいと思っている技術や言語は何ですか？

今の一番はMicroformatsかなぁ。JavaScript、PHPはもちろんですがLPOなんかもおもしろそう。
でも全然追いついていないのが現状ですね。仕事1割、勉強9割で給料がもらえたらなぁとよく思います。。

もう年内にブログを書かない気がするので早いですが、皆様よいお年を！