PR

CSS3って何?注目機能をピックアップ

2011年6月1日(水)
宮本 麻矢(著)山田 祥寛(監修)

CSS3で角丸表現

CSS3では、これまで画像を使っていた角丸やドロップシャドウ、グラデーションのようなグラフィカルな表現も、画像を使わずCSSだけで実現できます。

ボックスのコーナーを角丸で表現したい場合、これまでは、角丸の画像を用意して、ボックスの背景画像として表示させるのが一般的でした。CSS3ではborder-radiusプロパティを使って4つのコーナーに楕円の形状を指定できます。それぞれのコーナーは4分の1の楕円になり、図6のように水平方向と垂直方向の半径の組み合わせで楕円の形状を指定します。

3

図5:border-radiusは水平方向と垂直方向の半径で楕円の形状を指定する

border-radiusプロパティの書式は、水平方向と垂直方向の半径のセットをスラッシュ(/)で区切って、左上・右上・右下・左下の順で指定します。値が1つの時は4つのコーナーを全て指定したことになり、スラッシュ以降を省略した場合には、水平垂直ともに同じ値として解釈されます。

[リスト04]border-radiusプロパティでコーナーを角丸に

#sample1 {
  /* 左上・右上・右下・左下の順で水平方向の半径セットと
    垂直方向の半径のセットをスラッシュで区切る */
  -moz-border-radius: 0 25px 25px 50px/ 0 25px 50px 25px;
  -webkit-border-radius: 0 25px 25px 50px/ 0 25px 50px 25px;
  border-radius: 0 25px 25px 50px/ 0 25px 50px 25px;
}

なお、border-top-left-radius(左上)、border-top-right-radius(右上)、border-bottom-left-radius(右下)、border-bottom-right-radius(左下)を使用すれば、コーナーの角丸を個別に指定することもできます。

CSS3でドロップシャドウ表現

box-shadowプロパティを使えば、Photoshopで言うところのドロップシャドウのような影を落とす表現も画像を使わずに実現できます。

3

図6:box-shadowプロパティでボックスの影を落とす

box-shadowプロパティでは、2~4つの長さの値で定義され、水平方向、垂直方向、ぼかし距離、広がり距離の順で指定します。任意で色やinsetキーワードを指定することもできます。insetキーワードは、影をボックスの外側ではなく内側に付けるものです。長さの値を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。

3

図7:box-shadowプロパティにinsetを指定した例

[リスト05]box-shadowプロパティの使用例

div#sample2 {
  /* 水平方向、水平方向、垂直方向、ぼかし距離、広がり距離、色 */
  box-shadow: 5px 5px 10px 5px #000;
  -moz-box-shadow: 5px 5px 10px 5px #000;
  -webkit-box-shadow: 5px 5px 10px 5px #000;
} 

CSS3でグラデーション表現もできる

グラデーションの表現もlinear-gradient関数を使うことで表現できます。これはbackground-imageプロパティやlist-style-imageプロパティなど、画像を扱うことのできるどのプロパティに指定できる値で、書式は次の通りです。

[リスト06]linear-gradient関数の書式

  linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);

グラデーションの方向は、開始位置と角度で指定します。開始位置と角度は省略可能ですが、省略すると初期値のtopになります。開始色と終了色は、カンマ区切りで指定しますが、さらに中間に色を追加して途中色を指定することもできます。

なお、webkit系のブラウザの場合は、W3Cの文法と異なり、次のような書式になりますので注意しましょう。

[リスト07]linear-gradient関数の書式(webkit系の場合)

  -webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色)); 

次のサンプルでは、上から下に、白(#fff)から赤(#c00)のグラデーションになるよう指定しています。

3

図8:linear-gradient関数によるグラデーションの例

[リスト08]linear-gradient関数によるグラデーションの例

div#sample3 {
  background-image: -moz-linear-gradient( /* Firefoxの場合 */
    top, #fff, #c00
  );
  background-image: -webkit-gradient( /* Webkit系の場合 */
    linear,
    left top,
    left bottom,
    color-stop(0%, #fff),
    color-stop(100%, #c00)
  );
  background: linear-gradient( /* 標準のCSS */
    top, #fff, #c00
  );
}

以上、CSS3の魅力的な機能をかいつまんでお話しました。今回は、プログレッシブエンハンスメントの考えに基づいて、IEの対応については触れませんでしたが、次回はIEでもCSS3の機能を使うためのテクニックについて説明したいと思います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

【参考文献】

W3C Selectors Level3

CSS Image Values and Replaced Content Module Level 3

CSS Backgrounds and Borders Module Level 3

<最終アクセス:2011.04>

Think IT会員限定特典
  • 「CSS3って何?注目機能をピックアップ」サンプルプログラム

著者
宮本 麻矢(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています