css3でカフェの看板を作った

講師をしている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。ベンダープレフィックスが面倒くさいし、かなり複雑な指定で、まだピンと来ない。
カテゴリー: css, css3, マークアップ タグ: パーマリンク

シェア

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA