Home > HTML5 > | Impressions > | Web > | XHTML CSS > CSSの実装状況で変わるボックスのデザイン方法

CSSの実装状況で変わるボックスのデザイン方法

sample4

Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。

いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。

しかしたまらん、流石に疲れた。飽きた

ボックスひとつができること

CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。

そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CSSの実装状況を追いながら段階的に解説します。

サンプルのHTMLはすべて以下を使います。１要素、１ボックスですね。

<div>Box Design.</div>

その1. IE6を考慮したボックスデザイン

先にも書いた通り、IE６を考慮した現在の一般的なデザイン手法になります。

1つだけ置ける背景画像を工夫する事で、アイコンの表示やグラデーション、角丸をなどを表現できますが、背景画像のサイズは固定なことから、ボックスのサイズの伸縮などに対応できないデザインがあります。

ボックスのサイズに追従させることを考え、デザインは以下のようになりました。

サンプル

<div>Box Design.</div>

sample1

background-imageに　青いグラデーション画像　をrepeat-xし、四辺のボーダーで立体感を出しています。地味だけど、1つのボックスに対してはだいたいこんなの感じの手法が精一杯なんですね。

その2. IE6を考えないボックスデザイン

  • 透過PNG
  • :after, :before疑似要素
  • contentプロパティ

を利用したデザインが可能になります。

背景色 + 透過PNG

透過PNGを用いることで、背景色と組み合わせた装飾が出来ます。前のサンプルでは青いグラデーション画像を用意しましたが、白いグラデーションの透過PNGを用意すれば、背景色の指定だけで色々なグラデーションに対応できます。

サンプル

以下の透過PNG画像を作って適用してみました。色はbackground-colorで定義しています。

sample透過PNGの種類

sample2

:after :before疑似要素, contentプロパティ

:after :before疑似要素とcontentプロパティを用いれば、１つのボックスの中にさらに2つのボックスを生成することができます。生成されたボックスは、通常のボックスとほぼ同じ感覚で装飾できますので、１つのボックスに予備のボックスが2つあるようなものなので、「あーここにあと１個ボックスがあればなー」なんていうパズルコーディングからだいぶ解放されるでしょう。

長くなりそうなので、細かい部分は別エントリーにすることにしました!

サンプル

sample3

これだけでだいぶ見違えてきましたね。

左のはcontentプロパティでアイコン画像を表示してさらに透過PNGをかぶせています。右下はcontentプロパティによって適当に文字を出しています。

その3. CSS3の新機能

さて、ここまではCSS Level 2の機能で、まともに実装してるモダンブラウザでなら有効な方法でした。ここからはCSS Level 3の新機能を使ってみます。とはいっても、この記事を書いている時点ではCSS3はまだ勧告されていないので、WebKitやFirefoxが独自に先行実装している以下のCSS3のプロパティを使ってみます。

  • text-shadow - テキストの影 (追記: これはCSS2.1からありましたね 2.1で撤廃され、CSS3で復活でした、重ね重ねすみません。hirasawaさん有り難うございます。)　
  • box-shadow - ボックスの影
  • border-radius - ボックスの角丸

サンプル

sample4

ずいぶんとかわいくなりました。今までこのような装飾をするには、複数のボックスを利用するか、アイコンや背景画像、角丸処理を１枚にした画像を固定サイズのボックスの背景として表示するしかありませんでした。上記のサンプルは内容量に追従したサイズを保持でき、さらに、それぞれのパラメータとパーツが分離していることで細部の変更が用意という特長があります。

sample5

CSS2では１つしか置けなかった背景画像は、CSS3でいきなり４つ置けるようになります。(こんな時間かかるなら小出しに2つ3つ置けるようにして欲しかったです！)　それに加え、ボーダーに画像を利用する事ができるので、考えられる平面のデザインはだいたい実現できるようになるでしょうね。さらにはその名の通りグラデーションを表現できるプロパティバリュー、色と透明度を指定できるRGBAプロパティバリューがあり、これらは値なので様々なプロパティに利用できます。

CSS3 アニメーション プロパティ

ウェブデザイナーは新たに「時間」という次元をコントロールできるようになります。

詳しい解説は別のエントリーでするとして、以下はマウスホバーでクルっと回りながらポワっと出てきてちょっとピカっとするアニメーションの記述です。

