第4回「CSS3を使ったより強く、より良い、より手軽なデザイン」
2010年01月05日
翻訳元サイト：Smashing Magazine
http://www.smashingmagazine.com/
原文：Stronger, Better, Faster Design with CSS3
http://www.smashingmagazine.com/2009/12/16/stronger-better-faster-design-with-css3/
著者：ZURB
翻訳：中野恵美子
※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています
CSS3に関する前回の記事「Pushing Your Buttons With Practical CSS3」で、私たちはCSS gradients、角丸の囲み罫、ドロップシャドウなど、CSS3の新しいテクニックを使用して魅力的でフレキシブルな、そして（場合によっては）おもしろいボタンを作成する方法について紹介した。
2回目となるこの記事では、これらのCSSテクニック（そして多少のJavaScript）を使って、実用的な要素やレイアウトをいくつか作成していく。以前も述べたが、私たちが使用するCSSプロパティの多くは、IE6や7、そしておそらくは8ではうまく動かない可能性がある。いまのところ、CSSのクールな機能すべてを確認するにはFirefox 3.5以降およびSafari 4が最適だ。なお、Google Chromeもかなり良い仕事をする。
利用環境が制限されているCSSを、なぜ気にするのだろうか？ なぜなら利用環境は永遠に限定されるわけではないし、Webデザインの将来、そしてクールなことを行うためには必要不可欠だからだ。もしあなたがすべての主要ブラウザによってサポートされ、安全に使えるまで待とうと思っているなら、あなたは幻想の世界にいるのかもしれない。CSS3を活用するには、いまがベストなのだ。
準備は良いだろうか？ では見ていこう。
インライン・フォーム・ラベル
誰でもインライン・フォーム・ラベルはよく知っているだろう。value属性でフィールドに文字を表示し、フィールドがクリックされるとJavaScriptを使って消去する。確かにうまくいくのだが、大きな問題はユーザーがクリックすると完全に文字が消えることだ。すぐにクリックしてしまうと、ユーザーは文字を読めないかもしれない。
この問題が修正されているのを見た最初のWebサイトは、AppleによるMobileMeのログイン画面だった。
MobileMeのログイン画面は、フィールドをクリックすると文字がフェードするが、消えてしまうことはない。カーソルが左にセットされ、入力を開始できる状態は非常にクールで、これを実現するJavaScriptもあまり複雑ではない。実はこれは、レイアウトのトリックなのだ。文字は、フィールド名を含むinputの背後に置かれている。フィールドをクリックすると、JavaScriptを使ってlabelにクラスを適用し、ユーザーが入力し始めると、別のクラスを適用してlabelを消している。
私たちは以前、このエフェクトと再現方法についてブログで紹介した。しかし、サポートするためのWebページの設定が難しいという問題があった。そこで私たちは修正し、つくり直した。
新しいインライン・ラベル
修正したものは、かなり簡潔なものになった。私たち自身のWebサイト（NotableやScrumptiousなど）でも使うので、単にclass="inlined"をlabelに追加しただけだ。以下に方法を紹介しよう。
まずlabelとimputから始める。
このテクニックの前回バージョンでは、ラベルとブロックレベル要素内のlabelとinputの包括に苦労し、inputの背後にlabelを配置する際は絶対指定を使った。しかし、今回はもう使わない。最初にinlinedクラスをlabelのみに追加する。
文字が正しく表示されるようにするためには、2～3の作業が必要となる。最初にinputをlabelの上に配置するため、ネガティブ・マージンを使う。以下のようにCSSの隣接セレクタを使おう。
| label.inlined + input.input-text { margin-top: -22px; background-color: transparent; position: relative; z-index: 2; } |
このコードは、label.inlinedに続くすべてのinput.input-textを、ブラウザのスタイルに適用するよう命じる。この方法でネガティブ・マージンを使い、inputをlabel上に配置している。さらに背景色を透明に設定し、inputに相対配置とz-index値を与えている。
次に、labelそのもののスタイルを整える必要がある。好みの文字で描写するために、このようなスタイルを適用してほしい。最大のポイントは、label内の文字が、inputの一部であるかのように見せることだ。具体的にはこうだ。
| label.inlined { padding-left: 6px; font: normal 12px/18px "Helvetica Neue"; position: relative; z-index: 1; opacity: 0.75; -webkit-transition: opacity 0.15s linear; } |
解説しよう。paddingとfontは、単にinputのスタイルと合致させるためのものだ。positionとz-indexは、labelがinputの背後に配置するための設定だ。こうしないと、inputが選択できなくなってしまう。次にお楽しみのパートとなる、opacityと-webkit-transitionだ。
このフォーム・ラベルは、好みのポイントで文字をフェードさせていく。今回は少しフェードさせた状態で始めるため、opacity: 0.75とした。文字を消す方法としてcolorを使うことも考えられるが、opacityはfont colorに関係なくうまくいく。-webkit-transitionに加えているが、こうすることで不透過度が変化するときはつねに、ブラウザ側が約1/8秒でスムーズに変更する。では不透過度が変化する状況は何回あるだろうか？
答えは2回。ユーザーがフィールドをクリックするとき、そしてユーザーが入力をはじめるときだ。それではこれらの状況に対応できる、ふたつのCSSクラスを作成してみよう：focusとhas-textだ。
| label.focus { opacity: 0.35; } label.has-text { opacity: 0.0; -webkit-transition-duration: 0s; } |
ご覧の通り、ユーザーがクリックするタイミングでラベルの不透過度を減少させ、入力時には不可視にしている。遷移するタイミングを変えることで、ユーザーが入力を開始するとともに文字がフェードしていくのではなく、すぐに消えるようにしているわけだ。フィールドを構造化し、スタイルを整えたところで、最後のステップとなるのは若干のJavaScriptである。
JavaScriptを追加する
CSS3ではアニメーションや遷移のような新しい仕掛けが追加されているものの、インタラクションに関してはJavaScriptが今なお王様と言えるだろう。今回の仕掛けにも、若干のJavaScriptを使う必要がある。ここではjQuery用をベースに紹介していくが、Prototypeや本格的なJavaScriptに対応させるのも難しいことではない。
JavaScriptでは、3つのことをする必要がある。
1. ユーザーがフィールドをクリックしたとき、focusクラスをlabelに追加する
2. ユーザーが入力を開始したらすぐにhas-textクラスを追加する
3. ユーザーがフィールドを空白のままにしたり、別のフィールドに移行したら、文字を再表示させる。
| $(document).ready(function(){ $("label.inlined + input.input-text").each(function (type) { $(this).focus(function () { $(this).prev("label.inlined").addClass("focus"); }); $(this).keypress(function () { $(this).prev("label.inlined").addClass("has-text").removeClass("focus"); }); $(this).blur(function () { if($(this).val() == "") { $(this).prev("label.inlined").removeClass("has-text").removeClass("focus"); } }); }); }); } |
JavaScriptに関しては詳細に解説しない。コードを見れば明らかだからだ。jQueryがCSSで使っている同じ選択肢を認識することで、入力をすばやくターゲットすることを可能にするが、そのほかは型にはまったものだ。そして、インライン要素のlabelはよりスムーズなインタラクションを実現する。さらに、labelにclass="inlined"を追加することで、さまざまなインライン要素のlabelが作成できる。
＞＞ デモンストレーションを見る
Playgroundにこれらのデモンストレーションを作成した。この記事およびこのシリーズの全体を通じて、Playgroundとリンクしていく予定だ。
す早く手軽にできるモーダル
次に、たった1行のJavaScriptでコントロールできる、簡単なモーダルをご紹介しよう。私たちのフィードバックツールであるNotableでは、大きな効果を得るためにモーダルを使用している。Notableでは直接モーダルを読み込むためにAjaxを使用しており、ここではモーダルを作成する簡単な方法を紹介していく。
最初にお見せする例はdiv.modalを含んだ非常にシンプルなもので、簡単なアニメーションが含まれるものだ。みなさんのページで、ログインフォームやサインアップフォーム、あるいは読み込んでほしくないページやアラートなどで使えるだろう。もうしたモーダルをたった1行のJavaScriptで素敵に演出するCSS3スタイルを使ってみよう。
シンプルなモーダル
最初のモーダルの例は、簡単なアニメーションを含むシンプルなスタイルだ。ドロップシャドウを使ってフローティングボックスのようなスタイルをdivで整え、浮かんでいるように見せる。そのため不透過度0からフェードさせ、閉じる際はすぐに消す。
この場合、モーダルのスタイルは、CSS3の新しい2要素を使う。ドロップシャドウで-webkit-box-shadowと、JavaScriptアニメーションを使わずにフェードさせる-webkit-transitionだ。以下は同モーダル用のスタイルだ。
| div#simpleModal { width: 560px; position: absolute; top: 40px; left: 170px; padding: 20px; border: solid 1px #bbb; background: #fff; -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); -webkit-transition: -opacity 0.0s ease-out; } div#simpleModal.shown { opacity: 1.0; z-index: 100; -webkit-transition-duration: 0.25s; } |
ここではサイズやposition、適切なpaddingと薄いグレーのborderなど、大部分が基本的なスタイルである。新しい部分は-webkit-box-shadowと-webkit-transitionだ。解説は以前のCSS3ボタンに関する記事で行っているので、ここでは簡単に済ませることにしよう。
-webkit-box-shadow（CSS3のスペックが確定し、実装された際にはbox-shadowと呼ばれることになるだろう）は、若干の変数が必要だ。最初のふたつのプロパティはオフセット、XとYだ。このケースではXオフセットが存在せず、Yオフセットが3pxとなっている。こうすることで、影をオブジェクトのすぐ下に置く。次の変数6pxは広がるサイズを設定しており、簡単にいえばボックスの外形から6pxとなる。
最後に、box-shadowのカラーを設定する。RGBカラー（このケースではブラック）の設定、そして不透過度、あるいはアルファ・チャネルの設定といった具合だ。25％の不透過度のブラックを使えば、どのような色で覆っても影ができることがわかるだろう。もし#333などを使用した場合、黒い背景では影のように見える、というよりも光って見えてしまう。
装飾的なモーダル
これで基本的なモーダルはOKだ。やるべきことをやり、知識を身に付ければ、5分もかからずに作成できるだろう。私たちはもう少し何かしたいと考え、-webkit-gradientや-webkit-transformといったCSSの仕掛けを使った、より装飾的なスタイルをつくり出した。
このモーダルは少々派手で、上部から滑り落ちるような動きなどデスクトップアプリケーションに似たインタラクションとなっている。このようなモーダルを作成するために、2～3のクールな仕掛けを利用した。
| div#fancyModal { display: block; width: 560px; position: absolute; top: -310px; left: 170px; padding: 90px 20px 20px 20px; border: solid 1px #999; background: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255)), to(rgb(230,230,230))); -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -webkit-transition: -webkit-transform 0.25s ease-out; -webkit-transform: translateY(-570px); -moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); -moz-border-radius: 0 0 6px 6px; -moz-transform: translateY(-570px); } |
最初に、バックグラウンド用にグラデーションを生成する。グラデーションを使えばタイル状のバックグラウンドイメージを作成することができるが、それでは面白くない。そこで、ブラウザに-webkit-gradientでグラデーションをつくらせる。-webkit-gradientは画像を使う部分でどこでも利用できるグラデーションをつくるCSSの機能だ。コードを見れば分かるように、-webkit-gradientはかなり多くの変数があるが、見た目ほど難しくないので解説していこう。
linearは、グラデーションがひとつのポイントからほかのポイントに、直進することを意味している。円形のグラデーションをつくりたいときは、radialを使えばよい。left top、left bottomは、最初と最後の座標で、このケースではトップからボトムまで角度なしで進む。もしleft top、right bottomを使用すれば、グラデーションはdivを横切って斜めに伸びる。from(rgb(255,255,255))は最初の色で、このケースでは白だ。to(rgb(230,230,230))は最後の色を示す。色を変えたければ、color-stop要素をはさむこともできる。
ほら、簡単にできた！ 背景画像をあれこれいじらなくても、グラデーションでデザインに華やかさが加えられるのだ。コードは2～3行で容易に作成でき、修正もできる。次に、このモーダルのより装飾的な部分、すなわちアニメーション部分を見ることにしよう。
| div#fancyModal { … -webkit-transition: -webkit-transform 0.25s ease-out; -webkit-transform: translateY(-570px); } |
ここでは-webkit-transformと呼ばれるプロパティを使い、モーダルを上昇させている。変換はDOMに影響を与えないので、予想外の効果や問題が発生することはない。divは何にも影響を与えることなく上昇する。よってWebページがロードされると、divはページの上部に配置される。divにclass="shown"を追加するとで新しい変換位置を獲得し、-webkit-transitionは変換が1/4秒以上で適用されるようにする。これにより、モーダルがページの上から下にすべり降りてくることになるわけだ。
ご覧の通り、装飾されたモーダルスタイルは、CSS3の新しい効果を使えば容易に作成可能だ。そして最後のステップは、モーダルにshownクラスを追加する、シンプルな1行のJavaScriptである。前半で取り上げたシンプルなモーダルに関しては、不透過度を装飾的なモーダル用に1;に変え、変換位置を0（-570pxではない）に変えるとアニメーション処理が行われる。
＞＞ デモンストレーションを見る
Playgroundでデモンストレーションが見られる。モーダルふたつのコードおよびクリック可能な実例を用意している（要WebKit）。
イメージマスクとカラム表示を実現する新聞レイアウト
最後に、CSSの新しい属性と機能を2～3使用したクールな新聞レイアウト、ここではSuper Awesome Timesのレイアウトを作成する方法を紹介しよう。
新聞風の外観は、Web上ではかなり頻繁にはやりすたりを繰り返しているが、いくつかのクールなCSSで実現できる。ここで取り上げるのは、webkit-mask-imageおよび-webkit-column-countだ。
イメージマスクを使う
イメージマスクとは、別のイメージ（あるいはグラデーションのように、イメージの代わりをするものなら何でも）を使ってマスキングを行うことにより、ブロックレベル要素のアルファチャネルに影響を与える方法だ。では、Super Awesome Timesという新聞名に繊細なグラデーションを適用してみよう。画像レンダリングで処理することもできるが、それでは楽しくない。代わりに生成したグラデーションで文字をマスキングした（今回は画像を使ったが、@font-faceを使えば文字に反映させることも可能だ）。チェックしてみよう。
| div#masthead img { -webkit-mask-image: -webkit-gradient( linear, left top, left bottom, from(rgba(0,0,0,.75)), to(rgba(0,0,0,1))); } |
必要なプロパティは-webkit-mask-imageのみだ。ブラウザはイメージ用にアルファマスクを生成するために指定したものを使う。マスクに適用したブロック要素に関しても同様だ。このケースではグラデーションを使っており、新聞名は不透過率75％から100％にフェードしている。以下の比較画像で違いが確認できるだろう。
微妙な変化だが、効果的な深みが演出できた。WebKit公式ブログであるSurfin' Safari上に、マスク使用に対するすばらしいイントロダクションがある。あらゆる種類の興味深いエフェクトに、マスクがどのように利用できるか閲覧できる。実際の動画でさえマスキングできるのだ。
とても簡単なカラムテキスト
最後に、CSS3の新しい（そして今のところ、十分にサポートされていない）プロパティ、すなわちカラムテキストの使用法を紹介する。浮き上がるdivのようなものではなく、コラムの数や空白部分を設定し、残りはブラウザに任せることが可能なテクニックだ。
手軽に3カラムを実現した。
上の例では、カラムテキストを3つに設定しているが、コードを見ればひとつのdivしか使っていないことがわかるだろう。トリッキーな仕掛けは使っておらず、floatや奇妙な高さ調整も必要ない。15pxのスペースを空けて、3つのカラムに分けてコンテンツを表示するよう、ブラウザに指示しているだけだ。方法は以下の通り。
| div.three-col { -webkit-column-count: 3; -webkit-column-gap: 15px; -moz-column-count: 3; -moz-column-gap: 15px; } |
ほらこの通り！ シンプルで簡単なマークアップとスタイルだ。問題は、最新ブラウザでもこのプロパティがあまりサポートされていない、ということだ。そのほかにもdividers、breakersなどが実装されていなかったり、まったくサポートされていないプロパティはいくつかある。これからどうなるかは何ともいえない。シンプルなカラム作成実現間近だが、まだという状況だ。
＞＞ デモンストレーションを見る
PlaygroundでSuper Awesome Timesをチェックしてほしい。このプロトタイプを作成することで、私たち自身のWebサイトやブログに反映できるクールなアイデアを得ることができた。
CSS3の今後
今回紹介したCSS3のテクニックはお楽しみいただけただろうか。前回の記事を読んでいない人は、ぜひチェックしてほしい。また、第3・第4の記事も楽しみにしてほしい。今後はCSSのプロパティを使ったポラロイド表現、Mac OS XのDock表現、レコード・アルバム・ミュージック・プレイヤー表現などを紹介する予定だ。
その他のリソース
●Pushing Your Buttons with Practical CSS3
●Using -webkit-mask-image at Surfin’ Safari
●Introduction to Columns at CSS3.info
●RGBa Browser Support at CSS-Tricks
●Introduction to CSS Animation at Surfin’ Safari
●Introduction to CSS Transitions at CSS3.info
●Safari Visual Effects Documentation
［INDEX］
>>> 第1回 Twitterの効果的な背景画像：事例と現行のプラクティス
>>> 第2回 Coming Soonページをデザインする
>>> 第3回 Webの文章におけるWebフォントの実情
>>> 第4回 CSS3を使ったより強く、より良い、より手軽なデザイン
>>> 第5回 パワフルなCSS/JavaScriptテクニック45
>>> 第6回 Web制作が楽しくなるCSS3/JavaScriptのテクニック50
>>> 第7回 手軽にWebを彩るCSSコーディングテクニック50
>>> 第8回 最近注目を集めているJavaScript/jQueryのツール・テクニック45
>>> 第9回 2010年上半期Webデザインのトレンドまとめ
