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

css

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

↓　こんな感じのボタン。

htmlファイルを用意

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

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

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

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

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

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

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

ul li{
    border:1px #ccc solid;
    border-bottom:none;
    background-color:#fff;
   
}

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

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

ul li:first-child ,
ul li:first-child a{
    -webkit-border-radius:6px 6px 0 0;
}

ul li:last-child{
　　border-bottom:1px #ccc solid;
   -webkit-border-radius:0 0 6px 6px;
}
ul li:last-child a{
    -webkit-border-radius:0 0 6px 6px;
}

画像、aタグの設定

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

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

ul img{
    width:32px;
    height:32px;
    margin:0 10px;
}

ul li a{
    display:block;
    padding:5px 0;
    height:auto;
    width:100%;
    color:#666;
    font-weight:bold;
    text-decoration:none;
    background-color:#fff;
}

ul li a:hover{
    background-color:#999;
}

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

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

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

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

ul li a span{
    display:table-cell;
    vertical-align:middle;
}

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

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

ul li a span:last-child{
  width:100%;
}

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

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

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

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

ul li > a:after{
    content:">";
    padding-right:15px;
    display:table-cell;
    vertical-align:middle;
}

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