↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone / WebKitでしか最適化されていません)
これは簡単！ a要素ひとつでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS
ちなみにiPhone / WebKitで実際に見るとこんな感じに見えます↓
今回のサンプル作成でこだわったのは、1要素に1クラスを指定するだけでiPhoneのようなデザインを実装することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。
実はタイトル周りもCSSのみで実装しています。
ソースもかなりシンプル。
さらには背景の縞々模様もCSSのみで作っていたりします。
CSS3のポテンシャルは非常に高いです。
こうした比較的シンプルなデザインであればCSSのみで、かつ要素を何重にも入れ子に・・なんてしなくても実現できてしまいます。
（具体的には、:after擬似要素、:before擬似要素を匠に使うことで、無理に思えるデザインも実装できてしまったりします）
[追記] Twitterで指摘をもらいましたが、:after(:before)擬似要素はCSS3からの定義ではありません。ここで言いたかったのは、それらを工夫して使うことでCSS3の力が増し、CSSのみで複雑なデザインが実現できる、ということでした。:after(:before)擬似要素がCSS3だと勘違いされる人がいるかもしれないので追記しておきます。
iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。
ちなみにこのサンプルは、自分で作ったCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。
初めてテンプレートっぽいものを作ってみました。
といっても、どういうテンプレートがいいのかわからなかったので、デザインこみでテンプレート化してみました。n
コンセプトとかは下に書いてあります。n
画像を見てもらえば分かると思いますが、レイアウト以外に結構画像なんかを使ってます。
ロゴマークなんかは画像をさしかえればいいと思いますが、レイアウトに関係してしまっている画像についてはダウンロードされた画像と同じサイズで新しいものを作成するか、CSS も込みで変更してください。n
ちなみに完全フリーですのでいくら改編してもらっても構いません。
また不具合やリクエストなどあればコメントで書いてもらえれば検討します。n
・・てか、画像なんかを入れないテンプレート（レイアウトのみとか）のほうが使いやすかったりするんですかね？
とりあえず形のあるものを使って、そこから徐々に修正していく、みたいな感じのものとして作成しました。n
もし、レイアウトだけのシンプルなテンプレートのほうがいいよ！ とか、
こういうテンプレートがほしいんだけど！ みたいなリクエストがあればコメントでお寄せください。
出来る限り対応したいと思いますｗn
カテゴリー
©2009-2011 CSS-EBLOG All Rights Reserved
