【初心者向け】実践ガイド！CSSボタンの基本の作り方を解説

※この記事には広告が含まれています

こんにちは！しゅんです！

現在はWeb制作会社で働きながらWeb制作初心者の方に向けて、役に立つ情報やノウハウを発信しています。

今回はコーディングで意外と迷いがちなボタンの作り方について、基本の考え方や実践的なコーディング方法をまじえながら解説していきます！

こんな悩みを持つ方に役立つ記事になってますので、ぜひ最後までお読みください^^

実際のコードを使って解説

以下のコードが基本的なボタンの作り方です。

--- html ---
<div>
  <a href="#" class="button">ボタン</a>
</div>

--- css ---
.button {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #fff;
  background-color: red;
  border: 1px solid #fff; 
  text-align: center;
  padding:10px 0;
}

ポイント1：ボタンのmarginはつけない

ボタンのスタイルは、aタグ自体に持たせます。

ただし、外側の余白であるmarginはつけないのがポイントです。

その理由は「使い回す」ことを考慮するためです。使い回し先でも余白が同じとは限りません。

aタグに外側の余白（margin）は当てない

具体的に解説していきます！

ポイント2：aタグはdivで囲んで余白はdivに付ける

余白を上手く制御するには、aタグをdivで囲み、そのdivに対してmarginを付けるのがコツです。

一つのサイトでボタンは使い回すことが多いです。

以下の場合を考えてみましょう。

--- html ---
<a href="#" class="button">ボタン</a>

--- css ---
.button {
  margin-top: 20px;
}

ボタンの上に余白を取りたい場合、一見これで問題ないように思います。

でも「使い回す」ことを考えるとどうでしょうか？

ボタンの上には常に20pxの余白が空いてしまいますよね。

newsセクションの中にボタンを作るとします。

--- html ---
<section class="news">
　<p class="news__text">ニュースセクションだよ。</p>
　<div class="news__button">
  　<a href="#" class="button">ニュースを見る</a>
　</div>
</section>

--- css ---
.news__button {
  margin-top: 20px;
}

aタグをdivで囲い、そのdivに対してmargin-topを付けてみました。これだとどうでしょうか？

20pxという余白は「.news__button」というクラスにしか効かないので他の部分に影響を与えませんよね。

そして a タグ自体は他でも使い回すことができます。

--- html ---
<section class="blog">
　<p class="blog__text">ブログセクションだよ。</p>
　<div class="blog__button">
  　<a href="#" class="button">ブログを見る</a>
　</div>
</section>

--- css ---
.blog__button {
  margin-top: 50px;
}

こんな感じで、ブログというセクションでもボタンを使い回せます。

そして余白は「blog__button」というdivのクラスに付ければOKですよね。

BEMについてはCSS設計を学ぶと理解できるのでぜひこちらの記事も読んでみて下さいね▼

ポイント3：高さはheightではなくpaddingで調整する

ボタンの高さを「height」で固定すると、文字数が増えた場合に文字がはみ出すなどの影響を与える可能性があります。

例えば、高さを以下のように「height」で指定したとします。

--- html ---
<section>
　<div>
  　<a href="#" class="button">ボタン</a>
　</div>
</section>

--- css ---
.button {
  height: 50px;
  line-height: 50px;
}

ボタンの文字数が常に一定の場合にはこれでも問題ありません。

しかし以下のように文字数が増えた場合、高さが足りずにボタンの外に文字がはみ出してしまう可能性があります。

--- html ---
<section>
　<div>
  　<a href="#" class="button">ボタンボタンボタンボタンボタンボタン</a>
　</div>
</section>

「height」ではなく、以下のように「padding」で調整すれば、文字数が増えた場合でも文字がボタンの外にはみ出しません。

--- css ---
.button {
  padding: 20px;
}

まとめ：基本形を覚えよう！

いかがでしたか？今回は皆さんも必ず作ることになるボタンの作り方について解説をしました！

ボタンは、Web制作で必ず使う要素の一つです。

僕自身も勉強を始めた当初は、どう作るか分からず、そのたびに迷いながら作っていました。

大切なのは、「最初に基本を身につける」ことです。

そして、そこから自分の現場に合わせて広げていきましょう。

今回説明した作り方が100%正解というものではなく、あくまで一つの作り方として参考にしてもらえたらと思います。

この記事が、ボタンの作り方に迷っている方の参考になれば幸いです。

これからも引き続き頑張っていきましょう！

それでは！