遷移ボタンを作るコードの仕組みを知る（後編）

# はじめに
こんにちは。Qiita株式会社で主に[Qiita Zine](https://zine.qiita.com/)の記事制作を担当しています。非エンジニアです。記事やサイトは見るのも作るのも好きで、そこからHTMLやCSSに興味を持って調べるなどして、少し勉強しています。

「[遷移ボタンを作るコードの仕組みを知る（前編）](https://qiita.com/niwa_manaho/items/462c780634eb3f851a55)」を書いていまして、こちらはその続きです。

# Chat GPTに教えてもらったコードを一部変更したもの
```index.html
<html>
<head>
  <style>
    /* スタイルの設定 */
    .transition-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #00ced1;
      color: #fff;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    .transition-button:hover {
      background-color: #333;
    }
  </style>
</head>
<body>
  <!-- ボタンの表示 -->
  <a href="遷移先のURL" class="transition-button">PUSH！</a>
</body>
</html>
```
前回は`display` `padding` と色の指定まで調べました。

上記コードでの見え方は▼
![スクリーンショット 2023-05-20 10.01.50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/4a4181fc-84b7-6763-80a1-51b1bab7f76f.jpeg)

## `text-decoration`で文字を装飾
`text-decoration`は何でしょう。言葉通り「テキスト」を「デコレーション（装飾する）」のだと想像はつきますが、一体どのような役割かは分かりません。調べると、アンダーラインを引いたり、その色を変えたり、波形など形を指定したりするプロパティのようです。

`text-decoration`には`-color` `-line` `color` `style` などを続けて書くこともあり、それぞれ色、線を引く位置、色、線のスタイル（直線、波形、二重線など）を指定できます。

いくつか試してみました。
■`text-decoration-style: wavy;`：波形にする
![スクリーンショット 2023-05-20 10.25.41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/26a5a6cb-67fd-70b1-7b11-03dca30ea4e4.jpeg)

■`text-decoration-style: dashed;`：点線にする
![スクリーンショット 2023-05-20 10.26.05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/a9b25471-7b27-a487-7cdd-1bdde613bb7c.jpeg)

■`text-decoration-style: wavy;`と`background-color: #00008b;`：波形にして、線の色を `#00008b`にする

![スクリーンショット 2023-05-20 10.30.19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/17177174-f17f-8684-e0e3-db8c72bd1788.jpeg)

簡潔にまとめてくださっている記事があったので、貼っておきます。

https://qiita.com/becolomochi/items/890858860cf4f35ac8f0

## `border-radius`は要素の四角を丸めるショートハンドプロパティ
`border-radius`は、要素の4つの角を丸めるプロパティらしいです。今回は `4px` と指定されているので、差が分かるよう`border-radius: 70px;`に変更してみます。丸みが強くなりました。

![スクリーンショット 2023-05-20 10.37.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/4036bb03-a782-8457-27cd-dd1830feb0b6.jpeg)

### 四角それぞれの指定も可能
■`border-top-right-radius`：右上
■`border-top-left-radius`：左上
■`border-bottom-right-radius`：右下
■`border-bottom-left-radius`：左下
ちなみに↑のように、四角それぞれの指定もできます。`border-radius`は四角すべて一括で指定しています。せっかくなので、四角異なるピクセルで指定してみます。

```index.html
      border-top-right-radius: 50px;
      border-top-left-radius: 10px;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 30px;
```

![スクリーンショット 2023-05-20 10.45.10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/3264cd56-c681-d881-dc0f-37b82cf48ae2.jpeg)

自由自在にいびつな形を作れます。

## `transition`で簡単なアニメーションを
`transition: background-color 0.3s ease;` と`.transition-button:hover〜`をまとめて説明。

`transition` は簡単に言うと、スタイルの開始から終了までの動きを指定するショートハンドプロパティのようです。今回ですと、カーソルをボタンに合わせると、（後述しますが）0.3秒かけて黒色 `#333`に変化します。

![1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/5c086f2b-f2b2-8f99-3848-55b49a672685.jpeg)



### 解説
今回設定している `ease` は、最初と最後がゆっくりと変化することを意味しています。`0.3s`は0.3秒。`s`はsecond（秒）の頭文字ですね。大袈裟に、例えば`10s`に変更すると、色が `#00ced1` から `#333` に変化するまで、非常に長かった（10秒）。

`ease`の応用として、 `ease-in` `ease-out`などがあり、それぞれ「最初はゆっくりと、徐々に速く」「最初が速く、徐々にゆっくりと」した動きを設定できます。

###  `.transition-button:hover`
`:hover`は擬似クラス（特定の状態のときのみ実行されるクラス）の一つ。`：hover`は、要素にマウスのポインタが置かれたときのみ適用されます。

```index.html
    .transition-button:hover {
      background-color: #333;
    }
```
は、「ボタンにマウスのポインタが乗っている場合（`.transition-button:hover`）、背景色が`#333`になりますよ」という意味です。ただ`#00ced1`から`#333`に変化するのは違和感あったので、`#20b2aa`に変更。

![2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/656cd5ef-101c-8f20-f829-aa813de48464.jpeg)


マウスを乗せると...
![3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/cd9da428-f3ed-8742-0a57-9956d2b51edf.jpeg)

よくありそうな、色が濃くなるような設定にしました。画像比較では少々分かりづらいかもしれませんが。

# 表示するテキストとリンクの設定
最後は`<body>`の部分。
```index.html
<body>
  <!-- ボタンの表示 -->
  <a href="遷移先のURL" class="transition-button">PUSH！</a>
</body>
```
`class="transition-button"`は、これまで解説してきたクラス`.transition-button`の設定を適用する指定。`class="transition-button"`を消すと、ただのテキストになります（下の画像）。
![4.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/a440035c-f96d-8f66-ea1c-36069c36791d.jpeg)


`遷移先のURL`には文字通り、遷移させたいURLを、「PUSH！」　にはボタンに表示させたいテキストを記載します。

# おわり
今まではネットで紹介されているコードをコピペして使うことが多く、仕組みはよく知らないままでしたが、今回調べてみると少しですが分かりました。