iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法

スマートフォンサイトを制作する上で便利なCSS3。

必要最低限まで画像の使用を減らし、スマートフォンサイトのデザインをスムーズにコーディングすることができます。

また、画像を使わずにCSS3を使ってスマートフォンサイトのデザインを実現すれば、読み込み時間や容量の軽いサイトを制作でき、サイトの最適化へつながります。

最近では海外の便利なジェネレーターサイトがたくさんあり、誰でも気軽にソースをつくることができます。

しかし、実際に自分がデザインしたサイトをコーディングする際には、やはり独自でそれぞれのコードの使い道を知る必要があります。

CSS3の記述は従来のCSSとは違い、少し複雑な記述が必要となります。

今回はそんなCSS3の記述を、サイトデザインでよく使われるPhotshopのレイヤースタイルを再現する方法として一通り紹介します。

※iPhoneサイト（スマートフォンサイト）制作のため、今回はwebkitのCSS3の記述のみ紹介致します。

まずはじめに角丸の作り方

今回はPhotoshopで角丸のシェイプを作ってそのシェイプにレイヤースタイルをつけるような流れで説明いたします。

CSS3でスタイルをつける対象となるHTMLは、全て以下の「sample」という<span class=”bold”>divタグ</div>で囲まれた部分になります。

<div id="sample">sample</div>

まずはじめにレイヤースタイルをつけていくベースとなる角丸ボックスをCSS3でつくります。

/*ここで背景のベースカラーを指定する*/
background-color: #3ab5dd;

/*ここでCSS3をつかって角丸を指定する
（※角丸を大きくする場合はpx数を変更）*/
-webkit-border-radius:5px;

/*ここで角丸ボックスの余白の大きさを指定する*/
padding:15px;

これで角丸のボックスができます。

4つの角丸の大きさがすべて同じ場合はこのようにプロパティを一括してしていしますが、
角丸を個別に指定したい場合は以下のような記述で実現できます。

/*CSS3をつかって左上の角丸を指定する*/
-webkit-border-top-left-radius:5px;
/*CSS3をつかって右上の角丸を指定する*/
-webkit-border-top-right-radius:5px;
/*CSS3をつかって右下の角丸を指定する*/
-webkit-border-bottom-right-radius:5px;
/*CSS3をつかって左下の角丸を指定する*/
-webkit-border-bottom-left-radius:5px;

Photoshopのレイヤースタイルを再現しよう

ドロップシャドウ

PhotoshopのドロップシャドウをCSS3で再現する記述は以下になります。

/*CSS3をつかってボックスにドロップシャドウをつける
（#666666の灰色の影の場合）*/
-webkit-box-shadow:#666666 5px 5px 5px;

影の部分に不透明度を指定したい場合は色指定にrebaを使います。

/*CSS3をつかってボックスにドロップシャドウをつける
(黒色（RGB指定0,0,0）が75%の不透明度の影の場合)*/
-webkit-box-shadow:rgba(0,0,0,0.75) 5px 5px 5px;

シャドウ(内側)

上のドロップシャドウの記述にinsetという記述を加えれば、
Photoshopのシャドウ(内側)をCSS3で再現できます。

.

/*CSS3をつかってボックスにシャドウ（内側）をつける
（#666666の灰色の影の場合）*/
webkit-box-shadow:#cccccc 5px 5px 5px inset;

影の部分に不透明度を指定したい場合は色指定にrebaを使います。

/*CSS3をつかってボックスにシャドウ（内側）をつける
(黒色（RGB指定0,0,0）が75%の不透明度の影の場合)*/
-webkit-box-shadow:rgba(0,0,0,0.75) 5px 5px 5px inset;

光彩（外側）

上のドロップシャドウの記述を応用して、影の色を明るい色に変えればPhotoshopの光彩（外側）をCSS3で再現できます。

/*CSS3をつかってボックスに光彩（外側）をつける
（白色の光彩の場合）*/
-webkit-box-shadow:#ffffff 0 0 5px;

影の部分に不透明度を指定したい場合は色指定にrebaを使います。

/*CSS3をつかってボックスに光彩(内側)をつける
(白色（RGB指定255,255,255）が75%の不透明度の影の場合)*/
-webkit-box-shadow:rgba(255,255,255,0.75) 0 0 5px;

光彩(内側)

シャドウ（内側）と同様にinsetという記述を加えれば、
Photoshopの光彩(内側)をCSS3で再現できます。

/*CSS3をつかってボックスに光彩（外側）をつける
（白色の光彩の場合）*/
-webkit-box-shadow:#ffffff 0 0 5px inset;

影の部分に不透明度を指定したい場合は色指定にrebaを使います。

/*CSS3をつかってボックスに光彩(内側)をつける
(白色（RGB指定255,255,255）が75%の不透明度の影の場合)*/
-webkit-box-shadow:rgba(255,255,255,0.75) 0 0 5px inset;

グラデーションオーバーレイ

CSS3のグラデーションの記述を使えばPhotoshopのグラデーションオーバーレイを再現できます。

/*CSS3をつかって線状のグラデーションをつける*/
background:-webkit-gradient(linear,left top, left bottom, from(#20cae6),to(#1995b4));

また、グラデーションの指定をlinearからradialに変えれば円形のグラデーションも再現できます。

/*CSS3をつかって円状のグラデーションをつける*/
background:-webkit-gradient(radial,50% 50%, 0, 50% 50%, 70, from(#20cae6),to(#1995b4));

また、以下のようにcolor-stopというグラデーションを止める命令と止める位置を指定する記述を使えば、半分づつで色が違うグラデーションも再現できます。

/*CSS3をつかって半分づつで色が違うグラデーションをつける*/
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.48,#1995b4), color-stop(0.48,#20cae6));

パターンオーバーレイ

こちらは少し無理やりかもしれませんが、以前紹介した「画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう」を使用すれば、いくつかのパターンをシェイプ上に再現できます。

境界線

こちらはCSS3ではなく従来のCSSですが、念のためレイヤースタイル再現のひとつとして入れておきます。

/*CSS3をつかってボックスに境界線をつける
(太さが3pxで#666666の灰色の境界線の場合)*/
border:3px solid #cccccc;

基本的に以上のCSS3の記述を使用すれば、Photoshopでデザインされたスマートフォンサイトの制作には何かと便利だと思われます。

同じbox-shadowの命令を使う光彩（内側）とドロップシャドウのような効果も、aタグと、divタグの入れ子のソースで、内側の要素に光彩（内側）をかけて親要素にドロップシャドウをかけるなどして工夫をすれば、CSS3でのデザインの幅は広がります。

他にも、もう少し高度なCSS3の記述や便利な使用方法についても、今後勉強しながらご紹介できればと思います。