iphoneのUIのようなボタンをCSS3を使用して作ってみた。

css

CSS3なども使用して、iphoneの設定画面のようなインターフェースみたいなデザインのボタンを再現したくて試してみました。
一応、スマホをメインに考えて自動的に幅が伸びる感じで。

↓ こんな感じのボタン。

htmlファイルを用意

まぁこちらはいたって普通にliタグでよくあるボタンを作ります。ボタンですが、ボーダーで囲んで「ボタンのアイコン」「ボタンの名前」「右端に『>』のマーク」でボタンっぽくしたいと思います。

上記のタグを見ていただくと分かりますが、画像をテキストをspanタグで囲ってるのが分かりますが、これがポイントになります。

CSS3を利用してビジュアルを整えていく

普段であれば、全体のCSSを載せるのですが、段階を追っていきます。全体は、上記のサンプルのCSSのタブから見れます。

なお、今回はulタグのpaddingとmarginは0に設定していて、bodyの背景色は「#F0EFED」でグレーにしています。

CSSセレクタを利用して角丸ボーダーを作成

まずは、ボタンのボーダーの設定します。全体にボーダーの設定した後にborder-bottomはボーダーが重なってしまうのでnoneで消しておきます。

次は、CSS3のセレクター「:first-child」を使って最初のボタンだけ角丸にしたいので、border-radiusを使用しています。
また最後のボタンも角丸にしたいのでCSS3のセレクター「:last-child」で角丸の設定をしています。そして最後のボタンだけは、border-bottomが必要なのでここで設定しています。

尚、aタグにも角丸の設定等をしているのは、背景色が角丸と被ってしまい角丸が消えて見えてしまう為です。

画像、aタグの設定

ここでは、アイコンである画像の設定とaタグの設定をしています。ここは特に難しい設定をしていません。

aタグをブロック要素にしてpaddingとロールオーバーが効くようにして幅を100%と高さをautoにしています。

talbe-cellで上下中央に設置する

今回は、ここがポイントと言っても過言ではありません!!

画像とテキストをそれぞれspanタグで括っていますが、table-cellにすることでvertical-align が有効になるので、middleを設定することで、liタグの高さの上下中央に配置されます。

ちなみに、IE6とIE7は、table-cellには対応していないのですが、今回はスマホでも見れるように可変にしてるので、無視しています。ヨモツネットさんの「CSS で簡単に上下中央揃えを実現する」を参考にしてください。

CSS3のセレクター「:last-child」を利用して最後の要素・・この場合はテキストになりますが、こいつの幅を100%にしていっぱに広げてやります。

なぜ、幅を100%にしたのかは、次の設定に関わってくるからです。

擬似要素「:after」で矢印を追加する

擬似要素である「:after」を利用してaタグの後に「>」のマークを入れたいのでcontentプロパティで設定しています。

こちらもdisplayをtable-cellに設定してvertical-alignをmiddleで上下中央に設定しています。

サンプルを見ていただくと分かるのですが、「>」のマークが右端に寄っているのが分かると思いますが、これは前項で指定した最後のspanタグの幅を100%にしてあげることで、右端に寄せることができます。
前項の設定をしないとテキストのすぐ右に「>」がきてしまします。

という具合にさくっと書きましたが、spanで括ってtacle-cellで上下中央に設定してafter属性でaタグの後に「>」を入れることで実現できました。