記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【HTML】ボタンの作成方法+サンプルコード付き(初心者向け)

ボタンの作成方法を初心者の方向けに紹介。 ボタンの作成方法、必要なタグ、カスタマイズ方法がわかります、また コピペで使えるボタンを紹介していますので、ご自身のWEBサイトに適用することができます。全てサンプルコード付きなので実際に手を動かして学ぶことができます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「ボタンってどうやって作るの・・?」「ボタンに関する属性の意味って・・?」「コピペで簡単にボタンを作りたい・・?」 そのように悩んでいる初心者WEB製作者の方も多いのではないでしょうか?
ボタンはフォームの送信、ページ遷移などWEBの様々な場面で使用される重要な役割をになっています。
今回は、「bottonの基本知識」「bottonに必要な属性」「コピペで使える基本のボタンデザイン」を中心に解説していきます。

buttonタグ

buttonタグって?

フォームの送信、ページの遷移などWEBの様々な場面で使用され、 ユーザーにより多くボタンを押してもらう(クリック率を上げる)にはボタンの使い方・デザインが大切になってきます。

buttonタグの使い方

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

※解説
基本的なボタンの作成方法・各属性を説明していきます。

○buttonタグ

<button>タグを使用する事によって、WEB上にボタンを表示する事ができます。 <button>〇〇</button>の〇〇の中に、ボタンに表示させたい文字を記載します。 今回の例では「ボタン」という文字を表示させています。

○type属性

type属性を指定し、ボタンの機能を決める事ができます。
指定できる属性は①submit②reset③buttonの3点です。
①submit→送信ボタンを作成できます。主に入力フォームなどボタンの値をプログラム側に渡したい時に使用します。


②reset→リセットボタンを作成できます。入力フォームなどで入力した内容を消したい際などに使用します。


③type=”button”→button自体には機能がなく、buttonを指定した場合は、機能を追加していきます。


type属性を変えてもボタンの表示は変わらず、機能のみが変わります。

○name属性

name属性は、ボタンに名前をつける事ができる属性です。

名前をつけておく事で、このボタンがなにかを他の人にも分かりやすくする事ができます。今回は「maillist」メールリストのボタンという名前ををつけました。
必ず必要な属性ではないので、必要な場合に使用してください。

○value属性

プログラム側に値を渡す事ができる属性です。

value=”Aグループ”と指定したことで、プログラム側に「Aグループ」という値を送信する事ができます。

その他属性(disabled・autofoucus)

○disabled属性

ボタンを無効化する事ができる属性です。

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

disabled属性を指定した「無効」ボタンが半透明になり無効化になります。

○autofocus属性

フォーカスを当てる事ができる属性です。

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

autofocus属性を指定した「ボタンB」にフォーカスを当てる事ができています。

formの外側のボタンからの送信方法

buttonタグがフォームの外側にあっても、ボタンとひも付けをし送信をする事ができます。

サンプルコード表記結果

これを作る↓
Aの項目

HTMLサンプルコード

<form>内にidタグ、<button>内にformタグを設置し、同じid名にする事で紐付けをする事ができます。 今回は、「id=”himoduke”」「form=”himoduke”」でひも付けをする事ができます。

バリデーションを作成する

バリデーションとは、項目が空欄だと送信できなくなる制限です。

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

<input>に「required」属性を指定することで制限をかけることができます。 入力項目が必須入力項目になり、空欄では送信する事ができなくなります。

aタグとbuttonタグの違い・ルール

○aタグとbuttonタグの違い

初心者の方は、aタグとの違いに戸惑うかもしれませんが、まずは下記のように使い分けてみてください。
●クリックで他ページにいきたい場合は「aタグ」
●フォームの送信、リセットの場合は「buttonタグ」

使い分けに明確なルールはありませんが、上記のやり方が多いと思います、詳しく知りたい方は、下記を参考にしてみてください。
 https://www.ameamelog.com/html-a-button/

