ボタンの作成について

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

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

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

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

作成するものは、ボタン自体を中央揃えにし、さらに中身の文字も中央揃えにするものとします。
## 0.共通設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/aa78239d-bdd8-7aec-e9c0-9518cb6d1cfd.png)

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


```.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**で
<b>max-width:900px;</b>
<b>width:100%</b>
でボタンの周りの枠の幅を指定してます。

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

↓赤枠が中央になっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/375121d0-988a-9e02-1352-0f95573db748.png)

また、中身自体を中央にするには、
**text-align:center;**
にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/3e89c317-a2c4-f217-69b7-43e2f5298042.png)



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

## 1.ボタンを中央揃えにする方法（line-heightを使う方法）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/3648d79c-0361-7297-fbbf-605b26557ec1.png)
```.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段以上の場合は不可となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/c3b4d661-f37d-8c94-c951-98a94f881efd.png)
↑グレーのボタン内に文字を改行したいが、line-heightで80px指定しているため、「ボタンxx」という文字がはみ出てしまっている。

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


## 2.ボタンを中央揃えにする方法（display:flexを使う方法）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/b83f2d69-40d4-6907-67fe-a10c2157415c.png)

```.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行にしても中央揃えになります。