HTML|buttonの使い方【初心者に向けて基本から解説!】 | WEBCAMP NAVI
【5月の受講枠も残りわずか】

HTML|buttonの使い方【初心者に向けて基本から解説!】

「Webページの中にボタンを作りたい!」
「buttonタグを使ってみたけれど、なかなかうまく使いこなすことができない!」
そんな風にお困りではないですか?

HTMLのbuttonタグを使えば、Webページ内に簡単にボタンを作成することができます。
しかしながら、inputタグとの違いが分かりづらかったり、思ったように動かなかったりと難しい一面も持っています。

この記事では、基本的なbuttonタグの使い方や指定できる属性を確認しながら一人でもbuttonタグを使いこなせるように解説していきます!

  • buttonタグが持つ役割
  • 同じような役割を持つタグとの使い分け方
  • buttonタグに指定できる属性
  • ボタンのデザインの変更方法

について知りたい方は、このまま読み進めてください!

エンジニアメンター

この記事はDMM WEBCAMPのエンジニアメンターが監修しています。 HTML,CSS,Ruby,Python,Javaの技術に長けたメンターが記事内容を確認しているため、安心して読み進めていただけます。

buttonタグが持つ役割は?

buttonタグには、webページ上にボタンを作る役割があります。
他のページに飛ばすためのボタンから、申し込みや問い合わせのフォームを送信するボタンまで幅広くボタンを作ることができます。

しかしながら、基本的にはブラウザからサーバーに送るためのボタンだと考えてください。

buttonタグを使うだけで、簡単にボタンを作ることができるのが特徴です。

実はwebページ上にボタンを作るためには、buttonタグを合わせて3つの方法があります。
buttonタグの基本的な使い方を知った上で、特徴と使い分けについてみていくことにしましょう。

  • aタグを使って作るボタン
  • buttonタグを使って作るボタン
  • inputタグを使って作るボタン


HTML・CSS」をマスターして、ホームページWEBアプリを作成できるよう になりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験者!
スキマ時間で効率よくスキルアップしたい方におすすめ!
基礎から確実に身に付く充実のカリキュラム!

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

buttonタグを使いこなせるようになろう!

では早速、buttonタグの使い方をみていくことにしましょう。
使い方は簡単で、ボタンを作りたいところにこのコードを挿入するだけです。

HTML
<button type="属性" name="名前" value="値">
		<font>ボタンに入れたい文字</font>
    </button>

実際に、表示されるのは以下の通りです。

指定できる属性

buttonタグに指定できる属性を解説していきます。
それぞれどんな役割を持っているのかを理解しておくことにしましょう。

1. type

type属性はボタンの種類を指定する際に使用します。
type属性の値には、以下の3種類のいずれかを指定することができます。 初期値はtype=”submit”です。

  • type=”submit” :フォーム入力内容を送信するサブミットボタン(初期値)
  • type=”reset” :フォーム入力内容をリセットするリセットボタン
  • type=”button” :何もしない汎用的な押しボタン

2. form

form属性は、どのフォームと関連付けるかを指定する際に使用します。

<button>は初期値では直近の親要素となる<form>と関連付けられます。
しかしながら、<form>のid属性の値と<button>のform属性の値を一致させることで、 ボタンを特定のフォームと関連付けることができます。

ボタンを任意の場所に配置できるので、ウェブアプリケーションなどを制作する際には便利かもしれません。

3. name

name属性は、<button>に名前を付ける際に使用します。
スクリプトで操作する際などに必要となる<button>のコントロール名です。

4. disabled

disabled属性は、ボタンを無効にする際に使用します。
disabled属性が指定されていると、ボタンを押せなくなりデータは送信されません。

5. autofocus(HTML5)

autofocus属性は、ボタンへの自動フォーカスを指定する際に使用します。

6.value

value属性は、<button>自身の値を指定する際に使用します。
例えば、<input>などの入力部品が無くても、 <button>の値を送信して何らかのフラグにすることができます。

7. formtarget(submitのみ)(HTML5)

formtarget属性(フォーム送信するターゲット先)は、 <form>の属性でも同様の指定をすることができます。
しかしながら、<button>側でこれらの属性を指定すると、<form>の指定より優先されます。

その他、formaction属性(送信先URL)、formenctype属性(送信するデータの形式)、formmethod属性(送信方法)

formnovalidate属性がありますが、これらはtype=”submit”の場合にのみ指定することができます。

同じような役割のタグとの使い分け方

webページ上にボタンを作るときに使う、3種類の方法についてみていきましょう。
違いと特徴を知ることによって、場合に適した方法を使うことができるようになります。

  • aタグを使ってボタンを作る方法
  • inputタグを使ってボタンを作る方法
  • buttonタグを使ってボタンを作る方法

