今日は、フォームにつきもののボタンについて考えてみます。
私たちがボタンに求めるモノって、何でしょう。
- データを送信（submit）する
- どのブラウザでも同じように見える
-
使い回しが聞く
- ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル
-
上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない
-
ボタンの大きさ＝クリックできるエリアの大きさ
- 画像がdiableされていても使用可
- CSSがdisableされていても使用可
- ボタンのように見えて実はただのリンクの時のもある
これらの要求を解決してくれる方法が複数出てきているので、まとめてみたいと思います。
共通する鍵は、inputタグの代わりに、buttonタグを使用している点です。
1．今までのようにinputを使用
<input type="submit" value="Submit" />
2．buttonタグを使ってみる
<button type="submit">Submit</button>
この二つの方法は、まったく同じ様にデータを送信して、さらにタブインデックスやアクセスキーもアサインできるし、状況に応じてdisableにすることもできます。 見た目の違いといえば、1の方法だとSafariでデフォルトでつくアクアなデザインが、2ではつかずにFirefoxのような、面白みのないグレーのボタンになること。実はこれが、素敵なデザインのボタンを作るうえで重要な鍵なんです。input type="submit"を使用すると、Safariではアクアなあのボタンイメージを強制されてしまって、例えば
<div class="submitBtn"><input type="submit" value="Submit" /></div>などとしてsubmitBtnに素敵なスタイルを施してあげても、アクアなボタンが重なってきて邪魔されます。でも、button要素なら大丈夫。Safariでもアクアなボタンは出てきませんから、ほかのブラウザと同じようにスタイルしてあげることができます。
もうひとつ重要な鍵は、button要素では中にほかのHTML要素を入れてあげられることです。
たとえば、
<button type="submit"><img alt="print.png" src="/files/print.png" width="16" height="16" />プリント</button>
などとアイコンを入れたりというのも、これで可能になるわけです（全くスタイルしてない状態なのでずれてますが、ご勘弁ください）。
そしてもちろん、CSSや画像がアクティブになっていなくても、buttonタグの行動は変わりません。
この特性を応用しているのが、下記の二つのサンプルです。それぞれ画像入りでわかりやすいサンプルを紹介してくれているので、私のほうは手を抜いて、まとめだけにします。
1. 基本編（Particletree）
ボタン自体はシンプルにbackground-colorとborderのみを使い、ボタンアクションの内容に応じて小さなアイコンを乗っける方法です。上のほうに、前述したbutton要素の特性も説明してあります。実際にデータを送信するためのボタンと、リセットなどデータを送信する必要のない場合のリンクと、どちらも同じような見た目にするために、buttonタグとaタグを同様にスタイルしています。
さらにアイコンを挿入することで、Web Applicationで複雑になりがちなフォームアクションを、感覚的にわかりやすく表現することができるのです。
2．応用編
上記を応用して、sliding doorのテクニックでbackground-imageを使用できるようにしたのがこの二つの例。
Alex Griffioen - ここではさらに、ボタンを押したときのあのポチッという感覚を再現するために、:activeを使用しています。
Filament Group - こちらではマウスオーバーしたときに画像が変わるように、:hoverが使用されています。
ちなみに、Alexの例ではaタグが使用されているのですが、もちろんbuttonに置き換えればデータを送信するわけです。ただ、残念ながらIEでは:active、:hoverなどのダイナミック疑似クラスはaタグ以外では有効ではありませんので、ポチッと感やマウスオーバーは犠牲にしなければなりません。
いかがでしたか？お試しください！