明日もデザインで食べていこう！［03］実案件で使うCSS3の使用範囲＆CSS3だけで作る「ボヨヨンサブメニュー」
── 秋葉秀樹 ──

●IE9の登場でCSS3は実案件で使えるか？

▼結論：厳しい。

海外のCSS3事情を調べると、まあとにかくカッチョ良いデザインを見せつけてくれるんですが......。
ブログのタグにはちゃっかりと「Progressive Enhancement（プログレッシブ・エンハンスメント）」な〜んてあるように、要は「IEとかで効果ないけど、美しい人はもっと美しく〜」が本音ってところでしょうね、こりゃまた。「プログレッシブ・エンハンスメント」を強調されても嫌がるお客さんは必ずいます。

●同じデザインじゃないと嫌！　なクライアントに、CSS3を使いたい場合の折衝方法

▼僕の手段：Twitterのトップを見せます。

口で説明しても分からんワガママでありがた〜いクライアント様には、割と流行っているサイトの実例で口説いたら落とせるかもしれません。IEと「別な意味でモダン」なブラウザで比べてみせます。

ただし、それはあくまで情報が差分なく伝わることが前提！　サイト全体のデザインも、「CSS3を使っても使わなくても無理のないデザイン（デザイン＝設計）」を、しっかり考えていかにゃならんのです。それが無理ならCSS3はすっぱりあきらめます。

●無難そうなCSS3プロパティ（上記のケースでいうと）

・border-radius
・gradient
・text-shadow
・box-shadow

僕はお客さんと直で交渉して制作までやることが多いので、実際あったやりとりでお客さんに了解を得やすいCSS3の使用範囲ってこんなところかな？　と、勝手に私見で選んでみました。

○border-radius（ボックス境界の四辺を角丸にする）
　これはTwitterでも使われている有名な事例ですね。ただし、あまりに角丸の値が大きすぎて角丸の形が目立つと、IEで見たときとの差が大きいため、ダメだしを食らうかもしれません。
▼まとめ：角丸のサイズは極力小さい方が無難かも！？

○gradient（ボックスをグラデーションで塗る）
　これも角丸と同じような感覚でとらえてください。極端にかけ離れた色と色のグラデーションだと、差が目立っちゃうのでお客さんが嫌がります。できればあっさりしたボタンのグラデーションに留めておいた方が無難です。
▼まとめ：ボタンのグラデは縦方向のシンプルで、ちょっとだけ表面の立体感をだしたい時だけちょこっと使いましょう。

○text-shadow／box-shadow（文字／ボックス境界に影をつける）
　考えなしにゴツい影（濃かったり、影までの距離がありすぎたり）を付けると視覚的な奥行き感を崩壊させます。

　なので、影を付けるときにデザイナーが冷静に確認するべき事は、
　・ボタン内の文字、そこには宙に浮くほどボタンと文字の距離が必要か？
　・実際手書きのメモをボックスモデルに見立ててみる。その手書きメモには影がつくほど奥行きがあるか？
　・影を入れたら重ね順に矛盾が生じないか？

▼まとめ：まず本当に必要かどうかを見極める必要があります。理由があればいいけど、「視覚的奥行き感」を惑わすようなものであれば、情報が正しく伝わらないのと同じぐらい質の低いサイトに早変わりする危険性があるので、奥行きのロジックを考えましょう。

●上記以外のCSS3プロパティを使う場合に注意したいこと

僕がこないだ納品した案件で、JavaScriptによって写真スライドショーを実装したんですが、やわらかい感じを狙って、ちょっと傾かせました。ところがIE8で見ると、まっすぐ立った状態なわけです。IEではrotateをサポートしてないんですよね。お客さんにはあらかじめ伝えておきました、「Windowsで見るとまっすぐ見えるかもしれませんよ」と。もちろん、傾かせてもまっすぐでも隠れる箇所がないように配慮しました。

●今回のデモ！　CSS3だけで作る「ボヨヨンサブメニュー」

