スマートフォンで積極的に使いたい4つのCSS3

2010年07月26日

CSS3は通常のWebサイトでは、IE6～8が高いシェアを持っているため現状ではあまり使われません。
しかし、iPhoneとAndroidのブラウザはwebkitという同じHTMLレンダリングエンジンが使われているため、古いブラウザを気にせずCSS3(*1)を使うことが出来ます（IEを気にせずコーディング出来るなんてちょっとうれしいですね！）。

ということで、スマートフォンで積極的に使っていきたいCSS3を紹介します。

*1…すべてのCSS3プロパティが使えるわけではありません。

ボーダーの角丸を指定する

border-radiusプロパティを使うことで簡単に角丸を作ることが出来ます。

4つ角の半径を一度に指定するショートハンド

01<style type="text/css">
02#sample01 {
03    padding: 10px;
04    background: #FFFFCC;
05    border: 2px solid #FFCC99;
06     
07    -webkit-border-radius: 10px;
08    -moz-border-radius: 10px;
09    border-radius: 10px;
10}
11</style>
12<p id="sample01">4つの角を指定する</p>

サンプル01

左上の角の半径を指定する

01<style type="text/css">
02#sample02 {
03    padding: 10px;
04    background: #FFFFCC;
05    border: 2px solid #FFCC99;
06     
07    -webkit-border-top-left-radius: 10px;
08    -moz-border-radius: 10px 0 0 0;
09    border-radius: 10px 0 0 0;
10}
11</style>
12<p id="sample02">左上の角を指定する</p>

サンプル02

-webkit-と-moz-という指定を先頭に付けることでそのブラウザだけを対象にした指定となります。
本来であれば4つ角をショートハンドで指定出来るのですが、webkitは対応していないため、個別に指定します。

背景にグラデーションを指定する

01<style type="text/css">
02#sample03 {
03    padding: 10px;
04    background: -webkit-gradient(linear,left bottom, left top,
05                from(#fc8312),
06                color-stop(0.01,#ffb160),
07                color-stop(0.02,#ffb160),
08                color-stop(0.03,#fe8a0f),
09                color-stop(0.49,#ff7300),
10                color-stop(0.5,#ff9100),
11                to(#ffca80));
12 
13    background: -moz-linear-gradient(
14                center bottom,
15                rgb(215,63,164) 15%,
16                rgb(255,95,197) 58%,
17                rgb(255,124,237) 79%
18                );
19}
20</style>
21<p id="sample03">背景グラデーション（縦）</p>

サンプル03

01<style type="text/css">
02#sample04 {
03    padding: 10px;
04    background: -webkit-gradient(linear,left top, right top,
05                from(#fc8312),
06                color-stop(0,#ffb160),
07                color-stop(1,#ff9100),
08                to(#ffca80));
09 
10    background: -moz-linear-gradient(
11                center left,
12                rgb(215,63,164) 15%,
13                rgb(255,95,197) 58%,
14                rgb(255,124,237) 79%
15                );
16}
17</style>
18<p id="sample04">背景グラデーション（横）</p>

サンプル04

グラデーションを手動で指定するのは面倒なため、CSS3 Gradient Generatorなどを使うと簡単にCSSコードを作ることが出来ます。

テキストにドロップシャドウを指定する

テキストと同じ位置に10pxの範囲で黒いドロップシャドウ

1<style type="text/css">
2#sample05 {
3    text-shadow: 0 0 10px #000000;
4    filter: dropshadow(color=#000000, offx=1, offy=1);
5}
6</style>
7<p id="sample05">テキストにドロップシャドウ</p>

サンプル05

テキストからx,y軸5pxの位置に10pxの範囲で黒いドロップシャドウ

1<style type="text/css">
2#sample06 {
3    text-shadow: 5px 5px 10px #0026e3;
4    filter: dropshadow(color=#0026e3, offx=1, offy=1);
5}
6</style>
7<p id="sample06">ドロップシャドウの位置や色も指定できます</p>

サンプル06

気づかない程度に使い、文章の見え方をリッチに

1<style type="text/css">
2#sample06 {
3    text-shadow: 1px 1px 1px #999999;
4    filter: dropshadow(color=#999999, offx=1, offy=1);
5}
6</style>
7<p id="sample07">気づかない程度に使って文章をリッチに</p>

サンプル07

ボックス要素にドロップシャドウを指定する

ボックス要素にドロップシャドウ

1<style type="text/css">
2#sample08 {
3    padding: 10px;
4    -webkit-box-shadow: 0px 0px 10px #000000;
5    -moz-box-shadow: 0px 0px 10px #000000;
6    box-shadow: 0px 0px 10px #000000;}
7</style>
8<p id="sample08">ボックス要素にドロップシャドウ</p>

サンプル08

角丸も指定するといい感じになります

01<style type="text/css">
02#sample09 {
03    padding: 10px;
04 
05    -webkit-box-shadow: 0px 0px 10px #000000;
06    -moz-box-shadow: 0px 0px 10px #000000;
07    box-shadow: 0px 0px 10px #000000;
08 
09    -webkit-border-radius: 10px;
10    -moz-border-radius: 10px;
11    border-radius: 10px;}
12</style>
13<p id="sample09">角丸も指定するといい感じになります</p>

サンプル09

CSS3を上手く使うと…

今回紹介したCSS3を上手く使うことで画像を使わずにグラデーションやドロップシャドウが効いたデザインをコーディングすることが出来ます。画像を使わない分データ量を減らすことが出来るため、回線速度が遅いスマートフォン用のサイトには積極的に使っていきたいですね。