KSK-blog

リンク: http://www.ksk-soft.com/css_labo/kanbanCSS3.html

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

アンディさんに「4コマでわかる株式用語｜第24回 逆指値」を納品しました。

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

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

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

andyさんに「４コマでわかる株式用語」の4コマ漫画を納品。

22回「窓」

23回「株式分割」

マールブランシュさんのサイトのリニューアルがなんとかUPしました。やっと布団で眠れる生活に戻れそうです。

今回のテーマはphpのテンプレートの自作と、jQueryのスライドの実装。まだ旧コンテンツが残っているので、マークアップ的に見直さなければならない所や、無駄なCSSが駆逐できていない。

id名やclass名にleftBoxとかleftBoxInnerRightとか、もう、そういうのは自分のルールとしてはあり得ない。『東村山西中学校南交差点の斜め下』みたいな。

ところが「Web Designing2009年9月号」のp.130で紹介されている「オブジェクト指向CSS」という記事を読んで、ちょっと感心した。まさに従来のCSSの記述方法とは正反対の考え方。なるほどねえ。どこかで活かせるかもしれない。

マールブランシュさんの仕事の間隙を縫って、andyさんの4コマ、vol.21を送る。4コマについては、どうすれば面白いのか、毎回、五里霧中。

先月、ほぼ3年ぶりに音楽CDを購入した「サンタラ」のアルバム。

曲も歌詞も歌声もハモリ具合もギターも好きだ。サンタラは最近のお気に入り。アマチュアバンドをやっていたので、ああ、こういうバンドがやれてたらなあ、とか、こんな曲が書けてたらなあと思う。そうか、もっとブルース感が必要だったのかあ、と思ったりするが、そんな事は当時の自分には無理だ。

や、今でも無理か。

このアルバムには入っていないが、一番のお気に入りは「うそつきレノン」。動画があったので貼ってみよう。