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

4コマでわかる株式用語 第24回 逆指値

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

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

4コマでわかる株式用語|第24回 逆指値

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

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

マールブランシュさん

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

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

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

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

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

サンタラのアルバム It’s So Easy

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

It’s So Easy

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

や、今でも無理か。

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

トマトの カルボナーラ

玉子が絡んだまろやかさと、トマトの程よい酸味が良い感じ。エノキ茸は食感のアクセント。

トマトのカルボナーラ

材料( 1人分 )

パスタ(フェデリーニ)
1人分
トマト
1ケ
エノキ茸
1/2袋
全卵
1ケ
にんにく
1かけ
鷹の爪
1本
オリーブオイル
大さじ1
少々
黒胡椒
少々
イタリアンパセリ
なくても良い。飾りだし。

つくりかた

  1. トマトは皮をむいて大きめに切る(種はそのままでOKだけど御自由に)。エノキ茸は1/2の長さに切ってほぐしておく。にんにくは叩き潰して、鷹の爪は2つに折って種を抜く
  2. フライパンにオリーブオイルを入れ、にんにくと鷹の爪を温め、トマト、エノキ茸を入れて炒める。塩胡椒と茹で汁で味付けする。パスタが茹で上がる前にソースの味を決めておく。
  3. いた全卵1つと、アルデンテ直前のパスタを、火を止めた2に入れてさっと和える。皿に盛り付け、黒胡椒をふり、イタリアンパセリを飾って出来上がり。

ねばねばパスタ

夏で暑い。夏バテ防止にねばねば。

黒酢めかぶ、納豆、オクラ、モロヘイヤ、豚ひき肉でネバネバ。

ねばねばパスタ

材料( 2人分 )

オクラ
5本くらい
モロヘイヤ
お好みで
豚ひき肉
脂を出してダシ的に使うので少しで良い
納豆
1パック
黒酢めかぶ
1パック
パスタ
フェデリーニかスパゲッティーニが良いかな。

作り方

  1. オクラを板ずりし、モロヘイヤの葉と一緒にさっと湯に潜らせ、みじん切りにしておく。
  2. オリーブオイルで豚ひき肉を弱火でゆっくりカリカリになるくらいに炒める。
  3. 脂もたっぷり出た所に1と納豆と黒酢めかぶを汁ごと投入して炒め煮。
  4. 味見をしてから塩胡椒。香り付けに醤油をチョロっと。
  5. アルデンテのパスタを入れて、絡めて出来上がり。
  6. 黒酢めかぶを入れてからの加熱時間によって、酸っぱさを加減できます。酸っぱいのが好きならほとんど加熱しないコト。
  7. 豚ひき肉のカリカリ具合が、ネバネバの中でアクセントになります。ここ、テストに出ます。

塩納豆について

Sugar-Toothさんのリンクから来られた方に申し訳ないので、新しいエントリーも書きます。

塩納豆ですが、Sugar-Toothの店主の方は一向に試す気配がないです。夏バテ気味だと言うので、心配して、プロデューサー(ちなみに「裏」のプロデューサーではなく「表」ですよ。)が勧めているというのに!

まあ、大変に頑固というか、保守派というか、ホメオスタシスが強いので、これを読んだSugar-Toothファンの皆さんが塩納豆を試した感想を、あちらのブログにコメントすれば、少しは試す気になるかも知れません。

塩納豆とは
納豆に塩だけを混ぜて食べる食べ方のことです。
用意する納豆
普通の3パック100円以下で売っている納豆で構いません。むしろ、いつも食べているブランドで、塩納豆をお試し頂く方が、普段の調味料との味の比較がし易いと思います。
用意する塩
私はゲランドの塩を使っています。これは高級品です。でも年間の消費量と満足度を考えれば、決して高い買い物ではありません。この機会に購入しても良いですが、普通の塩でも結構です。
作り方
納豆に付属するタレやカラシは使いません。ネギ・鰹削り節・玉子なども入れません。塩だけをほんの少し入れて混ぜます。何度か試せば、お好みの塩加減が見つかるでしょう。
食べ方
ご飯にかけずに、納豆だけをそのまま頂きます。
効能
  • 醤油やタレを使っていては気付けなかった本当の納豆の味が分かります。今まで納豆の味だと思っていたのは醤油やタレの味でしかなかった事が分かります。
  • ダイエット中などの理由でご飯の量が少ない食事でも納豆が食べられます。
  • ご飯の友には不向きかもしれません。
  • 使わずに余ったタレやカラシがどんどん貯まります。

ちなみに、貯まったタレとカラシを集めてメーカーに送ると、1,000個で1台分の車椅子になったりはしません。

ムダなのでタレやカラシが入っていないヤツを安く売って欲しい、と思う次第。

「ハチはなぜ大量死したのか」

最近やっと読書できるゆとりが出来てきたのが嬉しい。

近頃、ニュースで耳にする「ミツバチ不足」で興味を持っていたので、ローワン・ジェイコブセン著の「ハチはなぜ大量死したのか」を読んだ。とても面白かった。