つらつらと書きましたが、やっと今回のデモをやりましょう。
はじめに言っておきます、IE9 Beta、さらになんとFirefox4 Betaも、アニメーションが効きませんっ！　最低限の目的は果たせるポップアップメニューをJavaScriptナシで、CSSだけでつくってみましょう。

今回の超シンプルなサンプルはこちら。menuAにマウスを置いてみてください。（Safari、Chormeだとアニメーションします）
< http://www.akibahideki.com/digicre/case_03/submenu.html
>

【HTMLコード】
<ul>
<li class="sub">
<ul class="anime">
<li><a href="http://www.yahoo.co.jp/
">subMenuA</a></li>
<li><a href="#">subMenuB</a></li>
<li><a href="#">subMenuC</a></li>
<li><a href="#">subMenuD</a></li>
<li><a href="#">subMenuE</a></li>
</ul>

<a href="#">menuA</a>

</li>
<li><a href="#">menuB</a></li>
<li><a href="#">menuC</a></li>
<li><a href="#">menuD</a></li>
<li><a href="#">menuE</a></li>
</ul>


よく見るli要素の中にリストの入れ子が入っている例ですね。
li.subがhoverしたとき、ul.animeをdisplay:blockにする、それ以外はnone。これだけだと唐突なので「フワッと」感を出したいわけで。

【CSS3コード】
li.sub:hover ul.anime {
display: block;
}

↓

li.sub:hover ul.anime {
display: block;
-webkit-animation-name: "anime01";
-webkit-animation-duration: 0.5s;
-webkit-animation-property: opacity, left;
-webkit-animation-iteration-count: 1;
}

と書いておきます。

さて、出てきました「animation」。「transition」と似てます。何が違うのかというと、transitionの場合、始点と終点の2点の動きでつなぐ事が目的で、それに対してanimationは、「始点から20％の位置でどうなって、70％の位置でどうなって、それを何回繰り返す」といったように、細かい動きを付ける事ができるところです。

【アニメーション設定の解説】
○「アニメーションの名前（識別名）」をつけます。
　-webkit-animation-name: "anime01";
　ここでは「anime01」、これが後でkeyframesによって紐付けられます。

○アニメーション時間を設定。
　-webkit-animation-duration: 0.5s;
　これで0.5秒

○アニメーションで使うプロパティを指定。
　-webkit-animation-property: opacity, left;
　これで透明度と左からの位置を「使うよ！」って宣言

○アニメーションを何回繰り返すか
　-webkit-animation-iteration-count: 1;
　これで1回、ちなみに無限ループはinfiniteを入れる

動きの細かい設定のため、animationの場合は、上記以外にこんなの書いてあげる必要があります。

@-webkit-keyframes "anime01" {
0% {opacity: 0; left: 100px;}
100% {opacity: 1; left: 150px;}
}

うわープログラム的だ（素人感覚なんで）。見ての通り-webkit-がついています。Safari、Chrome対応です。Firefox4 Betaでは対応していないんです......何故!?　animationとkeyframesでワンセットとなります。上記の内容だと、最初（0％）の時点でopacity（透明度）をゼロ、左からの位置を100pxに配置。次に、最初（100％）の時点でopacity（透明度）を100％、左からの位置を150pxに配置。（これをアニメーションとして動きでつなぎます）

するとまっすぐフワッと左から右に、だんだん濃くなっていくわけですね。
で、「ボヨヨっ」とバネのような動きをつけるには、webkit-animation-timing-functionという設定がありますが、ちょっとややこしいので今回は別の方法をとります。

@-webkit-keyframes "anime01" {
0% {opacity: 0; left: 100px;}
100% {opacity: 1; left: 150px;}
}

を

@-webkit-keyframes "anime01" {
0% {opacity: 0; left: 120px;}
50% {opacity: 0.1; left: 100px;}
70% {opacity: 0.9; left: 160px;}
100% {opacity: 1; left: 150px;}
}

にしましょう。
「一回戻って、行き過ぎて落ち着く」。そんな若気のいたりのようなポップアップメニューがつくれました。

しかしFirefoxくん。
キミには期待してたのに。。。（正規版Firefox4では期待してるよ）


【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。