これは簡単! a要素にクラスを追加するだけでiPhone UIボタン

カテゴリ:iPhone関連 2011年8月29日 09:05

↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone / WebKitでしか最適化されていません)

これは簡単! a要素ひとつでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhone / WebKitで実際に見るとこんな感じに見えます↓

実際に適用したサンプル

a要素に1クラス追加するだけで実現するのでお手軽

今回のサンプル作成でこだわったのは、1要素に1クラスを指定するだけでiPhoneのようなデザインを実装することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。

HTMLソース

CSSソース

実は見出し部分も画像なし

実はタイトル周りもCSSのみで実装しています。
ソースもかなりシンプル。
さらには背景の縞々模様もCSSのみで作っていたりします。

まとめ

CSS3のポテンシャルは非常に高いです。
こうした比較的シンプルなデザインであればCSSのみで、かつ要素を何重にも入れ子に・・なんてしなくても実現できてしまいます。
(具体的には、:after擬似要素、:before擬似要素を匠に使うことで、無理に思えるデザインも実装できてしまったりします)
[追記] Twitterで指摘をもらいましたが、:after(:before)擬似要素はCSS3からの定義ではありません。ここで言いたかったのは、それらを工夫して使うことでCSS3の力が増し、CSSのみで複雑なデザインが実現できる、ということでした。:after(:before)擬似要素がCSS3だと勘違いされる人がいるかもしれないので追記しておきます。

iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。

ちなみにこのサンプルは、自分で作ったCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。

この記事のカテゴリー一覧を見る⇒iPhone関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/197