[CSS]もうbutton要素で困らない！ブラウザごとで異なるスタイルを望み通りにするためのノウハウのまとめ

Post on:2018年5月16日

ボタンを実装するHTML

HTMLにはさまざまなボタンがあります。

<button>Button</button>
<input type="button" value="Button">

1 2	<button>Button</button> <input type="button" value="Button">

上記に加え、良いか悪いかは別にして、見た目をボタンのようにスタイルしたテキストリンクを使用する人もいるかもしれません。

<a href="#0" class="button">Button</a>

1	<a href="#0" class="button">Button</a>

ここでの課題は、これらすべての要素の見た目とレイアウトをまったく同じにすることです。それにはいくつかの方法があります。

ボタンを正しく実装する

驚くべきことに、制作者がボタンを実装するためにdiv要素を使用している、と頻繁に耳にします。確かに、HTMLはスタイルフリーで、手軽に利用でき、必要に応じて実装することができます。
Andy Bell氏は、ボタンを実装する際にbutton要素が優れている理由を説明しています。

<button>のスタイルはイライラの原因ですか？しかしそれは、JavaScriptを使用して<div>や<a href"#">で実装すべきであることを意味するものではありません。
<button>で実装すると、キーボードのイベントを取得できます。また、要素を正しくアナウンスするため、スクリーンリーダーのユーザーを助けます。

Use Elements Appropriately

button要素で実装されたボタンの美しく、洗練されたスタイルを見てみましょう。

See the Pen Button Pal — some basic button styles by Andy Bell (@hankchizljaw) on CodePen.

ボタンのスタイル

buttonは面白い要素です。ブラウザごとに異なるデフォルトのスタイルを持っているため、あなたが望む見た目にするためには作業を必要とします。

ボタンのスタイル

buttonの特徴を見てみましょう。

スタイルが何もなければ、ただの小さなボタンです。ネイティブの状態では、border/border-radius/box-shadowが適用されています。
font-sizeを適用するだけで、デフォルトのスタイルは損なわれます。この時のスタイルはborderがありますが、鋭角になり、背景がグラデーションです。またbox-shadowはなくなります。
「-webkit-appearance: button;」の状態です。
ボタンは独自のフォントファミリーを持っているため、意図せずに継承はしないことです。

Chromeのユーザーエージェントのスタイルシートは下記のとおりです。

Chromeのユーザーエージェント

Firefoxのビヘイビアは少し異なります。
「border: 0;」を指定すると、borderが削除されるだけでなく、背景も削除されます。

Firefoxのビヘイビア

ここで大切なのは、buttonはブラウザごとにデフォルトのスタイルが異なるということです。さまざまな要素を同じに見えるようにスタイルを設定したいと考えている人々に対して共感を感じます。

Normalizeでも大丈夫

normalize.cssを使用するのは、良い解決策の一つです。
参考: normalize.css 8.0.0がリリース！古いブラウザはサポート対象外になり、大幅に軽量化

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**

* 1. Change the font styles in all browsers.

* 2. Remove the margin in Firefox and Safari.

button,

input,

optgroup,

select,

textarea {

font-family: inherit; /* 1 */

font-size: 100%; /* 1 */

line-height: 1.15; /* 1 */

margin: 0; /* 2 */

}

/**

* Show the overflow in IE.

* 1. Show the overflow in Edge.

button,

input { /* 1 */

overflow: visible;

}

/**

* Remove the inheritance of text transform in Edge, Firefox, and IE.

* 1. Remove the inheritance of text transform in Firefox.

button,

select { /* 1 */

text-transform: none;

}

/**

* Correct the inability to style clickable types in iOS and Safari.

button,

[type="button"],

[type="reset"],

[type="submit"] {

-webkit-appearance: button;

}

私は以前、フォームをコントロールするCSS「WTF, forms?」のスタイルで、buttonがサポートされていないことに驚きました。フォームの要素をスタイルすることはさらに悪名高く、難しいものです。

ボタンのそれぞれのスタイルをテスト

これに対する答えは基本的にCSSのブロックであると思います。下記はさきほどと同様にAndy Bell氏が提供するもので、buttonのスタイルを必要に応じてスタイルし、あなたが望む見た目にできます。

それぞれのスタイルのオン/オフを切り替え、各ブラウザで確認してみてください。

See the Pen Consistent button styles by Chris Coyier (@chriscoyier) on CodePen.

ボタンのアクセシビリティ

最後に最大のポイントです。buttonの機能とアクセシビリティを提供するために、ネイティブの要素を正しく使用します。

MDNによる記事からの引用です。

ボタンの役割にリンクをマークアップするときは注意してください。ボタンはSpaceキーでトリガーされることが予想され、リンクはEnterキーでトリガーされることが予想されます。
言い換えれば、リンクをボタンのように動作させる場合、role="button"を追加するだけでは不十分です。ネイティブのボタンと一貫性を持たせるためには、Spaceキーにキーイベントのハンドラを追加する必要があります。

When To Use The Button Element

<button>は既にボタンなのでrole="button"は必要ありませんが、他の要素をボタンのようにする場合は、その機能を模倣するための作業が増えます。

さらに、:hoverや:focusのスタイルも忘れないでください！
デフォルト状態のスタイルで悩むくらいであれば、これは難しいはずはありません。間違いなく必要なことです。

button:hover,
button:focus {
    background: #0053ba;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}