Button(ボタン)

ボタンのようなUIの中の単一の部品の事を Component(コンポーネント = 要素) と呼びます。今回はボタン要素の作り方を見ていきます。

HTML + JavaScript(以降JS)での実装例

まずはごく標準的なボタンから見ていきたいと思います。以下のサンプルの "Run Pen" を押してみてください。

そうすると↑の画面にこのようなボタンが現れます。

これは任意のHTML/CSS/JSを実行できる CodePen というサービスを利用しています。実際に動くボタンが表示されているので、表示されたボタンをクリックしてみます。パッと押しても何も置きないのですが、ブラウザの開発者ツール(Chromeの場合は command + option + i キーを押すと表示される)のコンソール(Console)タブを見てみると、こういったログが出力されています。

Webページ(HTML + CSS + JS)の開発では通常のバックエンド開発のようなターミナル(Windowsでいうコマンドプロンプト)を使う他に、ブラウザに組み込まれたコンソールを使う。という事を覚えておいてください。

開発者ツールの使い方が分からない方は、コチラのページを参考にしてみてください。

このサンプルのHTMLは以下のようになっています。

<button id="btn">Click me!</button>

これはHTMLで定義されたButton(ボタン)タグを利用して、画面にボタンを表示しています。タグのid属性(attribute)に "btn" が定義されています。id属性は単一のページ内で要素を一意(unique)に表す値です。重複する事はHTMLの仕様で認められていません。このHTMLタグに対して、以下のような JavaScript を実行しています。

// 1. id="btn"となってる要素を取得する。
const el = document.querySelector("#btn")

// 2. 見つかった要素の "click" イベントに対してリスナー(任意の処理)を登録。
el.addEventListener("click", (e) => {
  // 3. リスナーが呼び出されるとブラウザの開発者コンソールにログ表示。
  console.log("clicked!", e);
})

まずid属性の値を元に、単一の要素を取得しています。(document.querySelector の部分)
見つかった要素に対して、EventListener( = 任意のイベント(Event)を待ち受ける処理)を追加しています。
今回はボタンのクリックに反応させたいので、第一引数にイベント名("click")、第二引数に呼び出される関数(匿名関数 = 名前を持たない関数)を渡すことで、要素にEventListenerを追加します。関数の中では console.log を呼び出しているので、ボタンをクリックし、リスナーが呼び出されるとブラウザの開発者コンソールにログが出力されます。

以上がHTML + JavaScriptでクリックできるボタンを作る方法の一例となります。

ボタンのスタイル(見た目)について

上記のサンプルのように <button>text</button> とHTMLで記述し、何もCSSを書かなかった場合はブラウザ毎にデフォルトのスタイルが適用されます。(同一ブラウザでもversion毎に違う場合があります)

ですが、昨今のWeb制作ではこのような標準のスタイルのボタンを見ることは多くありません(官公庁のサイト・業務システム等を除き)。

代わりに、こういったデザインガイドや、独自のデザインに基づいた実装が行われる事が多いです。

一部のデザインガイドにはリファレンスとなる実装(実装先行で、デザインガイドが後付けで作られることも多い)が付いています。そういったものの場合は、それぞれ所定の方法(例: CSSファイルをページで読み込んだうえで、所定のclass属性を対象に付与する)で、手軽にデザインが反映されたものを利用することができます。

今回はこういったライブラリを利用する方法ではなく、デザインを元にCSSを使って自身で実装してく方法を説明していこうと思います。

HTML + JS + CSSを使った実装例

先程の実装にCSSを加えたものがコチラとなります。見た目はBootstrapのものを参考にしています。

CSSを適切に指定すればこのように好きなデザインでボタンを作ることができます。HTMLとJSのコードは前回のものと同じなのでCSSだけ見てみましょう。

.button {
  padding: 6px 12px;
  border: none;
  background-color: #0170FF;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

今回はボタンのclass属性の値("button")を元に、クラス名でセレクタを指定してスタイルを適用しています。上から順に説明していきます。

padding = 要素の内側にスペース(余白)を作るのに指定する。今回は略記法を使って、上下6px、左右12pxと指定しました。
border: none; = Chromeの標準ではborderがbuttonに指定されてるので、noneを指定することで隠しています。
background-color = 背景色を指定した色(#0170FF = 水色っぽいやつ)としています。
color = 文字色を指定した色(white = 白) としています。先程の background-color は色コードで指定しましたが、こちらは色名で指定しています。
font-size = 文字サイズを 16px としています。
border-radius = ボタンの角の丸めを 4px と指定しています。
cursor = pointer; = 要素にホバーした時のカーソル表示のタイプを指定しています。

一見複雑なように見えますが、このように一個ずつ見ていくとシンプルなスタイル指定の組み合わせであることが分かるかと思います。

ここまでで基本的なスタイルは実装できましたが、ここで改めてBootstrapのドキュメントのボタンのサンプルを見てみましょう。

よく見るとボタンのホバー(カーソルが重なった)時に、ボタンの色(背景色)が変わっています。この動きの事をインタラクションと呼びます。みなさんが良く使っているWebサイトでもこういった動きが付いていることが多いと思います。

例えばボタン(押せる領域)の場合は、背景色・文字色が変わったり、カーソル(矢印カーソル→指カーソル)が変更する。といった動きが多いです。このようにユーザが使いやすいように(自然と操作できる)ようにUIを考える事をUIデザインと呼びます。UIデザインの用語では (知覚的)アフォーダンスと呼ばれる概念です。

この実装自体はそんなに難しくありません。興味があればCodePenや手元の環境で試してみてください。

.button {
  /* ...中略(その他のプロパティは前回のサンプルと同じです) */
  /* 基準となる青色 */
  background-color: #007bff;
  /* "background-color" の変化にアニメーション(トランジションと呼ぶ)を付ける */
  transition: background-color .15s ease-in-out;
}

/* ".button" クラスの要素のhover時のセレクタ */
.button:hover {
  /* 背景色を指定の色にする。(ちょっと濃い青) */
  background-color: #0069d9;
}

transition = 変化させるプロパティ、所要時間、イージング(変化の曲線)の順で指定する。例では "background-color" を .15s(= 0.15秒) かけて ease-in-out の変化量(イージング)で変更する という意味となります。
:hover = 疑似クラス と呼ばれます。対象の要素(クラス指定などの他のセレクタ)にhover(カーソルが乗っかった)場合に適用されます。例では .buttonにホバーしたら という意味になります。

次のページではちょっと複雑で、頻繁に使うことになる Modal(モーダル)要素 の事例を見ていきます。

おまけ

用語集

セレクタ = CSSでスタイルを指定する対象を表す文字列。クラス名(例: .hoge)による指定の他に、タグ名(例: a)、タグの属性(例: [attr="value"])による指定をすることも可能。

参考資料

イージングの基本

前へ実例から作り方を学ぶ(基礎)次へModal(モーダル)

最終更新 4 年前