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

Archives Details

CSS3で作成 iPhone風 アイコン

iPhone

2011.09.20

この記事は最終更新日から1年以上が経過しています。

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】

 

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

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

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

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

-webkit-となります。

中の赤い円はspanに指定。

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

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

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

くわしくはこちら

CSS3 グラデーション(gradient)の指定方法

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

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

cssで記述。

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

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

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

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

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

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

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

デモはこちらから!

アイコンデモ

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

Comment

Related Article

【保存版】iPhoneだけで web開発できる 無料アプリをまとめてみました。2016年版

2016.04.22

iPhone6でバックアップから復元出来ない問題

2014.09.23

iPhone5 バッテリー交換プログラム 交換出来ず!

2014.09.15

iTunesで 「iPhoneの内容を読み込めません」エラー等の回避 「DiskAid」アプリでiPhoneのデータをバックアップ

2014.04.29

iPhoneの画面をキャプチャし動画撮影する方法 Reflector

2013.03.24

iPhoneで未開封メール全て開封済みにする

2012.10.13

iOS6にて-webkit-fillterプロパティが対応

2012.10.03

無料で使えるiPhone5のモックアップ用ベクター素材が早くも登場

2012.09.23

CSS3で作成 iPhone風 アイコン

2011.09.20

CSS Media Queries(メディアクエリ)を使用した指定方法

2011.09.20

CATEGORY LIST

LATEST NEWS

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

tool

2018.03.27

ご報告

イベント

2018.02.02

明けましておめでとうございます。(遅め

イベント

2018.01.16

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US