【CSS】レッスン3-07:リンクボタンを設置しよう

一つ前の章では背景画像の設置方法について学習しました。

今回はリンクボタンの設置方法について見ていきましょう。

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がデフォルトになるため、用途に応じてbuttonresetを指定することが重要。

このようにHTMLにおけるボタンはJavaScriptと連動しない限り、フォームくらいでしか使用することがありません。

リンク用のボタンとして使用することも可能ですが、その場合は<button>タグではなく<a>タグにデザインを与えてボタンのように見せる方法が一般的です。

以下の条件に従って、HTMLのコードを書いてください。

  • 「クリックしてね!」というテキストが表示されるボタンを作成すること
  • type属性は「button」と指定すること

<a>タグをボタン風にスタイリングする方法

ウェブサイトでは、ボタンのように見えるけれど実際にはリンクとして機能する要素をよく見かけます。

これは<a>タグ(アンカータグ)をCSSでスタイリングしてボタン風に見せることで実現できます。

<a>タグはもともとリンクを作成するためのタグですが、デザイン次第でクリックしやすいボタンのように仕上げることができます。

<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-colorcolor
    背景色と文字色を指定して、視覚的に目立たせます。
  • 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:クリックできないことを示す禁止マーク

以下の条件に従って、HTMLとCSSのコードを書いてください。

  • <a>タグを使って「詳しくはこちら」というテキストのリンクを作成すること
  • 通常のリンクはカーソルが自動で変化しますが、あえて cursor: pointer; を指定して確認してみましょう
  • text-decoration: none; を使ってリンクの下線を消しましょう

まとめ

  • cursor: pointer; を使うことで、ユーザーに「ここはクリックできる場所だ」と直感的に伝えることができます。
  • 特にカスタムデザインのボタンやリンク風の要素には、明示的に指定するのが重要です。
  • cursor プロパティは多様な形で使えるため、状況に応じて適切なスタイルを選びましょう。

次の章ではhoveractiveといった擬似クラスを使って、ボタンにさらにインタラクションの効果を追加する方法を学びます。

: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>
  • .btn:hover は、マウスカーソルがボタンの上にあるときだけ適用されるスタイルです。
  • background-color を変えることで視覚的な変化を与えます。
  • transition プロパティを追加することで、色の変化が滑らかになり、より洗練された印象を与えます。

: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 を併用することで、押し込みと戻る動作が自然になります。

以下の条件に従って、HTMLとCSSのコードを書いてください。

  • 「インタラクションの練習」というテキストのボタンを作成すること
  • 通常時の背景色はオレンジ色(#FFA500)に設定すること
  • ホバー時(:hover)には背景色を濃いオレンジ色(#FF8C00)に変更し、少し影(box-shadow)を追加すること
  • クリック時(:active)にはボタンが押し込まれたように小さくなるようにすること

まとめ

  • :hover は、マウスカーソルを乗せたときの視覚的な変化を設定する擬似クラスです。
  • :active は、クリックしている瞬間のスタイルを定義し、押し込まれた感覚を演出できます。
  • 両方を組み合わせることで、ユーザーにとって操作しやすく、楽しいインタラクションを実現できます。

まとめ

今回の記事ではウェブサイトにおける「リンクボタンの設置」について学びました。

ボタンはユーザーが操作する重要なインターフェースのひとつであり、正しい使い方とデザインによって、サイトの使いやすさを大きく向上させることができます。

ここまでの学びを振り返ると、次のようなポイントが理解できたはずです。

  • <button>タグの基本的な使い方とtype属性の重要性
  • <a>タグをボタン風にカスタマイズする方法
  • cursor: pointer;でクリック可能な要素を強調するテクニック
  • :hover:activeで視覚的なインタラクションを追加する方法

ウェブサイトのデザインは細かな工夫の積み重ねによって、ユーザーにとって魅力的で使いやすいものになります。

今回学んだ内容をもとに、ぜひ自分でもさまざまなデザインやスタイルに挑戦してみてください。少しずつ実践することで、より魅力的なウェブサイトを作れるようになります。

ここまでお疲れさまでした!
あなたのスキルは着実にレベルアップしています!

練習問題3-7:インタラクティブなリンクボタンを作成しよう

以下の条件に従って、HTMLとCSSのコードを書いてください。

この記事で学んだ内容を活かして、インタラクティブなリンクボタンを完成させましょう。

  1. <a>タグを使用して「お申し込みはこちら」というテキストのリンクボタンを作成すること。
  2. 通常時は以下のデザインにすること:
    • 背景色は青(#007BFF)、文字色は白
    • 角を少し丸くする(border-radius: 5px
    • 下線は表示しない(text-decoration: none;
  3. マウスカーソルをボタンの上に乗せたとき(:hover)は、以下の変化を追加すること:
    • 背景色を濃い青(#0056b3)に変更
    • 影を追加して浮き上がるような効果をつける(box-shadow を使用)
  4. クリックしている間(:active)は、次の変化を追加すること:
    • ボタンが少し押し込まれたように小さくなる(transform: scale(0.95);
  5. クリック可能であることを示すために、cursor: pointer; を適用すること

初めてのWebサイトを作ろう3-7

このサイトの Lesson1-1(HTML学習の入り口) か Lesson2-1(CSS学習の入り口) からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ

この「初心者のためのプログラミングテキスト&問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

現在準備中です。暫くお待ちください。

<<前のページ HTML/CSSの記事一覧 次のページ>>

この記事への質問・コメント

この記事を作成するにあたりAIの力を借りています。

問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。






    HTML/CSSのテキスト&問題集トップへ戻る
    トップページへ戻る