技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

ヘッダにボタンを追加してみる。

html5 Tips Android

3月から放置気味のこっち。久々にやる気出した。
ヘッダ上に、ボタンを配置する。よくあるiPhoneの「戻る」ボタンの実装。(戻り先もなにも無いので、とりあえずはMenu)
まずはボタンのフォントとか整えてみる。

#header div.leftButton {
    position: absolute;
    top:  7px;
    left: 6px;
    height:30px;
    font-weight:bold;
    text-align:center;
    color:white;
    text-shadow:rgba(0,0,0,0.6) 0px -1px 1px;
    line-height:28px;
    border-width: 0 8px 0 8px;
}

次に、ボタンを配置。

<body>
    <div id="container">
        <div id="header">
            <h1><a href="http://www.white-azalea.net/">Azalea's Study page.</a></h1>
            <div class="leftButton">Menu</div>
        </div>

これでも十分見れる範囲だけど、もう一声してみる。

-webkit-border-image: url(button.jpg) 0 8 0 8;

画像は、無料素材倶楽部から頂いてきて、とりあえず見てみる。
うーん見た目かっこいいわね。
クリック動作はどうせJavaScriptでやるでしょ？

サンプルはこっち