[HTML5]buttonタグにリンク属性を付ける方法
公開：2019.10.09
更新：2020.05.17
こんにちは、らいどらです。
先日、プロフィールウィジェットにつけるボタンを制作していたのですが、ふとbuttonタグにリンク属性は付けられるのかが、気になりました。
href？src？どちらも違うようです…..。
どうして気になるかというと、普通ならbuttonタグにリンクを付ける場合は<div>とかで囲ってから<a>タグを別で出力してpositionとかz-indexプロパティでいろいろやる訳ですが、ぶっちゃけかなり面倒ですよね……..。
更に:hoverでマウスオーバーエフェクトを実装しようと思っても、aタグに載せた時にbuttonタグを変化させるみたいな、ちょっと複雑なコードになってしまいます。
つまり、いろいろと面倒です。
面倒なら………調べよう！！という事で早速調べていきます。
目次
リンク属性はあるのか？
結果としては……..リンク属性はありました！！以下がソースコードです。
その名もonclick=～～～～～～～～～？？？？
長い！！
<button class="storybtn" onclick="location.href='https://kiborineko.com/story/' ">この入れ子構造を見たら、有名じゃないのも少し納得できますね……。
しかし、きちんと動作はするようなので、これを覚えれば負担が減りますね！！
このonclick属性で一番難しいのはコンマの位置だと思いますので、そこを解説していきます！！
二種類のクォーテーションを使う理由
HTMLの属性値は普通「” “」で囲みますよね。 では何故途中に、「’ ‘」を挟むのでしょうか？
分かりやすいようにイラスト化してみました。
この答えとしては、「プログラムに読み違えられない為」ということになります。
え？という人は、このソースコードを全て「” “」に置き換えてみてください。
すると「onclick=”location.href=
“https://kiborineko.com/story/” “」
となりますよね。この場合、プログラムが読むとこうなります。
「onclick=“location.href=”https://kiborineko.com/
story/“（空白） “」
こうなります。さすがにこうなったら、出力がぐちゃぐちゃになることは明白ですよね？
結果的に一つのコードに、シングルクォーテーション「’」とダブルクォーテーション「”」を使うことになるという事ですね。
まとめ
今回は以上になります。確か、buttonタグ自体がHTML5からの導入だった気がするので、「onclick属性」役に立ちそうですね！！
ちなみにサイドバーに今回の知識で作った「プロフィールへ」ボタンがあるので気になる方は押してみてください！なんも怪しいことはありません….Storyページに飛ぶだけ……ぐへへ…..（しょぼい）
それでは！！
