第17回 JavaScript 「三」、「✕」みたいなメニューアイコン作成（CSSです）

# はじめに
Webサイトによくでてくるアイコンがあります。
漢字の「三」みたいなものとか、クローズする「ｘ」みたいなものです。
こういったアイコンはjpgなどの普通の画像ではなく、SVGで作られたものかなと思いました。
が、今回はこれを`span`要素で作っていきたいと思います。

SVGはよく知らないので、そのうち調べてみようと思います。

# 今回実施する内容
今回は、Webでよく出てくる漢字の「三」みたいなメニューのアイコンや、閉じるときに表示される「✕」みたいなアイコンを、`span`要素を使用して作成したいと思います。
![icon.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/09bbfd44-ba41-b9ef-b881-5e03e3a0ffec.gif)

# ソースコード(Git Hub)
https://github.com/Build-Mount/JS_17_icon

# 環境
OS: Windows 11 JP (64bit)
Microsoft Edge:バージョン 123.0.2420.65 (公式ビルド) (64 ビット)

# 参考


# 用語

# 「三」、「✕」みたいなメニューアイコンを作る
ソースは以下の通り。

<details>
<summary>icon.html</summary>

```html:icon.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>icon</title>
    <link rel="stylesheet" href="icon.css" type="text/css">
</head>
<body>
    <div id="menuIcon">
        <span class="bar barTop"></span>
        <span class="bar barMiddle"></span>
        <span class="bar barBottom"></span>
    </div>

    <div id="closeIcon">
        <span class="closeBar UpRight"></span>
        <span class="closeBar DownRight"></span>
    </div>

    <div id="closeSmallIcon">
        <span class="closeSmallBar UpRight"></span>
        <span class="closeSmallBar DownRight"></span>
    </div>
</body>
</html>
```
</details>

<details>
<summary>icon.css</summary>

```css:icon.css
#menuIcon {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 32px;
  height: 32px;
  background-color:#ccc;
}

.bar {
  position: absolute;
  left: 6px;
  width: 20px;
  height: 2px;
  background-color: #333;
}

.barTop {
  top: 6px;
}

.barMiddle {
  top: 15px;
}

.barBottom {
  top: 24px;
}

#closeIcon {
  position: absolute;
  border-radius: 50%;
  top: 100px;
  left: 50px;
  width: 32px;
  height: 32px;
  background-color: #ccc;
}

.closeBar {
  position: absolute;
  top: 15px;
  left: 6px;
  width: 20px;
  height: 2px;
  background-color: #333;
}

.UpRight {
  transform: rotate(-45deg)
}

.DownRight {
  transform: rotate(45deg)
}

#closeSmallIcon {
  position: absolute;
  border-radius: 50%;
  top: 100px;
  left: 100px;
  width: 13px;
  height: 13px;
  background-color: #ccc;
}

.closeSmallBar {
  position: absolute;
  top: 6px;
  left: 2px;
  width: 9px;
  height: 1px;
  background-color:#333;
}
```
</details>

## 「三」みたいなアイコンを作る
「三」みたいなアイコンは、細長いバー`span`要素を３つ並べれば作成できますので、作っていきたいと思います。

まずは、HTMLです。

```html:html
    <div id="menuIcon">
        <span class="bar barTop"></span>
        <span class="bar barMiddle"></span>
        <span class="bar barBottom"></span>
    </div>
```
`div`要素でアイコンの外枠を作って、中に`span`要素を３つ作ります。
`span`要素にはクラスを２つ付与します。

- １つ目の`span`要素には、細長いバーを作成する`bar`クラスと、細長いバーの位置を一番上に設定する`barTop`クラス。
- ２つ目の`span`要素には、細長いバーを作成する`bar`クラスと、細長いバーの位置を真ん中に設定する`barMiddle`クラス。
- ３つ目の`span`要素には、細長いバーを作成する`bar`クラスと、細長いバーの位置を一番下に設定する`barBottom`クラス。

続いて、CSSです。

```css:css
#menuIcon {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 32px;
  height: 32px;
  background-color:#ccc;
}

.bar {
  position: absolute;
  left: 6px;
  width: 20px;
  height: 2px;
  background-color: #333;
}

.barTop {
  top: 6px;
}

.barMiddle {
  top: 15px;
}

.barBottom {
  top: 24px;
}
```

上記のCSSは以下のような形を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/ecbebf48-d27d-9076-267e-4093485c62db.png)

`#menuIcon`は、idセレクターです。
「三」アイコン用の外枠を作成します。
`position: absolute;`、`top`、`left`は外枠の場所の指定です。
`width`、`height`はアイコンのサイズを`32px`で設定します。
背景色は、`background-color:#ccc;`で灰色を設定します。