div:hover {
 background-color: #0092c3;
 -webkit-animation-name: kurutto;
 -webkit-animation-duration: 1s;
 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
 -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes kurutto {
  0% {
   background-color: #006f95;
   -webkit-transform: perspective(800) scale(0.9) rotateY(90deg);
  }
  50% {
   background-color: #3fc9ff;
   -webkit-transform: perspective(800) scale(0.9) rotateY(0deg);
  }
  100% {
   background-color: #0092c3;
   -webkit-transform: scale(1.0);
  }
}

画像では実際の動きを見せる事ができないのが残念ですが、WebKit Nightly Buildsをインストールすればサンプルページで少しだけアメーションを見る事ができます。

最後に

サンプルのHTMLはすべて <div>Box Design.</div>という単純なものですが、これだけやれることが違うんですね。

sample6

ありがとう

Comments:12

wu Author Profile Page 2009年8月 3日 12:25

コメント欄まで目を通した方、あなただけに特別な情報があります！！！


この記事で紹介した機能は、未来のものではありません。
一般のWeb制作で使用するには、少し先のことかもしれませんが、
SafariやGoogle Chromeのエンジン WebKit では「今」有効な手法です。
僕はiPhone向けのスタイル制作をしているので、ものすごい勢いで「現場」で使っています。


というように、WebKitは「Webページを表示するもの」だけでなく、Macのアプリのインターフェイスに利用されたり、GoogleやAppleはiPhoneなんかのデバイスのインターフェイスとして使われていますので、機会があるなら挑戦してみるのもいいかもしれません。やっぱり使われないものを作っても面白みがないですからね。


となるとだ、一般のWebページ制作だけしているひとが「未来技術」といって新しい手法を「まぁ素敵」とのんびり眺めている間に、僕たちは実用レベルで近く主流となるかもしれないコーディング方法や有効なチップスを先に見つけられていることになる。


プロのWebデザイナーの方へ
HTML5やCSS3はまだ発表された仕様じゃないけど、十分に調べる価値があるものです。
AppleやGoogleの標準化に対する思いをなめちゃいけません。
ここはひとつ、原典となる仕様書(の邦訳でも)を見て勉強する良い機会じゃないですか？プロのWebデザイナーも、「現場でまだつかえないから」とかいって時代が変わるのを待っていたり、誰かが「まとめ記事」を作るのをまっていると、いつまでたってもテクニックを後追いする情報奴隷から抜け出せませんよ。興味があって時間もあるのに何もしないひとは、勉強するのが面倒くさくて後回しにしてるだけですよね？ だとしたらなかなか3流な「プロのWebデザイナー」ですね。


自分でテクニックや方法論を考えられるのは、なかなか貴重な機会なんですよ。発見されたばかりのまだ誰も真剣に読んでない魔法書のようなものに自由に無料でアクセスできるんですからね。あなたの見つけたテクニックが長い目で実用的かそうじゃないかなんてのは深く考えなくてもいいんです。だって今ある「実用的」なテクニックを見渡しても、いろんな人が考えだした(結果的に)実用的じゃなかったテクニックの積み重ねの上に、「ポン」と乗っかっただけのものばっかりなんですから。


いいですか、
「IE6だけを視野の中心に置いている人はプロじゃないっす。☆☆☆☆」


HTML5やCSSに関して調べているひとも、見つけたテクニックを後ろポケットにいれて、どこで出そうか考えてぐずぐずしていると、すぐに俺も見つけて先に公開しちゃうからね！


少し具体的なものをあげます。


「IE6を考慮しない」としたとき、最も大きく変わるのは実はこの記事のような「見栄え」に関するデザインではなく、「CSSのコーディング」デザインのほうです。理由は、セレクタの種類が圧倒的に増えるからです。


CSSにおいて「セレクタ」とは、対象となる文書構造を特定する重要なルールで、スナイパーライフルでいえばスコープにあたります。IE6を考えないコーディングの場合は、このスコープの精度が突然に、そして極端に上がります。
以下の「選択肢 セレクタ」のページをみてください。
http://zng.info/specs/css3-selectors.html#selectors
この辺はいまもうその使い方ぐらいは覚えておいたほうが良いと思いますよ。


Webデザインを趣味でやってる方へ


プロのウェブデザイナーたちが「現場主義」で新しい情報に触れてない間に、
SafariやGoogle Chormeを使ってCSS(2でも3でも), HTML(4でも5でも)を勉強しちゃてはどうでしょう？
CSSを勉強しているひとは、まずは実装が正確なブラウザを中心に使って表示を確認するのが大事です。１つのブラウザしか考えなくていいので、とても勉強しやすいんじゃないでしょうか。

最後に、参考となるサイトを紹介しておきます。

HTML5
http://www.html5.jp/

CSS3 (AnimationやTransform, Transition)
http://wiki.sohaya.com/index.php/CSSTransform
http://wiki.sohaya.com/index.php/CSSAnimations
http://wiki.sohaya.com/index.php/CSSTransitions

nanashi 2009年8月 3日 16:41

コメント部分の釣り針が大きすぎます＞＜

wu Author Profile Page 2009年8月 3日 17:11

nanashi　さん、コメントありがとうございます！
釣り針なんてありましたかー？これは延縄漁業ですよ!


釣り針を仕込むとしたらそうですねぇ...


「Web標準とかWeb準拠とか声高にいってたひとは、既にあったテクニックを再構成してお知らせしてただけなんですか？　HTML5やCSS2(完全なもの)・CSS3の仕様書を見て、じっとしていられずに思わずエントリーをかけちゃうぐらいにならないのでしょうか。　そういう人にとっては「Web標準」は最終目的だったんでしょう。本当においしい蜜はその先にありますからね。Web標準というラベルを使って小銭を稼いで人気者になれてよかったですね。あとは今座ってる場所を一生懸命守って下さい。お疲れさまでした。」


どうですかこれw　でかすぎですか。
ま、でも、善くも悪くも狙った獲物の感情にクイっと引っ掛けて動かすのが僕の「釣り針」です！

hirasawa 2009年8月 3日 22:06

text-shadowは、2で定義され2.1で削除、3で復活だったと思いますよ。

wu Author Profile Page 2009年8月 3日 22:31

hirasawaさん、コメントありがとうございます。
該当箇所を追記にて修正させていただきました。

metem 2009年8月 4日 15:35

もう書いてる内容の半分も理解できませんが、最近のCSSはすごいなあと言う事が分かりました。
2002年ごろCSSを職場で使ったら怒られたんですが、今はテーブルでレイアウトすると怒られるんでしょうね。

jog 2009年8月 4日 17:12

素人で申し訳ないんですが、この手のものって画像で表現することはできないのでしょうか？
cssでここまで出来るという記事だとしたらすみません。

wu Author Profile Page 2009年8月 4日 17:38

metem さん書き込み有り難うございます。
Webが秩序だった方向へ進んでいる証拠ですね。


jogさん
書き込み有り難うございます。
簡単にようやくすると、
画像で表現する方法しかなかったけど、その場合、サイズを変更できない、
画像の細部を変更できないといった不便さがあったのが、
新しい技術によって画像でおこなっていた表現をCSSだけで行えるようになり、それまでの問題も解決した。
ということですね。

wu Author Profile Page 2009年8月 4日 23:54

「文書構造と見た目を一致させる精度」という意味で
セレクタをスナイパーライフルのスコープと例えたけど、
セレクタは範囲を決めるから、あの照準とのイメージがずれてて変ですね...

dj sick! 2009年8月 8日 15:33

久々の更新ですね。
チェックしたのも久々ですがw
ほんとうにデザインがお上手で、いつもほれぼれしてしまいます。
独学でしょうか？かなり気になるところですが。

今回のエントリーを読んで、
実践Web Standards Designを注文してみました。
自分の脳内のhtmlの概念について更新をかけるのも面白そうだなと感じたので勉強してみます。

釣り針も最高です。
針のある文章は偏る傾向がありますが、web標準に関してはなんの問題もないでしょう。
web標準が現場に与える影響の大きさを思うと、興味深い社会現象だと思います。

wu Author Profile Page 2009年8月10日 07:06

> dj sick!さん
コメント有り難うございます。
約、１年ぶりの更新になりました
書きたい事が山ほどたまっているので、ぜひ、ちょくちょく覗いて下さい。
書籍も購入いただきありがとうございます！やったー！

k 2010年1月27日 01:01

コメ欄含めて記事を読んで鳥肌立ちました。
ビジネスで使う以上、現状ではIE6は嫌でも切り離せないものですが、くすぶってる場合じゃないですね。

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://3ping.org/mt2/mt-tb.cgi/138
Listed below are links to weblogs that reference
CSSの実装状況で変わるボックスのデザイン方法 from 3.5ping.org

Home > HTML5 > | Impressions > | Web > | XHTML CSS > CSSの実装状況で変わるボックスのデザイン方法

Recent Entries
Categories
Tag Cloud
Book

実践 Web Standards Design

「実践 Web Standards Design」ではXHTMLやCSSの仕様からマークアップの手法・考え方をはじめ、レイアウトや実践的なWebサイト構築のワークフロー、そしてCSSを利用したさまざまな技術的Tipsを解説しています。

Products
Search
Feeds

Return to page top