○aタグルール

<aタグ>の中にbuttonタグを入れることはHTMLを定めるルール(W3C)で禁止されており、仕様にない書き方なので、バグを起こす可能性があります。
aタグの中に入れてはダメなタグとしては、buttonタグ意外にも、「select, a, input, textarea」があげられます。

基本的なボタンデザイン(サンプルコード付き)

ボタンはCSSで様々な装飾をする事ができます。
押しやすいボタン、押しにくいボタンでは、ボタンのクリック率に大きく差が出ます。webサイトにあったボタンをカスタマイズできるようになるために、今回はシンプルなボタンデザインを紹介・解説します、自分のwebサイトにコピペで貼り付けカスタマイズしてください。

基本的なボタン

最もシンプルなボタンを紹介させていただきます。

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

CSSサンプルコード

※解説
buttonにクラスを指定し、CSSで装飾します、今回は「btn」というクラスを追加
paddingでボタン内の幅を調整
backgroundでボタンの色を指定
colorで「ボタン」の文字色を指定
:hover擬似クラスに「opacity: 0.7」を指定し、ボタンの上にカーソルが乗ったら、ボタンを少し透明にして、目立たせるようにしています。

立体的なボタン(基本ボタンに影をつける)

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

CSSサンプルコード

※解説
.btn{}
・border-bottom: solid 5px gray;でボタンに影を作成
・border-radius: 4px;でボタンに丸みをつける

.btn:active{} ボタンが押された時の動きを指定する。
・transform: translateY(5px);の指定で、ボタンが押される前より5px、Y方向に移動(下に沈みます)
・border-bottom: none;の指定で影を消す

まとめると「ボタンに影をつけておく→ボタンが押されたら影を消す」の指定をCSSで装飾しています。

立体的なボタン(丸み)

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

CSSサンプルコード

※解説
立体的なボタンに丸みを作る
1つ前に紹介した、立体ボタンにさらに丸みをプラスする。
「border-radius」の値を変更し丸みを追加、border-radiusに指定する値が大きくなればなるほど、丸みがプラスされます。
カスタマイズの参考にしてみてください。

丸型のボタン

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

CSSサンプルコード

※解説
backgroundでボタンの色を指定
colorでボタンの文字色を指定
width:100px・height:100pxでボタンの大きさを作成
border-radius: 50%;を指定し円を作成
text-aligin: center;でボタンの文字を真ん中に寄せる
line-height: 100px;で文字の高さを真ん中に寄せる
0verflow:hidden;で要素ボックスからはみ出てしまった部分を隠す
:hover擬似クラスに「opacity: 0.7」を指定し、ボタンの上にカーソルが乗ったら、ボタンを少し透明にして、目立たせるようにしています。

丸型のボタン(立体)

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

CSSサンプルコード

※解説
.btn{}
・border-bottomでボタンに影を作成

.btn:active{} ボタンが押された時の動きを指定
・transform: translateY(5px);の指定で、ボタンが押される前より5px、Y方向に移動(下に沈みます)

・border-bottom: none;の指定で影を消す

まとめると「ボタンに影をつけておく→ボタンが押されたら影を消す」の指定をCSSで装飾しています。

まとめ

今回は、「bottonタグの基本知識」「bottonタグに必要な属性」「コピペで使える基本のボタンデザイン」を中心に解説しました。

最後にポイントをまとめます。

1.ボタンを作成するには<button>タグを使用する

2.type属性を指定し、ボタンの機能を決める事ができる。指定できる属性は①submit②reset③buttonの3点

3.aタグの中に<button>タグを入れることは禁止されており、buttonタグ意外にも、「select, a, input, textarea」があげられる

4.コピペで使える基本的なボタンデザインを紹介

いかがだったでしょうか?
押しやすいボタンかそうでないかでは、クリック率に大きく影響します。
これを機会にボタンの使い方を覚えていき、WEB制作に活かしていきましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。