リンクをリンクとして使わない仕様

本来，青色フォントに下線の施されたリンクタグって，「ページ遷移」というイメージがあります。

共通認識ともいえる，このイメージからかけ離れたコードを書いてしまうことは，利用者（そして開発者も）の常識を裏切ることにもなるので，できれば避けたいデザインですが，声とコダワリの強いユーザがいたりする場合，以下のような仕様：

• リンクタグ <a href=""></a>を押したとき，ページ遷移させない
• リンクタグ <a href=""></a>を押すことで，何がしかの JavaScript 処理を呼ぶ

を実装せざるを得ないケースもあります。

実装そのものは単純で，一つの例としては，以下のようなコードがあるかと思います：

<ahref="javascript:void(0)"id="btn_edit">リンク</a>

$('#btn_edit').click(function(){// 何がしかの処理alert('Hello Laravel!');});

BootStrap で便利なクラスを発見

そうは言っても，やっぱり，コード上では <a href=""></a>を使いたくありません。

ページ遷移を伴わず，特定の JavaScript 処理をコールするという役割からは，<button></button>タグによる実装が，シンプルでいて，かつ，望ましいと思いました。

見栄えではユーザの要求にこたえつつも，コードは「常識通り」のパターンを保つという，無理難題にも思えるチャレンジですが，BootStrap が瞬殺解決してくれました。

BootStrap 公式ドキュメント

<button></button>タグに，btn-linkクラスを適用することで，リンクスタイルに変更できます。

これだと href="javascript:void(0)みたいな，オマジナイを書く必要がなくなって，スッキリしますし，何より，<button></button>タグを使ったほうが，機能性と合致しているので，より「常識に近い」コードになります。

注意しておくべきポイント

<a href=""></a>タグを，<button></button>タグに変えることで，一点，注意事項を書いておくとすれば，レイアウトが若干，変わってしまう可能性があるということです。

• <a href=""></a>タグ　➡　<span></span>タグなどと同じ，いわゆる「普通の一行」の高さ
• <button></button>タグ　➡　<button></button>タグの高さ（「普通の一行」よりも大きい）

ちょっとでも，高さが変わってしまうことが厳しいようなシーン（例：<table></table>タグの中に置くことを意図していたら，<tr></tr>の高さが，変わってしまうこともあります）では，事前検討したほうが良いですね。

スゴいけどシンプルにできている BootStrap

ちなみに，btn-linkクラスは，<button></button>タグのみならず，<span></span>タグ，<div></div>タグに対しても，有効に働きます。

と言うか，どんなタグに対しても，外見が「リンク」に見えるよう，化粧してくれます。

// button がリンクに見える<buttonclass="btn btn-link">ボタン</button>// div も，リンクに見える<divclass="btn-link">ボタン</div>// spanも，リンクに見える<spanclass="btn-link">ボタン</span>

ブラウザの開発者ツールで，CSS ソースを見て，ナットク。

クラス名に btnという文字が含まれますが，何も（ボタンだけに特化した）特別なことはしていなくて，以下のような定義が書かれているだけなのですね。

.btn-link{font-weight:400;color:#3490dc;text-decoration:none;}

とは言え，ボタン機能は <button></button>タグを使って実装することが，一番，読みやすいコードに仕上がります。

柔軟に使える BootStrap だからこそ，機能性の実体に見合ったタグを選び，コードを書こうと思いました。