Wii風の角丸ボタンをCSSと画像で作成

透過画像を有効利用

　GIGAZINE で紹介されていた Wii 風の角丸ボタンを CSS で再現する Simple Round CSS Links（現在はページがなくなっています）が良い感じだったので利用しようとしたのですが、使われている画像と CSS のファイルサイズが大きいのが気になりました。そこで、ぐっとシンプルにしてみることに。

　Wii Buttons のファイルサイズが大きいのは、ボタン画像の横幅の調節や、submit ボタンのオン・マウス処理など、いろいろと凝っていいるから。しかし、ボタンの横幅は固定で使うケースが多いので、このあたりの処理をごっそりなくて、必要最小限の処理だけに絞ります。

　まずはボタン画像の作成から。ライン部分を透過処理するのがポイントです。このことより、画像ファイル一つでボタンのライン色を CSS でコントロールできるようになります。

  1. ライン付きの画像を自分が使う横幅で作成。
  2. 四隅の透過部分を背景色で塗りつぶす。
  3. ラインを透過処理。

　下記の CSS を適用します。

.button {
    display: block;
    color: #00a;
    text-align: center;
    text-decoration: none;
    /* ボタン画像サイズに合わせる */
    width: 180px;
    /* 画像と通常時のライン色を指定 */
    background: #ddd url(button.gif) center center no-repeat;
    /* 使用しているフォントに合わせて調節 */
    font-size: 12px;
    font-weight: bold;
    padding: 7px 0 8px;
    /* input タグ用にボーダーを消す */
    border: none;
}
/* リンクの状態ごとにライン色を指定 */
.button:visited {
    background-color: #ddd;
}
.button:hover {
    background-color: #3cc6f5;
}
.button:active {
    background-color: #f00;
}

　HTML の適用例。

<!-- リンク -->
<a class="button" href="#top">ページの先頭へ戻る</a>
<!-- submit ボタン -->
<button class="button" type="submit">検索</button>

　<a>タグに適用した場合は、IE6 以下でもオンマウス時のライン色変更に対応しています。
ページの先頭へ戻る

　<button>タグに適用した場合は、FireFox や IE7 以上などのモダンブラウザが対応しています。

　IE6 以下で<button>タグのオンマウスでライン色を変更したい場合は、Wii Buttons のように CSS Expression を利用して、JavaScript を使うしかなさそうです。

　とはいえ、さすがに IE6 のシェアは落ち込んできたので、無理に対応させる必要はもうないでしょう。

Supported by APAAPI
Wii本体 (シロ) Wiiリモコンプラス2個、Wiiスポーツリゾート同梱
メディア:Video Game
販売価格:￥ 18,498 （参考価格: ￥ 20,000）
発売元:任天堂
発売日:2011年06月23日
在庫状況:在庫あり
Amazon.co.jp に投稿されたレビューを読む
前の記事:
セキュリティを強化
次の記事:
ECS4で提供開始

カテゴリー

サイト内検索

おすすめアイテム

ページの先頭へ戻る