CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ

Post on:2024年4月9日

はじめに

ボタンは至る所に存在します！

ボタンをスタイルするには、CSSのさまざまなプロパティを使用して設定できます。たとえば、私はFlexboxレイアウトを好んで使用しています。この記事では、あまり知られていないけれど便利なCSSのスタイルを紹介します。

まずは、下記のHTMLを使用してボタンのスタイルを設定します。

<button type="submit" class="button">
  <img src="icon.svg" alt="">
  <span>Sign in</span>
</button>

</button>

スマホでボタンをタップした際の誤動作を防止

スマホでボタンをタップした際に、ページがズームされたことはありませんか？

これはボタンを連打してしまうと起きる現象です。この望ましくない誤動作は、touch-actionプロパティで取り除くことができます。

.button {
  touch-action: manipulation;
}

.button {

touch-action: manipulation;

}

manipulation値は、ダブルタップでズームするジェスチャが無効になります。パンやピンチズームなど他のジェスチャーには影響がありません。さらに、ブラウザが2回目のタップを待ってクリックイベントを遅延させる必要がなくなるという利点もあります。

一部の記事では、HTMLのmetaタグのuser-scalable=noでズームを無効にするという方法を提案していますが、これは絶対にしないでください。視覚的な障がいを持つユーザーに対してアクセシビリティの問題が発生します。

ボタンのテキストの意図しない選択

Webサイトの多くでは、重要なテキストリンクがボタンのように見えるようにスタイルされています。.buttonのような共有スタイルを使用するのが一般的です。たとえば、HTMLはこんな感じです。

<a class="button" href="/sign-in">Sign in</a>

1	<a class="button" href="/sign-in">Sign in</a>

ボタンを繰り返しタップすることによるもう一つの望ましくない誤動作は、テキストコンテンツが誤って選択されてハイライトされてしまうことです。この誤動作も無効にできます。

.button {
  user-select: none;
}

.button {

user-select: none;

}

user-selectプロパティを使用すると、内部テキストを選択不可能にすることができます。これはFirefoxではデフォルトのスタイルですが、他のブラウザではデフォルトではありません。ただし、これは慎重に使用してください。Safariで使用する場合は、-webkitプレフィックスが必要です。

ファイル選択のボタン

もう一つ、よく見落とされがちな隠れたボタンがあります。

<input type="file">

1	<input type="file">

ファイル選択には、シャドウDOMにボタンが含まれています。デフォルトの外観は、ブラウザやOSによって異なります。

上: Chrome for macOS、下: Safari for macOS

CSSは、このボタンも処理できます。

.button,
::file-selector-button {
  /* ボタンのスタイル */
}

.button,

::file-selector-button {

/* ボタンのスタイル */

}

::file-selector-buttonは、参照ボタンのスタイルを設定できるCSSの疑似要素です。すべてのモダンブラウザにサポートされています。

ボタンをフォーカス時の視覚的なアウトライン

アクセシビリティはすべての人にとって重要です。私はキーボードを操作してインタラクティブな要素をTabキーで操作するのを好みます。ただ、悲しいことにフォーカスされたボタンの周りにある「あの醜いボーダーを消してほしい」とクライアントから依頼されたことは数えきれません。

ボタンのフォーカス状態は、次の2つのテクニックで改善できます。

.button {
  /*
  // フォーカス時のアウトラインを削除
  &:focus {
    outline: none;
  }
  */
  &:focus-visible {
    outline: 2px solid magenta;
    outline-offset: 2px;
  }
}

.button {

// フォーカス時のアウトラインを削除

&:focus {

outline: none;

}

&:focus-visible {

outline: 2px solid magenta;

outline-offset: 2px;

}

デフォルトの:focus状態を削除する必要はないことに注意してください。

まずは、デフォルトの:focus疑似クラスを:focus-visibleに置き換えます。MDNにはこの2つについて長いセクションがあります。基本的に、これは今にして思えば、オリジナルはこうあるべきでした。

次に、outline-offsetを使用して、フォーカスリングとボタン自体の間にスペースを設定します。もしボタンに目立つボーダーがあれば、アウトラインはボーダーに対して同一平面上に配置され、二重ボーダーのように見えます。オフセットを加えることで、フォーカスの状態がより見やすくなります。

注意点としては、::file-selector-buttonはフォーカスを受けず、むしろ親の入力にフォーカスを受けるので、そこにスタイルを適用することです。

ボタンの論理サイズ

.button {
  inline-size: fit-content;
}

.button {

inline-size: fit-content;

}

上記のCSSでは、ボタンの幅は使用可能なスペースを占めますが、ボタンのmax-contentを超えることはありません。ただし、私はwidthではなく、inline-sizeを使用します。

widthは、私のスタイルシートでは禁止されているプロパティです。

禁止にしている理由には、CSSの論理プロパティが関係しています。MDNの記事をチェックしてみてください。

CSSの論理プロパティについて詳しくは、下記をご覧ください。

CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど

ボタンの実装に使用するデフォルトのスタイル

この記事で解説したボタンのCSSをまとめると、下記のようになります。

.button,
::file-selector-button {
  inline-size: fit-content;
  touch-action: manipulation;
  user-select: none;
}
* {
  &:focus-visible {
    outline: 2px solid magenta;
    outline-offset: 2px;
  }
}