このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

CSS3で出来なかったことが色々と出来るようになりました。

今まで、webサイト制作の際、gifやjpgまたはpngの画像ファイルで表現していた部分も、

css3で記述する事によって、表現することが可能です。

え？そんな面倒くさいことしなくていいじゃん！

って思われがちですが、

PC等の様にスペックの高いデバイスなら問題ないのですが、

スマートフォン等のPC程スペックのないデバイスの時に

画像だと、容量が重くてページ読み込みの際に時間がかかり、ユーザーを待たせる結果となります。

小さい画像なら良いかもしれませんが、

こちら

スマフォンサイトで使えるCSS3 ボタン作成

にあるように、

このようなボタンの時（スマフォンで使用するにはちょっとでかいか？）

画像（gif)だと4KBですが、css3で作成すると、

な、なんと522B

で済むのです！！（半角1文字＝1k計算）

だったら、css3で書いちゃおぉぉ〜て流れなのです。

では、今回はスマートフォンサイトらしく、

よく使うであろう、iPhone風のアイコンを作っちゃいましょう！

こういうやつ。では

【HTML】

<a href="#" class="icon"><span></span></a>

このアイコンはクリッカブルエリアな為、aタグでマークアップします。

要素が必要な為、a要素の子にspan要素を配置。

【CSS】

position: relative;
display:block;
width:24px;
height:24px;
border:#a7a7a7 1px solid;
-webkit-border-radius:12px;
-webkit-box-shadow:0px 2px 2px #a7a7a7;
background:#fff;
}

aタグに指定する事で外枠を作成

CSS3の指定はborder-radiusとbox-shadowになります。

スマートフォンはモバイルsafari及びgoogoleブラウザなのでプレフィックスは

-webkit-となります。

中の赤い円はspanに指定。

.icon > span{
display:block;
content:"";
position:absolute;
top:2px;
left:2px;
width:20px;
height:20px;
-webkit-border-radius:10px;
background:-webkit-gradient(linear, left top, left bottom, from(#d77077), color-stop(0.49, #ca414c), color-stop(0.5, #bd1522), to(#bd1522));
}

ここでもborder-radiusを指定。2px小さい円の為、数値はaタグより2px小さいです。

backgroundはグラデーション指定。

くわしくはこちら

CSS3 グラデーション（gradient）の指定方法

それでは中の×マークを。

テキストで入力したいところですが、デバイス間のフォントサイズのずれをさけるため

cssで記述。

 

.icon > span:after{
display:block;
content:"";
position:absolute;
top:9px;
left:3px;
width:14px;
height:2px;
background:#fff;
-webkit-transform:rotate(45deg);
}

疑似要素（content:””;）をspanタグの前（.icon > span:after{）に作成。

width14px height2pxのラインをpositionで配置。

ここでtransformの出現！rotate(45deg)で45°傾けています。

.icon > span:before{
display:block;
content:"";
position:absolute;
top:9px;
left:3px;
width:14px;
height:2px;
background:#fff;
-webkit-transform:rotate(-45deg);
}

同じ様に疑似要素を今度は後ろ（span:before）に生成。

今度は−45°に傾けて完成です！

デモはこちらから！

アイコンデモ

（webkit(safari,Google Chrome)のブラウザのみの表示となります！）