iPhone風戻るボタン。
あれ、もちろんHTMLとCSSでも作れます。

今日は初めてお土産付きの記事をあげてみましょうかね。ドンドンパフパフ。


ポイント

iPhone風ボタンを作るポイントは、簡単にいえば3つ。

  • widthはリキッド対応にする
  • 文字数は一定で制限する
  • それっぽい画像をうまく作る(笑)

また「リキッドにしておいたら文字があふれちゃうじゃ～～ん！」なんて紳士淑女の皆様もご心配なく。
下記を指定してやれば、余った分があの「…」的な感じになります。

text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;

用意する画像

画像は2種類用意します。（最後のお土産に入っています）

1つめは、間を開けたpng画像。これはCSS Spriteで背景位置を指定します。
2つは、その間に繰り返し表示するためのpng画像。1つめと同じ画像から色だけ必要で切り取ったものと考えてください。


コーディング

じゃ、画像も準備できたところで、さっそくコーディングしましょうか。
HTMLは大したことないです。リンクだけ。


<a href="#someLink" class="buttonTest">Back to Top</a>


CSSはこちら。

/*iPhone風戻るボタン*/

.buttonTest{
-webkit-border-image: url(../images/backButtonBrdr.png) 0 8 0 14 / 0px 8px 0px 14px;
-moz-border-image: url(../images/backButtonBrdr.png) 0 8 0 14 / 0px 8px 0px 14px;
background: url(../images/backButtonBack.png) center center repeat-x;

max-width: 10%;/*リキッド対応*/
border-width: 0 8px 0 14px;

position: absolute;
overflow: hidden;
top: 8px;
right: 6px;

margin: 0;
padding: 0 5px;

width: auto;
height: 30px;

line-height: 30px;

font-family: inherit;
font-size: 12px;
font-weight: bold;
color: white;

text-shadow: rgba(0,0,0,0.6) 0px -1px 0;
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
}

どうでしょうか？
表示結果は…こんな感じ！
（背景の部分は別にhtml&css書いています）


うん、うまくそれっぽくなりました(笑)


お土産はまるっとこちらに置いておきます。
ライセンス等放棄しています。ご自由にどうぞ。
ダウンロード（zipファイル/6.38KB）

お持ち帰りの際には、ぜひFacebookのシェアやコメント一言いただけると、とってもうれしいです。