[amazon_image id=”4163710302″ link=”true” size=”medium” ]ハチはなぜ大量死したのか[/amazon_image]

ミツバチが「家畜」だとは知っていたが、どれほど農業がそれに依存しているのか、という事を理解できる。

解説の福岡伸一も書いているように、推理小説のようなスリリングさも良いが、著者のウィットに富んだたとえ話や文章が心地よい。

蜜蜂の大量失踪事件の犯人について、この書での結論はネタバレになるので書かないが、今後の数年で、更に色々な事実が明らかになるであろうと予感する一冊でした。

大根おろしパスタ

暑いと料理するのもおっくうだし、食欲も減退。

そんなときこそサッパリと食べられる大根おろしパスタはいかがでしょう。

最大限にお手軽チャンです。

大根おろしパスタ

材料( 2人分 )

パスタ
少し細めがいい。フェデリーニかカッペリーニ。
大根
たっぷりおろします。
明太子
半腹くらい。
胡麻ドレッシング
大さじ4くらいかと。
わざび茶漬け
ちょっとだけ。入れすぎ注意。なければチューブのわさびで

つくりかた

  1. 材料は麺を茹で始めてから用意し始めても充分間に合います。大根おろしは汁気も絞らず使いましょう。
  2. 大根おろし、明太子、胡麻ドレをボウルにまぜておいて、ゆで上がったパスタを入れて混ぜます。この時、麺の温度により、大根の辛みが和らぎます。
  3. わさび茶漬けは食べる時に軽く振りかけましょう。

明太子は形の崩れているパック(切れ子)のほうが安いし、使いやすいです。味付けはマヨネーズでもいいけど、胡麻ドレッシングの方が隠し味的につかえるしサッパリと仕上がるのでオススメ。

才能/勘の良さ/最適化について

1月に友人宅に集まったときの5〜さんの提示した疑問は「どうしてスポーツでも楽器でも初めてやるときは無駄な所に力が入ったりするのだろう?初めからうまくできるのが『才能』なのだろうか?」みたいな感じだったろうか?ニュアンス違ったかもしれないけど。

その問い掛けの直接の答えになってないかもしれませんが、最近つらつらと考えるのは「最適化」についてです。

スポーツでも楽器でも仕事でも、何か新しい事にチャレンジする時に、とりあえずは自分の過去の記憶と経験から、似たものを探し出して、脳や筋肉を動かしてみる訳です。

初めからうまくいかない事の方が多いでしょうが、その動作を繰り返す中で、修正を重ねて、その動作に合わせた新しい行動体系が確立されていき、最適化が進む。それが習得や、習熟という概念で表される事の中身でしょう。

初めからうまくできる人と、そうでない人の違いは、一つには自分の筋肉のコントロールができるかできないか、だと思います。どの順番で、どこの筋肉を、どう動かすと、どんな力が出るか。道具を使う行為であれば、その力がどう伝わるのか、という事を把握している事が、体の大きさや筋肉の量とは別の意味で「身体能力が高い」ことだと思います。その下地がある人は、新しい事にチャレンジする時に、その事に固有な要素に対して集中して最適化を図れば良いはずです。

この辺の考え方は養老孟司の著書に良く出てきます。身体をどう使うのか?という事と、脳をどう使うのか?は直結している、という事。「声を出す」事でも、それは声帯や腹筋や唇などの多くの部位の筋肉を、同時にコントロールすることから成り立っている「運動」であり、そうした運動によって出た「音」や「力」が、感覚器官を通して脳に情報としてフィードバックされ、次の運動を調整していく、というループの話が出てきます。

もう一つ、才能に差があるとすれば「仕組みや構造を把握する能力」かと思います。いわゆる「勘が良い」と言われているものです。

上に挙げた「身体能力の高さ」を違う観点から表現しているだけかもしれませんが、人のやっている動作を見て、どこがポイントになるのかを素早く、的確に見抜く能力があると思います。自分で動作をしなくても、他人の動作から、ある程度の脳内シミュレーションができる。他者の運動のフィードバックを自分の脳内にシミュレーションできる、という意味です。

また、「仕組みや構造を把握する能力」について言えば、訓練を重ねて、職人やプロフェッショナルの域に達した人たちは、そうでない人とは違うものを見ています。提示されている情報は同じでも、違う階層の情報や意味を汲み取っている、という事です。

例えば、テレビに映った新人女優を見た時に、ファッションデザイナーと医師では違うものを見て取るでしょう。同じ医師でも、形成外科と産婦人科の医師は違う情報を得ているでしょう。家電メーカーの技術者は、肌色の発色の具合が気になるかもしれません。もっと大雑把に言えば、男女でも、見ているポイントが違ったりします。

このように、同一の情報ソースから、各人が感じ取り、汲み取る意味は違っている訳ですが、それを自分で行う際に役立てるべく、整理・整頓された状態で記憶できること、そして、それを脳内シミュレーションできることが、「勘の良さ」であり、いざ、自分が「最適化」をする時に有効活用できて、あたかも、反復練習をせずに、いきなり上手にできた様に見えるのではないか、と考えます。