[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ページに飛ぶだけ……ぐへへ…..(しょぼい)
それでは!!