HTMLのWEBページ上にボタンを作成したいときは、aタグを用いることでクリックでアクションが発生するボタンを用意することが出来ます。

この記事では初心者向けに

• CSSで押下可能なボタンを作成する方法
• 現在のページは開いたまま、新しいタブを開いてリンクを飛ばす方法

HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！

目次

1aタグでボタンを作成する
2ボタンをクリックしたとき新しいタブで開く

aタグでボタンを作成する

aタグを設置するだけでは、通常のリンクになってしまいます。HTMLではWEBページ上でボタンの様に見せるために、CSSでボタン風のデザインを施します。

以下は、「aタグのクラス名がbtnのボタンを作成する。」例です。※デザインはCSSを参照

<a href="#" class="btn">ここをボタンにしたい</a>

a.btn{
 color:black;/*テキストの文字の色を黒にする*/
 background-color:yellow;/*ボタンの色（背景色）を黄色にする*/
 border:2px solid black;/*ボタンの輪郭に2pxの黒色の線を描く*/
 padding:10px 30px;/*テキストの文字から、上下にそれぞれ10px、左右にそれぞれ30pxの幅を設定する*/
}

ボタンをクリックしたとき新しいタブで開く

aリンクでボタンを作成した場合、通常は現在のページをリンク先のページに更新してしまいます。そのため、現在のページをのこしつつ、新しいタブでリンク先を開きたいときは、「target=”_blank”」を指定します。

以下は、「aタグのクラス名がbtnのボタンを作成する。尚クリックすると新規タブで開く」例です。

<a href="#" class="btn" target="_blank">ここをボタンを新規タブで開きたい</a>

a.btn{
 color:black;/*テキストの文字の色を黒にする*/
 background-color:yellow;/*ボタンの色（背景色）を黄色にする*/
 border:2px solid black;/*ボタンの輪郭に2pxの黒色の線を描く*/
 padding:10px 30px;/*テキストの文字から、上下にそれぞれ10px、左右にそれぞれ30pxの幅を設定する*/
}

以上となります。