【初心者向け】実践！ボタンの作り方について解説！

こんにちは！キャメルです！

36歳で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;
}

ポイント①：スタイルはaタグに当てる。ただし「margin」はつけない。

ボタンのスタイルは a タグ自体に当てましょう。

ただし外側の余白（margin）は当てないようにしましょう！

これは使い回し先でも余白が同じとは限らないからです。

それでは具体的にどうするか見ていきましょう！

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

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

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

--- 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設計を学ぶと理解できるのでぜひこちらの記事も読んでみて下さいね▼

ポイント③：高さは固定せず『padding』で調整しよう！

次は高さについてです。

--- 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>

なので固定値ではなく

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

このように高さを padding で取れば、

文字数が増えた場合でも文字がボタンの外にはみ出しません。

まとめ：まずは基本形を覚えて、そこから幅を広げていくのがおすすめ！

いかがでしたでしょうか？

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

僕も勉強を始めたばかりの頃はボタンの作り方がいまいち理解できずその都度迷いながら作っていました。

僕のおすすめとしては

今回説明した作り方が100%正解というものではなく、

あくまで一つの作り方として参考にしてもらえたらと思います。

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

それでは！