ボタンの作成について

Webデザインにおけるボタンの作成方法

お世話になります。コウヤです！

最近、Wordpress（WP）の習得をしておりますが、まだ机上で本読んで実機で習得している段階なので、WPの案件はまだまだ怪しいところですが、今WPの課題をこなしております。

さて、最近問い合わせとかで使うボタン、毎回考えながら作成するのもやや負担気味のため、解説を含め、ここでまとめておきたいと思います！

作成するものは、ボタン自体を中央揃えにし、さらに中身の文字も中央揃えにするものとします。

0.共通設定

ボタン周りの赤枠はサイトの中央に、ボタン自体も中央に揃えます。

.html

    <div id="btn01">
      <p>ボタン1</p>
    </div>

.css

      #btn01 {
        margin: 0 auto;/*枠を中央*/
        display: block;
        text-align: center;/*中身の文字を中央*/
        border: 1px solid red;
        padding: 30px;
        max-width: 900px;
        width: 100%;
      }

こちらの方法は、まず、#btn01で
max-width:900px;
width:100%
でボタンの周りの枠の幅を指定してます。

さらに、
margin: 0 auto;
で枠自体を中央にしております。

↓赤枠が中央になっている。

また、中身自体を中央にするには、
text-align:center;
にします。

これで下準備は完了です。

1.ボタンを中央揃えにする方法（line-heightを使う方法）

.html

    <div id="btn01">
      <p>ボタン1</p>
      <a href="#" class="button01">ボタン01</a>
    </div>

.css

      #btn01 {
        margin: 0 auto;
        text-align: center;
        display: block;
        border: 1px solid red;
        padding: 30px;
        max-width: 900px;
        width: 100%;
      }
      #btn01 .button01 {
        display: inline-block;/*中央揃えにするため、blockだとできないため*/
        width: 200px;
        height: 80px;
        line-height: 80px; /*上下中央揃え（heightと同じにする）*/
        background: #ccc;
        color: #333;
        text-align: center; /*左右中央揃え*/
        text-decoration: none;
      }

aタグにクラス指定をして、そこでボタンのデザインを指定していきます。
ここではline-heightを指定する方法を説明します。

ボタンの高さは
height:80px;
としているので、それに合わせて、
line-height:80px;

にします。すると、文字自体が上下中央となります。

さらに、左右中央揃えにするには
text-align:center;
とします。

ただし、この方法の場合、ボタンの文字が2段以上の場合は不可となります。

↑グレーのボタン内に文字を改行したいが、line-heightで80px指定しているため、「ボタンxx」という文字がはみ出てしまっている。

.html

    <div id="btn01">
      <p>ボタン1</p>
      <a href="#" class="button01">ボタン01<br />ボタンxx</a>
    </div>

2.ボタンを中央揃えにする方法（display:flexを使う方法）

.html

    <div id="btn01">
      <p>ボタン1</p>
      <a href="#" class="button01">ボタン01</a>
      <p>-----------------------</p>
      <p>ボタン2</p>
      <a href="#" class="button02">ボタン02</a>
    </div>

.css

      .button02 {
        margin: 0 auto;/*displayではflexを指定しているため、marginで中央揃え*/
        display: flex;
        align-items: center;/*ボタンの中身を上下中央揃え*/
        justify-content: center;/*ボタンの中身を左右中央揃え*/
        width: 200px;
        height: 80px;
        background: #ccc;
        color: #333;
        text-decoration: none;
      }

上記のCSSのように、
display: flex;
align-items: center;
justify-content: center;
でボタンの中身を中央揃えができます。

display: flex; で中の要素にレイアウトを適用できるようになります。
そこで、align-items: center; と justify-content: center; で中央揃えにできるようになります。

また、以下のように、

.html

    <div id="btn01">
      <p>ボタン1</p>
      <a href="#" class="button01">ボタン01</a>
      <p>-----------------------</p>
      <p>ボタン2</p>
      <a href="#" class="button02">ボタン02<br />ボタンxx</a>
    </div>

とボタンの中身を2行にしても中央揃えになります。