講師をしているPCスクールで「マークアップとCSSの筋トレ」という授業を行っているのですが、そこで使用した題材です。

授業ではカフェの店先に出ている黒板風の看板をマークアップする、という所までで、CSSの方はちょっとしか時間が取れませんでした。残念。

この画像はCSS3を使って、どの程度まで「お絵描き」できるのか、という参考に作ったもののキャプチャです。

実際のhtmlとcssによる実装はこちらからご確認頂けます。

firefox 3.6、Safari5.0、Google Chrome5.0などでブラウズすると吉。IEでは6、7、8で「表示が崩れない程度に」手当してありますので、見比べるのも一興かと思います。

マークアップとCSS的な見所は以下の通り

• DOCTYPEはxhtml1.0です。
• もしも世の中の看板も検索されたら？という仮説に基づきマークアップ。
• 電子インクとか、拡張現実タグとか？
• divとspanはビジュアルのコントロール用にのみ使用。当たり前。
• h1に使っているフォントはGoogle font directoryが提供しているWebFont。IEでも見れます。
• 読み込み秒数の半分以上がWebFont。せっかく画像使ってないのにね。
• 日本語フォントは現状では難しいが、時が解決するはず。がんばれフォントメーカーの皆さん！今なら早い者勝ちだ！
• h1のアルファベットの下にカタカナで「カフェ メニュー」を隠してあります。看板の外観を再現しつつ「検索時にcafe...なんて入力しないよ！ましてやアクサン記号付きなんて！」という事を考慮しました。
• そのカタカナを隠すCSSテクニックはDKIRを応用。
• それって隠しテキストじゃないの？とかは気にしない。同じ意味で違う文字表現なだけ。
• h1の稲穂のイラストもCSSだけ。稲穂に見えなくても気にしない。雰囲気です。
• グラデーションや3D変形の指定で使用したCSS3。ベンダープレフィックスが面倒くさいし、かなり複雑な指定で、まだピンと来ない。

アンディさんのアクセスアップを願って、今回は1コマ目を公開。

今回は1コマ目から落ちにしています。しかも駄洒落。

全てを読みたい方はこちらからどうぞ。

22回「窓」

23回「株式分割」