CSS本の紹介でFlash
突っ込まれそうとは思いつつ、CSS本の紹介ページにFlashを使っていて、やはり「なんでFlashなの?」っといった意見をいくつか頂いています。
ただFlashって、CSSと相反するものでもないということでご勘弁ください。例えばCSSでタイポグラフィを施さず、画像化文字(GIFなど)に表現を委ねるといった手法と、程度の差こそあれ根本的には同じことだと思います。
ワンランク上を目指す CSSクリエイティブ・デザイン
「ワンランク上を目指す CSSクリエイティブ・デザイン」という本を書きました。技術評論社から7月25日発売ですので、近いうち本屋さんにも並び始めるかと思います。
内容を簡単に紹介しますと、デザインとコードの関係性をテーマに、より効果的にCSSを実装するためのヒントやアイディアを合計7つのサンプルとともに学べる本です。ビジュアルデザインの知識や、JavaScriptを組み合わせた動的なページの作成など、CSS以外のポイントにも焦点を当てています。特に後半は、僕が仕事で関わった実際の案件を扱うことで、より現実に即した、実戦的な内容となっています。
詳細な目次などが一覧できるページを用意したので、興味をもたれた方は以下をご覧になってみてください。
「ワンランク上を目指す CSSクリエイティブ・デザイン」のご紹介
#この本の企画が決まったのが去年の夏でしたから、およそ1年近くも書いていたことになります。当初はもうすこし早く発売される見込みだったのですが、途中僕の進捗が芳しくない時期があったりして、なんだかんだで遅れてしまいました。編集者の方をはじめとした関係者の方々にはご苦労をおかけしました。この場を借りて深謝申し上げます。
ブレイジング・エンジェル
「レインボーシックス ベガス」のあとは、「ブレイジング・エンジェル」というゲームで遊んでいました。第二次世界大戦を舞台にした空戦モノです。
「レインボーシックス ベガス」同様、細かいところは手を抜いて作られているけれど、なかなかおもしろいゲームでした。キャンペーンモードは全20ステージ。その部隊にはガダルカナル島の戦いやノルマンディ上陸作戦、パリ解放なども含められています。
途中、クレイジーな日本人から戦艦を守れといったミッションがあるのですが、ゲームとはいえ、同胞を打つのはなんだか心苦しいものがありました。
ライブ
同じ会社で働く友達がクラブでライブをやるということで仕事上がりで駆けつけてみました。音楽を大音量で聴くのは本当に久しぶり。おそらく去年のWIRE以来なのかな。でも、すごくよかったです。
緊張していないように見えたのけど、よくよく聞いたら実はけっこう緊張していたのだとか。ライブってのは、やっぱりそういうものですかね。まあ僕もライブコーディングやったときは、滝汗かいたしなあ。
レインボーシックス ベガス
あまりに暇だったので、「レインボーシックス ベガス」というゲームを買ってきました。トムクランシーシリーズって、「ゴーストリーコン」が個人的につまらなかったので、本作もあまり期待していなかったのだけど、意外に面白いです。
カジノに立てこもったテロリストが相手。スネークカメラで扉の先を除き、突入計画を立てて、仲間とともに一気に制圧。味方AIは優秀なので、なかなか頼れます。
派手にぶっぱなしてどんどん進むFPSもいいけど、たまにはこういう頭を使ってじっくり進むタイプのゲームも緊張感があって良いなあ(でも、XBOX360のゲームって本当にFPSばっかり)。
「両方がh1」というのはh1要素が複数という意味
またまた見出しの話ですが、「最近見かける「見出し」関係の話題へのリアクション」より言及を頂きました。
<h1>omega</h1>...<h1>見出しレベル</h1>...という事でしょうか? それとも、<h1>omega 見出しレベル</h1>...という事でしょうか? 前者の場合、それは二つの内容が一つの文書に同居している、という事になるんじゃないでしょうか。だったら文書を二つに分ければ良い話。で、後者の場合、ああこういう大見出しなんだな、と思うだけです。
僕が両方をh1にと書いたのは、要素自体を複数にするという意味のほうです。また、二つの内容が一つの文書に同居
の「内容」というのが何を示すかわからなかったのですが、並列な関係の情報がふたつあるとか、そういうことではなくて、異なるレイヤーの情報が重なってひとつを成しているイメージです。これを二つに分けてしまうと、誰がその情報を伝えているのかが即座にわからないなど、ページの文脈がどう伝わるかに影響するので、そう簡単に分けられない(分けたくない)のです。仮に分けるとすれば、マークアップ以前のフローから変えて行かなくてはならず、かなり大袈裟というか本末転倒です。そもそも、こういう前提があるからこそ、h1をどうするかみたいな話がときおり浮上するのではないでしょうか。
例で挙げられている「omega」というのが何なのか最初わからなかったのですが、おそらくサイト名のような感じかと思いました。前のエントリーでも触れたように、そのページにサイト名や、カテゴリ名といった分類情報がそもそもなかったり、少なくとも明らかに見出しではない登場の仕方だったら、割り切れるのです。ですが現実的には、それらの情報をhead要素内に記述しとけばいいじゃん、といった選択肢は採用しづらいものです。
僕は、h1が複数あるのはありだと思っています。本文の領域以外にh2要素などを振り分けること、例えばローカルナビゲーションのカテゴリ名にh2やh3を振り分けるのと、やっていることに大差ないと思うからです。そして、これらも文書を複数に分けるとすると、やはりマークアップ以前の話になります。
見出しレベルに絶対的な正解は考えづらいので、回り巡ってたどりつくところは結局、「同サイト内でその考え方に一貫性を保つことのほうにこそ重点を置いていきたい」というものです。
2度目の「かりん」
この間見つけたおいしい定食屋さん「かりん」、今日も行ってきました。本当は昨日も行ったんだけど、15分くらい遅かったようで、もう店じまいしていたんです。中央線の人身事故さえなければ間に合う計算だったので、すごく悲しかった。
で、今日は鮭フライ定食と生ビールを頼んだのですが、相変わらずうまくて感動しました。料理を作るおばさんも愛想が良くて、ビールを頼むと、小鉢に入った簡単な料理をサービスしてくれます。この間は冷や奴で、今日はピーマンと豚肉の炒め物でした。
ずっと、こういう定食屋さんを探していたのですが、やっと巡り会うことができました。おかげで、自分で料理を作る意味が半減されてしまったといえます。
本当におすすめなので、阿佐ヶ谷付近の方はぜひ、行ってみてください(地図)。
このブログの見出し
「はてなブックマーク - カラクリエイト:何をもって「重要」とするか」で、このブログ自体の見出しレベルについて、コメントをいただきました。
たしかに、このブログの場合、「カラクリエイト」というサイト名じゃなくて、本文の見出しでもなくて、「最新エントリー」だとか「カテゴリー」といった分類にh1を割り当てています。変な感じはしますが、これはこれで別にいいんです。サイト名をh1にしたって、視点を変えたらやはり気持ち悪いことに変わりないので。
だから普段仕事でサイトを組む時には、少なくとも同サイト内で見出しレベルの考え方に一貫性を保つことのほうに重点を置いて、振り分けを考えています。
それから、もしこのブログの見出しレベルを変更するとしたら、HTMLだけ修正するのではなくて、そもそもの構造をもう一度見直し、デザインと一緒に変えようと思います。(2年以上デザインがこのままだし、茶坊主をFlashで四方八方に歩かせるという試みも放置されて久しいので・・・)
何をもって「重要」とするか
「h1要素は最も重要な見出し」というのは、その通りだと思うのですが、じゃあ何をもって「重要」とするんだろう、ってところで、僕の場合やっぱりぶつかります。「そのページで最も伝えたいこと」だから「重要」とするのか、「構造上抜け落ちてはならない」から「重要」とするのかなど。本文内容の見出しがh1でないのも気持ち悪いけど、サイト名がh1でないのも、見出し構造の頭をどこかにもっていかれちゃった気がしてこれまた違和感を抱いたり(サイト名が文書の頭にないのであれば、もう割り切れるのですが)。どうも、同じレイヤーでは比べられないですね。
ビジュアルデザインにおける構造の捉え方(※)とも、ある程度整合性をとっていきたかったりもするので、お仕事では「僕はこれでいく!!」といった答えを求めてしまうよりは、状況に応じてやり方を調整するようにしています。
あと、視点にどこに置くかによってどちらも一番重要な見出しとなり得るので、サイト名と本文エリア内の見出しの両方をh1にすることもあります。
※このあたりの話はサイト名に限らずカテゴリ名なんかでも当てはまります。例えばこんな見出し。

あきらかに、そのページを作成する意味だとか、伝えたいことの重要さでは「CSS Nite LP3を終えて」という見出しのほうが上なんだけど・・・
