ここから本文です

素朴な疑問ですが、ボタンを作る際あたなの場合、 buttonタグとaタグどちらで作る...

アバター

ID非公開さん

2019/4/513:58:43

素朴な疑問ですが、ボタンを作る際あたなの場合、
buttonタグとaタグどちらで作る事が多いですか?


【HTML】

<div class="button1">
<a href="#">aタグ</a>
</div>

<div class="button2">
<button type="button">buttonタグ</button>
</div>


【CSS】

.button1 a{
background-color: #FF5A5F;
border-radius: 4px;
display: inline-block;
padding: 13px 0;
width: 300px;
text-align: center;
text-decoration: none;
color: white;
}
.button2 button{
background-color: #FF5A5F;
border-radius: 4px;
padding: 13px 0;
width: 300px;
color: white;
outline: 0;
font-size: 16px;
}
.button2 button:hover{
cursor: pointer;
}


↑例えばこのようにほぼ見た目同じにするには、それぞれ指定プロパティ数もほぼ同じな為、
労力としては互角とも思えます。
ですが buttonタグはインライン要素でもあり、ブロックレベル要素でもある事から、
レスポンシブの際、少々ややこしくなったりします。

故に、私の場合はaタグで作る場合が多いのですが、
どちら多いでしょうか?また、どちらが一般的でしょうか?
やはりボタンなら認識させる為にもbuttonタグを使うべきでしょうか?

上記のようなボタンの使い方ではなく、

<button type="button"><a href="#">ボタン</a></button>

このように、aタグをbuttonタグで囲うやり方が一般的なのでしょうか?
この場合、最初の例2パターンより少々面倒になると思います。
ですが今思うと、ボタンを機能させるのなら、当然aタグなどのリンクタグは必要ですかね。

セオリー的なものを知りたいです。

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
53
回答数:
2

違反報告

ベストアンサーに選ばれた回答

ssr********さん

編集あり2019/4/521:18:29

ボタンは、画像と同じく高さや横幅を保持するインラインブロックに該当するため、インライン要素なのであってブロックレベル要素ではありません。
それと、<input type="button">によるボタン制作方法もあります。

基本的にボタンはJSと組み合わせることの方が多いですね。
例えばこんな感じです。

<input type="button" value="戻る" onclick="history.back()" />
<input type="button" value="進む" onclick="history.forward()" />

戻るはともかく、進むはあまり使いませんけどね。
それからリロードボタンとして使う場合もありますね。

<input type="button" value="ページ再読み込み" onclick="location.reload(true)" />

参考例としては、こんな感じでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 200px;
height: 200px;
transition: .5s;
background: red;
}
</style>
<script>
//divの見た目と色を変更する
function clk() {
const cg = document.getElementById("chg");
cg.style.background = "blue";
cg.style.borderRadius = "50%";
}
</script>
</head>
<body>
<div id="chg" onclick="clk()"></div>
<input type="button" value="ページ再読み込み" onclick="location.reload(true)" />
</body>
</html>

リンクを作るだけであれば、それこそボタンにこだわる必要もないかと。
それに、<button type="button"><a href=""></a></button>では、ボタン内部に文字が挿入されるだけでリンクにはなりません。
<button>と</button>の中に入るのは、<input>で言うところのvalueです。
画像やテキスト等を挿入してボタンをレイアウトできます。
ボタンでリンクを行う場合、Javascriptを用います。
<button type="button" onclick="window.open('URL')">リンク</button>

  • アバター

    質問者

    ID非公開さん

    2019/4/521:19:52

    buttonタグはブロックレベル要素ではありませんね。
    ですが、イメージとして「インラインブロック要素」(言葉は無いにせよ)的な感じで解釈していますが、良いのでしょうか?

    参考のコードを実際に見てみました。
    なるほど、こう言う事によく使うのですね!
    JavaScriptはまだ学習してないので、まだわかりませんが、
    イメージが湧きました。

    それと、ボタンでリンクを行う場合はJavascriptで使用するのですね!
    てっきりbuttonタグでaタグを囲うのかと思っていました。

  • その他の返信(3件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

ベストアンサー以外の回答

1〜1件/1件中

leg********さん

2019/4/522:24:08

あまりbutton使わなくなったなぁ。
なんか微妙にずれるし、ブラウザ依存強すぎてスマホなんかも見え方違うし。
buttonの設定リセットして使うくらいなら、最初から使わないやーいということで

通常リンク a
submit div +JQUERY

を使ってます。

複数の入力項目のあるフォームなど、次へ進むのにenterポンポン押してたら勝手に送信されちゃうこともたまにあることで。
そのこと防止も含め、jquery使ってsubmit送信しています。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる