一つ前の章では背景画像の設置方法について学習しました。
今回はリンクボタンの設置方法について見ていきましょう。
Lesson3-1：ボックス配置の基礎を理解しよう
Lesson3-2：ボックスサイズを変更しよう
Lesson3-3：ボックスを自在に配置しよう
Lesson3-4：画像を自在に配置しよう
Lesson3-5：画像のスタイルを変更しよう
Lesson3-6：背景画像を設定しよう
Lesson3-7：リンクボタンを設置しよう ◁今回はココ
Lesson3-8：リストとテーブルのスタイルを変更しよう
Lesson3-9：CSS変数を理解しよう
ウェブサイトを操作する際、ユーザーがクリックして次のページへ移動したり、特定のアクションを実行するための「ボタン」は欠かせない存在です。
このボタンには、主に2つの作り方があります。
一つはフォーム送信などに使われる<button>タグ、もう一つは通常のハイパーリンクをボタンのように見せる方法です。
本記事ではこれらの基本的な使い方に加え、ユーザーが直感的に操作しやすくなるためのデザインや動き（ホバーやクリック時の変化）をCSSでどのように実装するかを学んでいきましょう。
初心者でもすぐに実践できるよう、シンプルなコード例を交えてわかりやすく解説していきます。
<<前のページ
HTML/CSSの記事一覧
次のページ>>
ボタンとは？リンクとの違いを知ろう
ウェブサイトを見ていると、よく「クリックして申し込む」や「詳しくはこちら」といったボタンを目にすることがあります。
この「ボタン」は、ユーザーが何かしらの操作を行うための重要なインターフェースの一つです。ボタンをクリックすることで、ページの遷移、フォームの送信、ポップアップの表示、メニューの開閉など、さまざまなアクションを実行できます。
ボタンの役割は単なる見た目だけでなく「ここを押すことで何かが起こる」とユーザーに直感的に理解させることにあります。
そのため視覚的なデザインだけでなく、マウスカーソルが変化したり、クリック時に色が変わるなどのインタラクションがとても重要です。
<button> タグの基本と使い方
HTMLでボタンを作成する最もシンプルな方法は、<button>タグを使うことです。
このタグは主にフォームの送信ボタンや、JavaScriptと組み合わせて特定の動作を実行するボタンとして利用されます。
基本構文は以下の通りです。
<!-- シンプルなボタンの例 --> <button type="button">クリックしてね！</button>
このコードでは<button>タグの中に表示したいテキスト「クリックしてね！」を書いています。
これだけで、見た目にもボタンらしい要素が作成できます。
type 属性の役割と種類
<button>タグにはtypeという属性があり、ボタンの動作を指定できます。主なタイプは以下の3つです。
1. type="button"（標準のボタン）
クリックしても特に何も起こりません。JavaScriptなどで機能を追加するために使用します。
<button type="button">ボタン</button>
2. type="submit"（フォーム送信ボタン）
フォーム内で使用すると、クリック時にフォームの内容を送信します。
<form action="submit.php" method="post"> <button type="submit">送信する</button> </form>
3. type="reset"（フォームのリセットボタン）
フォーム内の入力内容をすべて初期状態に戻します。
<form> <input type="text" placeholder="名前を入力"> <button type="reset">リセット</button> </form>
コードの解説
<button>タグは、クリック可能なボタンを定義します。type属性を指定しない場合、フォーム内では自動的にsubmitとして認識されます。そのため、特にフォーム内で何もしないボタンを作る場合は、type="button"を明示的に指定するのが安全です。- ボタンの中には、テキストだけでなく、アイコンや画像を入れることもできます。
まとめ
<button>タグはシンプルにボタンを作成できる便利なタグ。type属性で動作を切り替えることができる。- フォームの中では
submitがデフォルトになるため、用途に応じてbuttonやresetを指定することが重要。
このようにHTMLにおけるボタンはJavaScriptと連動しない限り、フォームくらいでしか使用することがありません。
リンク用のボタンとして使用することも可能ですが、その場合は<button>タグではなく<a>タグにデザインを与えてボタンのように見せる方法が一般的です。
<a>タグをボタン風にスタイリングする方法
ウェブサイトでは、ボタンのように見えるけれど実際にはリンクとして機能する要素をよく見かけます。
これは<a>タグ（アンカータグ）をCSSでスタイリングしてボタン風に見せることで実現できます。
<a>タグはもともとリンクを作成するためのタグですが、デザイン次第でクリックしやすいボタンのように仕上げることができます。
ボタン風デザインの作り方
例えば、以下のコードをブラウザ表示してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
display: inline-block; /* インライン要素をブロック化してサイズを調整可能に */
padding: 10px 20px; /* ボタン内の余白を設定 */
background-color: #007BFF; /* 背景色を青に設定 */
color: white; /* 文字色を白に設定 */
text-decoration: none; /* デフォルトの下線を削除 */
border-radius: 5px; /* 角を少し丸くする */
font-size: 16px; /* 文字の大きさを調整 */
border: none; /* 境界線を削除 */
}
</style>
</head>
<body>
<a href="#" class="btn">詳しくはこちら</a>
</body>
</html>ブラウザ表示してみましたか？青いボタン風リンクが表示されたかと思います。
実は、このボタンは今まで学習してきた内容だけで作成できます。
display: inline-block;<a>タグはデフォルトでインライン要素ですが、このプロパティを指定することで、ブロック要素のように幅や高さを調整できるようになります。padding
テキストの周りに余白を追加して、ボタンらしい見た目を作ります。background-colorとcolor
背景色と文字色を指定して、視覚的に目立たせます。text-decoration: none;<a>タグのデフォルトの下線を削除します。border-radius
角を丸くして、より柔らかい印象にします。
まとめ
<a>タグをボタン風にすることで、ナビゲーションリンクやコールトゥアクション（CTA）に活用できる。display: inline-block;を使用すると、ボタンらしいスタイルを適用しやすい。- CSSの工夫次第で、さまざまなデザインのボタンを簡単に作成できる。
次の章では、ボタンをクリックした際の操作感を高めるために、cursor: pointer;の使い方について学びます。
cursor: pointer; でクリック感を演出
ウェブサイトのボタンやリンクを操作する際、ユーザーに「ここはクリックできる」という視覚的なヒントを与えることが重要です。
そのために使われる代表的なCSSプロパティが cursor: pointer; です。
このプロパティを使うことで、マウスカーソルが通常の矢印から「指の形」に変わり、クリック可能であることが直感的に伝わるようになります。
cursor: pointer; の基本的な使い方
以下は、ボタンやリンクに cursor: pointer; を適用するシンプルな例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer; /* クリック可能なことを示す */
}
</style>
</head>
<body>
<a href="#" class="btn">クリックしてね！</a>
</body>
</html>cursor: pointer;
このプロパティを指定することで、マウスカーソルが「指マーク」に変わります。これによりユーザーが「この部分はクリックできる」と視覚的に認識しやすくなります。- なぜ重要なのか？
<button>タグや<a>タグには、デフォルトでクリック可能なカーソルが適用されることもあります。しかしカスタムデザインを施した要素（例えば、<div>を使ったボタン風デザインなど）には自動的に適用されないため、明示的にcursor: pointer;を指定する必要があります。
他の cursor の種類
cursor プロパティには「pointer」以外にも多くのオプションがあります。
default：通常の矢印カーソル（デフォルト設定）text：テキスト選択用のI字型カーソルmove：移動可能なことを示すカーソルnot-allowed：クリックできないことを示す禁止マーク
まとめ
cursor: pointer;を使うことで、ユーザーに「ここはクリックできる場所だ」と直感的に伝えることができます。- 特にカスタムデザインのボタンやリンク風の要素には、明示的に指定するのが重要です。
cursorプロパティは多様な形で使えるため、状況に応じて適切なスタイルを選びましょう。
次の章ではhoverやactiveといった擬似クラスを使って、ボタンにさらにインタラクションの効果を追加する方法を学びます。
:hover と :active 擬似クラスで動きをつける
ウェブサイトのボタンやリンクを操作していると、マウスカーソルを乗せたときに色が変わったり、クリックした瞬間に押し込まれたような見た目に変化することがあります。
このようなインタラクションは、hover（ホバー）やactive（アクティブ）といった擬似クラスを使って簡単に実装できます。
これらの効果を追加することで、ユーザーにとって直感的で操作しやすいデザインを作ることができます。
疑似クラスについてはLesson2-4で詳しく学習しましたが、あらためてここで復習しましょう。
:hover 擬似クラスとは？
:hover はユーザーがマウスカーソルを要素の上に乗せたときに適用されるスタイルを定義します。
リンクやボタンなどに多用され、視覚的な変化で「ここはクリックできる場所ですよ」とユーザーに知らせる役割を果たします。
以下のコードをブラウザ表示し、ホバーしてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease; /* なめらかな変化 */
}
.btn:hover {
background-color: #0056b3; /* ホバー時に色を少し暗くする */
}
</style>
</head>
<body>
<a href="#" class="btn">ホバーしてみてください！</a>
</body>
</html>:active 擬似クラスとは？
:active はユーザーが要素をクリックした「まさにその瞬間」に適用されるスタイルです。
この効果によって、実際にボタンを「押した感覚」を視覚的に表現できます。
以下のコードをブラウザ表示し、クリックしてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #007BFF;
color: white;
text-decoration: none;
border-radius: 5px;
transition: transform 0.1s ease; /* 押し込み時のアニメーション */
}
.btn:active {
transform: scale(0.95); /* 少し小さくして押し込まれた感じを表現 */
}
</style>
</head>
<body>
<a href="#" class="btn">クリックしてみてください！</a>
</body>
</html>.btn:activeは、クリックしている間だけ適用されます。transform: scale(0.95);を使うことで、ボタンが少し縮んで「押された感覚」を演出しています。transitionを併用することで、押し込みと戻る動作が自然になります。
まとめ
:hoverは、マウスカーソルを乗せたときの視覚的な変化を設定する擬似クラスです。:activeは、クリックしている瞬間のスタイルを定義し、押し込まれた感覚を演出できます。- 両方を組み合わせることで、ユーザーにとって操作しやすく、楽しいインタラクションを実現できます。
まとめ
今回の記事ではウェブサイトにおける「リンクボタンの設置」について学びました。
ボタンはユーザーが操作する重要なインターフェースのひとつであり、正しい使い方とデザインによって、サイトの使いやすさを大きく向上させることができます。
ここまでの学びを振り返ると、次のようなポイントが理解できたはずです。
<button>タグの基本的な使い方とtype属性の重要性<a>タグをボタン風にカスタマイズする方法cursor: pointer;でクリック可能な要素を強調するテクニック:hoverと:activeで視覚的なインタラクションを追加する方法
ウェブサイトのデザインは細かな工夫の積み重ねによって、ユーザーにとって魅力的で使いやすいものになります。
今回学んだ内容をもとに、ぜひ自分でもさまざまなデザインやスタイルに挑戦してみてください。少しずつ実践することで、より魅力的なウェブサイトを作れるようになります。
ここまでお疲れさまでした！
あなたのスキルは着実にレベルアップしています！
FAQ｜リンクボタンの作り方に関するよくある質問
- Q1.
<button>タグと<a>タグの違いは何ですか？どちらを使えばいいですか？ -
<button>タグはフォームの送信や JavaScript の処理を実行するときに使用します。一方
<a>タグはページの移動や外部サイトへのリンクを作成する際に使います。ボタン風の見た目にしたいだけなら、
<a>タグに CSS を適用してデザインを変更する方法もあります。
- Q2.
<button>タグを使うとブラウザごとに見た目が違います。統一するにはどうすればいいですか？ -
ブラウザのデフォルトスタイルをリセットすることで、見た目の違いをなくせます。
例えば、以下のような CSS を追加すると、すべてのブラウザで統一されたデザインにできます。
button { all: unset; display: inline-block; padding: 10px 20px; border: 1px solid #333; background-color: #007bff; color: white; text-align: center; cursor: pointer; }
- Q3.
cursor: pointer;を使うと何が変わりますか？ -
cursor: pointer;を適用すると、マウスカーソルが指のアイコン（ポインター）に変わり、クリックできることを示します。デフォルトでは
<a>タグには適用されていますが、<button>タグや<div>で作ったカスタムボタンには手動で追加する必要があります。
- Q4.
:hoverや:activeを使ってボタンに動きをつける方法は？ -
擬似クラス
:hoverはマウスを乗せたときに、:activeはボタンをクリックしたときに適用されます。例えば以下の CSS を追加すると、ホバー時に色が変わり、クリック時に押し込まれたような見た目になります。
button:hover { background-color: #0056b3; } button:active { transform: scale(0.95); }
- Q5. ボタンをキーボードで操作できるようにするにはどうすればいいですか？
-
<button>タグはデフォルトでEnterキーでクリックできますが、<a>タグをボタン風にした場合は tabindex=”0″ を追加しないとキーボード操作できません。また、アクセシビリティ向上のために role=”button” を付けると、スクリーンリーダーにもボタンとして認識されます。
<a href="#" role="button" tabindex="0" class="custom-button">リンクボタン</a>
練習問題3-7：インタラクティブなリンクボタンを作成しよう
この記事で学んだ内容を活かして、インタラクティブなリンクボタンを完成させましょう。
以下の条件に従ってHTMLとCSSのコードを書いてください。ファイル名はそれぞれ、training3-7.htmlとtraining3-7.cssとしましょう。
<a>タグを使用して「お申し込みはこちら」というテキストのリンクボタンを作成すること。- 通常時は以下のデザインにすること：
- 背景色は青（
#007BFF）、文字色は白 - 角を少し丸くする（
border-radius: 5px） - 下線は表示しない（
text-decoration: none;）
- 背景色は青（
- マウスカーソルをボタンの上に乗せたとき（
:hover）は、以下の変化を追加すること：- 背景色を濃い青（
#0056b3）に変更 - 影を追加して浮き上がるような効果をつける（
box-shadowを使用）
- 背景色を濃い青（
- クリックしている間（
:active）は、次の変化を追加すること：- ボタンが少し押し込まれたように小さくなる（
transform: scale(0.95);）
- ボタンが少し押し込まれたように小さくなる（
- クリック可能であることを示すために、
cursor: pointer;を適用すること
初めてのWebサイトを作ろう3-7
このサイトの Lesson1-1（HTML学習の入り口） か Lesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
Lesson3-7のまとめノートと練習問題を追加しよう
このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
１．練習問題の解答を保存
練習問題3-7で作成した２つのファイルを学習フォルダの中に保存しましょう。
- training3-7.html ⇒ Lesson3フォルダに保存
- training3-7.css ⇒ Lesson3フォルダの中のstyleフォルダに保存
トップページからリンクで飛べるようになりますので確認しましょう。
２．まとめノートを作成・保存
下記のHTMLコードは、このLesson3-7で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite3-7.html」という名前で保存し、「lesson3（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson3-7</title> <link rel="stylesheet" href="style/styles-lesson3.css"> </head> <body> <h1>Lesson3-7：リンクボタンを設置しよう</h1> <div class="container"> <p> ウェブサイトにおいて、ユーザーが操作するための「ボタン」は重要なインターフェースの一つです。本記事では、 <code><button></code>タグと<code><a></code>タグを用いたボタンの作成方法を学び、それらを適切にデザインし、 ユーザーに直感的に操作してもらうためのCSSテクニックを習得します。 </p> <h2>このレッスンの到達目標</h2> <p>HTMLでボタンを適切に配置し、CSSで視覚的なデザインやインタラクションを加えられるようになることです。</p> <h2>このレッスンで学習した内容</h2> <ul> <li><code><button></code>タグの基本と使い方</li> <li>ボタンの種類（<code>type="button"</code>, <code>type="submit"</code>, <code>type="reset"</code>）と用途</li> <li>フォーム送信やリセットの実装方法</li> <li><code><a></code>タグをボタン風にする方法</li> <li>CSSで<code>display: inline-block;</code>を指定し、ボタンのような見た目にする</li> <li>背景色、文字色、<code>padding</code>、<code>border-radius</code>の設定</li> <li>クリックできる要素の強調</li> <li><code>cursor: pointer;</code> を指定し、クリック可能であることを視覚的に伝える</li> </ul> <h2>ボタンにインタラクションを追加する方法</h2> <ul> <li><code>:hover</code> を使ってボタンの色を変える</li> <li><code>:active</code> を使って押し込まれたような効果をつける</li> </ul> <h2>トピック・豆知識</h2> <ul> <li><code><button></code>タグはフォーム内でデフォルトが「submit」となるため、特に何もしないボタンを作る場合は type="button" を明示的に指定するのが望ましい。</li> <li><code><a></code>タグをボタン風にすることで、ナビゲーションリンクやコールトゥアクション（CTA）に活用できる。</li> <li><code>:hover</code>や<code>:active</code>を活用することで、ボタンの操作感を向上させ、ユーザーの満足度を高めることができる。</li> </ul> <h2>まとめ</h2> <p> 本レッスンでは、HTMLの<code><button></code>タグと<code><a></code>タグを活用したボタンの作成方法を学びました。 さらに、CSSを用いて視覚的なデザインを整え、ユーザーが直感的に操作できるボタンを作る技術を習得しました。 ボタンはウェブサイトに欠かせない要素なので、基本を押さえつつ、さまざまなデザインの応用にも挑戦してみましょう。 </p> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </div> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>これでLesson3-7の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
<<前のページ
HTML/CSSの記事一覧
次のページ>>
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。