Twitter Bootstrap に学ぶ、モダンなデザインのための CSS3 要素 4 選

Web

Twitter Bootstrap のデザインが、全体的にはシンプルなのにも関わらずそれなりに好印象な見た目なのは、「ボタン類のデザインを作りこんでいるから」と言う事が理由のように思います。

OK キャンセル

「CSS3 でユーザがすぐに恩恵を感じる要素は、border-radius, box-shadow, text-shadow の 3 つである」のような話をしばしば聞くのですが、Twitter Bootstrap においてもこれらの 3 要素にグラデーションを加えた 4 つの CSS3 の要素を駆使しているようです。上記のボタンの CSS 定義は以下のようになっています。

.btn {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  border: 1px solid #cccccc;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  *margin-left: .3em;
}

Twitter Bootstrap では、要素ごとに（特にグラデーション）どのブラウザでもできるだけ表示が崩れないように注意深く作られているようです。そこで、自分が CSS を定義する際のひな形にできるように、要素毎にまとめておきます。

グラデーション (gradient)

最近、最もコピペして使うものであるグラデーション（参考：CSS3 グラデーション（gradient）の指定方法）

/* #r1g1b1 (上) から #r2g2b2 (下) へのグラデーションとなる。*/
background-color  : #rrggbb;
background-image  : -moz-linear-gradient(top, #r1g1b1, #r2g2b2);
background-image  : -ms-linear-gradient(top, #r1g1b1, #r2g2b2);
background-image  : -webkit-gradient(linear, 0 0, 0 100%, from(#r1g1b1), to(#r2g2b2));
background-image  : -webkit-linear-gradient(top, #r1g1b1, #r2g2b2);
background-image  : -o-linear-gradient(top, #r1g1b1, #r2g2b2);
background-image  : linear-gradient(top, #r1g1b1, #r2g2b2);
background-repeat : repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#r1g1b1', endColorstr='#r2g2b2', GradientType=0);

ブラウザ毎の拡張プリフィックスは、-webkit-, -moz- 辺りはよく見かけるのですが -ms- (IE?), -o- (Opera?) と言うものもあるんですね。WebKit 用の設定も何か 2 種類あったり最後の filter はかなり書式が違ったりと、ゼロから自分で定義するには覚えきれないのでよくコピペして色（#rrggbb, #r1b1g1, #r2g2b2）だけ変更しています。

角丸 (border-radius)

角を丸くする border-radius は、今回列挙した 4 つの要素の中では最も手軽に指定できるのでよく使っています（参考：CSS3 角丸を表現する border-radius）。

-webkit-border-radius : Xpx;
-moz-border-radius    : Xpx;
border-radius         : Xpx;

個人的には 5px くらいがちょうどいいかなと言った印象。

枠線の陰影 (box-shadow)

box-shadow はそんなに難しくないようにも見えるのですが、カンマで複数指定できるようで、複数指定されるとどんな感じで描画されるのか頭の中でイメージしにくくなります。ものによっては、凄い量の box-shadow を指定してかなり複雑な見た目を実現している Web サイトもあるようです（参考：CSS3 text-shadow box-shadow の使い方）。

/* inset を指定しない場合は枠線の外側に、指定した場合は枠線の内側に陰影が表示される。*/
-webkit-box-shadow : [inset] right bottom size #rrggbb;
-moz-box-shadow    : [inset] right bottom size #rrggbb;
box-shadow         : [inset] right bottom size #rrggbb;

/*
 * rgba(red, green, blue, alpha) と言う形式で色を指定する場合。
 * red, green, blue の範囲は [0, 255], alpha の範囲は [0, 1.0]
 */
-webkit-box-shadow : [inset] right bottom size rgba(red, green, blue, alpha);
-moz-box-shadow    : [inset] right bottom size rgba(red, green, blue, alpha);
box-shadow         : [inset] right bottom size rgba(red, green, blue, alpha);

テキストの陰影 (text-shadow)

box-shadow のテキスト版。text-shadow には -webkit-, -moz- 等のプリフィックス版は指定しないのですね。もっとも、最近はもう box-shadow, border-radius 辺りもプリフィックス版を指定しなくても大体きちんと表示してくれるようになっているので、あまり気にしなくて良いのかもしれません（参考：CSS3 text-shadow box-shadow の使い方）。

text-shadow: right bottom size #rrggbb;
text-shadow: right bottom size rgba(red, green, blue, alpha);

text-shadow はあまり使いこなせていません。CSS3のtext-shadowを使ったテキスト装飾のサンプル集 辺りでは様々なエフェクトのサンプルが掲載されているのですが、個人的に使用する場面は「背景と（タイトル等の）文字列が同系色の場合に、違う色で縁取りして見やすくする」くらいです。この辺りは、暇を見て効果的な使い方を探していこうと思います。

Related Pages