講師をしている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。ベンダープレフィックスが面倒くさいし、かなり複雑な指定で、まだピンと来ない。