文字

[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://lhaidelabo.com/story/' ">

この入れ子構造を見たら、有名じゃないのも少し納得できますね……。

しかし、きちんと動作はするようなので、これを覚えれば負担が減りますね!!

このonclick属性で一番難しいのはコンマの位置だと思いますので、そこを解説していきます!!

二種類のクォーテーションを使う理由

HTMLの属性値は普通「” “」で囲みますよね。 では何故途中に、「’ ‘」を挟むのでしょうか?

分かりやすいようにイラスト化してみました。

この答えとしては、「プログラムに読み違えられない為」ということになります。

え?という人は、このソースコードを全て「” “」に置き換えてみてください。

すると「onclick=”location.href=
“https://lhaidelabo.com/story/” “」

となりますよね。この場合、プログラムが読むとこうなります。

「onclick=“location.href=”https://lhaidelabo.com/

story/“(空白) “

こうなります。さすがにこうなったら、出力がぐちゃぐちゃになることは明白ですよね?

結果的に一つのコードに、シングルクォーテーション「’」とダブルクォーテーション「”」を使うことになるという事ですね。

まとめ

今回は以上になります。確か、buttonタグ自体がHTML5からの導入だった気がするので、「onclick属性」役に立ちそうですね!!

ちなみにサイドバーに今回の知識で作った「プロフィールへ」ボタンがあるので気になる方は押してみてください!なんも怪しいことはありません….Storyページに飛ぶだけ……ぐへへ…..(しょぼい)

それでは!!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。