aタグ・inputタグとbuttonタグの違いをそれぞれ見ていきます。

aタグとbuttonタグでできるボタンの違い

aタグとbuttonタグでは作ることのできるボタンの種類がそもそも異なっています。

aタグを使う場合は、リンクの遷移など汎用ボタンを作るときです。
汎用ボタンとは、ボタンがクリックされた時の動作が決まっていないボタンのことを指します。
そもそもaタグのaは「Anchor(アンカー)」の略で、リンクの出発点や到達点を指定するという意味を持っています。

そのまま使えばリンクしかないaタグにCSSで装飾をつけることで、ボタンとして表示させることができます。

一方でbuttonタグは、ブラウザからサーバーにデータを送信する役割を持っています。

webページ上ではボタンとして、同じように扱われがちですが、役割が異なることを覚えておいてください。

aタグについてもっと知りたい方はこちらの記事を読んでみてください。
実際のコードの書き方までを知ることができます。

【HTML初心者入門】aタグとは何?使い方も解説!

inputタグとbuttonタグでできるボタンの違い

inputタグとbuttonタグの違いは「閉じタグ」があるかどうかです。

buttonタグは<button></button>とセットで使うのに対して、inputタグは<input type=”button”>のように閉じタグなしで使います。
そのため、buttonタグでは擬似要素を使うことが可能ですが、inputタグでは使うことができません。

それによってデザイン性の幅が大きく異なってくることがこの2つの違いです。

擬似要素とは

HTMLではなく、CSS上で要素のようなものを作ることができます。
この”要素のようなもの”を擬似要素と言います。

HTMLのタグ名やクラス名・id名の後に「::before」や「::after」をつけたものに対して、contentで文字や記号を指定することで使うことができます。

実際にコードで見てみましょう。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>ボタン作成について</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<p>こんにちは</p>
</body>
</html>
CSS
p:before{
	content:'WEBCAMP NAVIをご覧の皆さん';
	color: blue;
}

これによって、HTML上にはなかった文字を足すことができます。

擬似要素

ぞれぞれのボタンの持つ役割や違いを知った上で上手く使い分けるようにしましょう。


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験からのスタート!
手厚いサポート付きで質問し放題!
✔未経験者のために開発された独自のカリキュラムを用意!

経済産業省認定の圧倒的カリキュラム
受講内容の詳細はこちら

ボタンのデザインを変更するには?

基本の使い方がわかったところで、デザインを変更していく方法を確認してみましょう。
基本的には、CSSで背景色や文字色を変えていくため、CSSの基本がわかっていればデザインの変更は簡単です。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>ボタン作成について</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
	<button type="submit" class="button1" value="b1">
		<font>送信</font>
    </button>
</body>
</html>

この記事では5つのデザイン変更について解説するので、知りたいところから確認することをお勧めします。

  1. 背景色の変更
  2. 余白の変更
  3. 枠線を消す
  4. オンマウス時だけ色を変更する
  5. 角を丸くする

❶背景色の変更

分かりやすいように文字色も変更しています。
background-colorを指定することで、背景色の変更が可能です。

CSS
.button1{
    background-color: #174a5c;
    color:white;
}

❷余白の変更

paddingを指定することで、ボタン内部に余白を設けることができます。

CSS
.button1{
    padding:30px;
}

paddinngやmarginの指定方法について不安がある方は、この記事を読んでみてください。
paddingとmarginの違いから理解することができます。

CSS【paddingとmarginの使い分け】余白の作り方を徹底解説!

❸枠線を消す

デフォルトでは枠線が引かれているので、それをなくす場合border-styleをnoneに指定します。
分かりやすくするために、背景色を変更しています。

CSS
.button1{
    border-style: none;
    background-color: #174a5c;
    color: white;
}

❹オンマウス時だけ色を変更する

カーソルが上にある場合のみ色を変更する方法です。
この場合は、cssに擬似クラス「hover」を追加します。

CSS
.button1{
    background-color: #174a5c;
    color: white;
}
.button1:hover{
    background-color: orange;
    color:white;
}

通常時

オンマウス時

❺角を丸くする

角を丸くするときのコードは難しいので、そのままコピペで使うことをお勧めします。

CSS
.button1{
    background-color: #174a5c;
    color: white;
    border-style: none;
    /* 角丸の指定 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

主なデザインの変更点については以上ですが、自分の作りたいイメージがある方はどんどん検索して試してみましょう。
ボタンだけではなく、webページ全体のCSSでの装飾についてを学ぶことができます。

まとめ

webページにボタンを作成する場合に使うbuttonタグについて解説してきました。
ボタンを作成する場合にはaタグやinputタグを用いることもできますが、時と場合に合わせて使うものを変更するようにしてください。

デザインについてもご紹介しているので、イメージに合わせて作り変えてみてください!