Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ “ CSSオンリー “ の検索結果

1要素1クラス、画像を一切使わずCSSで実装するiPhone UI

1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。

最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・)

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

1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhoneで実際に見るとこんな感じに見えます↓
iPhoneで表示したiPhone風UIのキャプチャ

iPhoneで実際に見るには、以下のURLから見れます↓
(jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました)
http://goo.gl/s5fV

1要素1クラスで実現する

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

a要素をiPhone風ボタンにする

<a href="#" class="btnTypeA">ボタンタイプA</a>

実際に上記を表示すると以下のようにすぐボタンっぽい外観に変わります。↓
灰色のiPhoneボタン風のスタイルになったa要素

iPhone風リストA

<div class="listIPhone listTypeA">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeA --></div>

実際に上記を表示すると以下のようにリストスタイルになります。(1要素1クラスを意識していますが、ベースとなるものが同じで、異なる外観の場合は2クラスに分けて複数の見た目を制御できるように実装しています)
iPhone風リストスタイルのキャプチャ
また、「削除ボタン」はややイレギュラーなもののため、いくつかクラスを追加しています。リスト中のa要素は基本、横100%のリンクになってしまいますが、例外的に「noListLink」クラスを追加することで回避しています。
さらに通常時は表示されない要素、ということで、「floatBtn」クラスを付けることで、左は時に表示されるようにしています。

iPhone風リストB

<div class="listIPhone listTypeB">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeB --></div>

実際に上記を表示すると以下のようにリストスタイルになります。
iPhone風リスト。リスト右端に丸い矢印マークがあります
もちろん、右端にある青い丸矢印も画像は使っていません。

見出し部分も画像なし

そして今回、ちょっとこだわった部分がタイトル左横にある矢印型のボタンです。
当初はこういう形は画像使わないと無理かなーと思っていたんですが、そこそこ見れるものが作れました。(ただ、やっぱり若干標準のUIと比べると形がいびつです)
ソースもかなりシンプル。

<div class="toolbarBox">
<h1 class="toolbar">CSS3 UIテンプレート</h1>
<nav>
<ul>
<li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li>
<li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li>
</ul>
</nav>
<!-- /.toolbarBox --></div>

見出し部分のキャプチャ。左横の矢印ボタンもCSSのみで実装

作ってみた感想

意外とがんばればなんとかなるな、というのが感想でした。
標準UI以外にも、これくらいのデザイン性のものであればCSSのみで実現できてしまうので、iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
(もともとは、CSSを使って画像を使わずにデザインを実装する、というのを書こうと思ったのが発端だったので)

ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。

ちなみに今回のサンプルは、個人のブログで公開しているCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。→Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

そしてカヤックでは、こんなiPhone風CSS3が大好きなマークアップエンジニアを募集中です!

警告とメッセージ