`.bar`は、クラスセレクターです。
「三」アイコンの一つ一つの細長いバー用のクラスです。
`position: absolute;`で#menuIconからの絶対位置で設定するようにします。
図で示した通り、`left: 6px`でX軸方向を設定します。
`width: 20px;`、`height: 2px`で細長いバーの幅と高さを設定し、`background-color: #333;`で色を設定します。

`.barTop`は、クラスセレクターです。
「三」アイコンの一番上の細長いバーのクラスです。
図で示した通り、`top: 6px`で細長いバーのY軸方向を設定します。

`.barMiddle`は、クラスセレクターです。
「三」アイコンの真ん中の細長いバーのクラスです。
図で示した通り、`top: 15px`で細長いバーのY軸方向を設定します。

`.barBottom`は、クラスセレクターです。
「三」アイコンの一番下の細長いバーのクラスです。
図で示した通り、`top: 24px`で細長いバーのY軸方向を設定します。

## 「✕」みたいなアイコンを作る
「✕」みたいなアイコンは、細長いバーspan要素を２つ並べて、回転させれば作成できますので、作っていきたいと思います。

まずは、HTMLです。

```html:html
    <div id="closeIcon">
        <span class="closeBar UpRight"></span>
        <span class="closeBar DownRight"></span>
    </div>

    <div id="closeSmallIcon">
        <span class="closeSmallBar UpRight"></span>
        <span class="closeSmallBar DownRight"></span>
    </div>
```
今回は、「✕」みたいなアイコンは、大きいサイズとと小さいサイズの２つを作成します。
大きいサイズのアイコンは、`div id="closeIcon"で作成し、小さいサイズのアイコンは、div id="closeSmallIcon"で作成します。

大きいサイズのアイコンについてですが、`div`要素でアイコンの外枠を作って、中に`span`要素を２つ作ります。
`span`要素にはクラスを２つ付与します。

- １つ目の`span`要素には、細長いバーを作成する`closeBar`クラスと、右上がりに回転する`UpRight`クラス。
- ２つ目の`span`要素には、細長いバーを作成する`closeBar`クラスと、右下がりに回転する`DownRight`クラス。

小さいサイズのアイコンも大きいサイズのアイコンと同じように作成します。

続いて、CSSです。

```css:css
#closeIcon {
  position: absolute;
  border-radius: 50%;
  top: 100px;
  left: 50px;
  width: 32px;
  height: 32px;
  background-color: #ccc;
}

.closeBar {
  position: absolute;
  top: 15px;
  left: 6px;
  width: 20px;
  height: 2px;
  background-color: #333;
}

.UpRight {
  transform: rotate(-45deg)
}

.DownRight {
  transform: rotate(45deg)
}

#closeSmallIcon {
  position: absolute;
  border-radius: 50%;
  top: 100px;
  left: 100px;
  width: 17px;
  height: 17px;
  background-color: #ccc;
}

.closeSmallBar {
  position: absolute;
  top: 8px;
  left: 2px;
  width: 13px;
  height: 1px;
  background-color:#333;
}
```

上記のCSSは以下のような形を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/7d9d5a4c-37c0-3bbb-fac6-7b7f64b44931.png)

今回は、「✕」みたいなアイコンは、大きいサイズとと小さいサイズの２つを作成します。
大きいサイズのアイコンは、`div id="closeIcon"で作成し、小さいサイズのアイコンは、div id="closeSmallIcon"で作成します。

`#closeIcon`は、idセレクターです。
「✕」アイコン用の外枠を作成します。
`position: absolute;`、`top`、`left`は外枠の場所の指定です。
`border-radius: 50%`は、外枠を円の形にします。
`width`、`height`はアイコンのサイズを`32px`で設定します。
背景色は、`background-color:#ccc;`で灰色を設定します。

`.closeBar`は、クラスセレクターです。
「✕」アイコンの一つ一つの細長いバー用のクラスです。
`position: absolute;`で#closeIconからの絶対位置で設定するようにします。
図で示した点線の細長いバーの通り、`top: 15px`、`left: 6px`でX軸方向、および、Y軸報告を設定します。
`width: 20px;`、`height: 2px`で細長いバーの幅と高さを設定し、`background-color: #333;`で色を設定します。

`.UpRight`は、クラスセレクターです。
「✕」アイコンの右上がりに回転するクラスです。
-45度で回転します。

`.DownRight`は、クラスセレクターです。
「✕」アイコンの右下がりに回転するクラスです。
45度で回転します。

小さいサイズのアイコンも大きいサイズのアイコンと同じように作成します。

# おわりに
今回は、「三」、「✕」みたいなメニューアイコンを`span`要素を使用して作成しました。
少しずつですが、色々と理解できてきましたので、第16回でも書きましたが、次回以降これを利用したソースを作りたいと思います。