移動するリンク、操作するボタン：aとbuttonを使い分けよう

角が丸くて色の付いた四角い部品。押すと別のページへ移動することも、今の画面の表示が変わることもあるよね。HTMLでは、見た目よりも「何をするか」でリンクとボタンを選ぼう。

この記事の目標は、移動のためのaと、操作のためのbuttonを見分けること。ブラウザだけで下の作例を試せる。別のサイトへ送信する操作はないよ。

移動先があるなら、まずリンクを考える

<a href="#details">詳しい説明へ</a>

aにhrefで移動先を書くと、リンクになる。上の例は、同じページ内のid="details"という場所を指している。別のページのURLを指定することもできるよ。

リンクなら、利用者は別のタブで開く、移動先をコピーするなど、ブラウザが用意する操作も使える。画面を移動させたいだけなのに、buttonへJavaScriptの処理を付ける前に、普通のリンクで表せないか考えてみよう。

表示を変える操作にはbutton

<button type="button">補足を表示する</button>

今の画面で補足を開く、処理を開始するなどの操作には、buttonが候補になる。type="button"は、ここではフォームを送信するボタンではないことを示しているよ。

このHTMLだけでは補足を開く処理はまだ付いていない。下の作例では、JavaScriptで表示を切り替えている。リンクに見せるか、四角いボタンに見せるかは、CSSで整える別の話だよ。

作例で、二つの結果を比べよう

1. 「詳しい説明へ」のリンクを押す。作例内の説明へ移動し、URLのフラグメントが#detailsになる。
2. 説明には戻るリンクがある。押すと作例の先頭へ戻れる。
3. 「補足を表示する」のボタンを押す。近くに短い補足が現れるが、別のページへは移動しない。
4. 同じボタンをもう一度押すと補足が隠れる。

作例は記事とは別の小さなページなので、変わるのは作例側のURLだよ。編集部ではChromiumで、リンクがフラグメントを変えること、ボタンがURLを変えずに補足を切り替えることを確認した。「最初から試す」で先頭・補足なしへ戻せる。

キーボードでも試そう

Tabキーでリンクやボタンへ移動できるかを見る。リンクは通常Enterで移動でき、buttonはEnterやスペースで操作できる。標準のHTML部品を使うと、こうした基本の操作を利用できるよ。

文字を置いたdivにクリック処理を足しただけでは、標準のボタンと同じ操作がそろうとは限らない。まず適切な要素を選び、必要な見た目を付けよう。

何でもhrefを空にして使わない

href="#"を付けて、JavaScriptで移動を止めながらボタンとして使うと、元の移動と操作が混ざりやすい。行いたいことが表示の切り替えなら、最初からbuttonで表せるか考えてみてね。

リンクの文字も「こちら」だけでなく、「料金を確認する」「持ち物の説明へ」など、移動先が想像できる言葉にしよう。フォームの送信ボタンとの違いは、buttonのtypeの作例でさらに確認できるよ。