CSSでスーパーファミコン風のコントローラーを書いた

# はじめに
タイトルのままです。
cssでスーパーファミコン風のコントローラーを書いたので、作り方をまとめました。
# 完成イメージ
こんな感じです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/c997a0c3-1b6f-c707-7564-a5b5786e50c7.png" width="50%">
# 準備するもの
・cssファイル × 1
・htmlファイル × 1
・やる気 × 1
# 下準備
##ボタンの下ごしらえ
buttonタグに適用するクラスを用意しておきます。

```css
.btn {
    border-style: none;
    cursor: pointer;
}
```

使い方はこんな感じです。

```html
<button class="btn">ボタン</button>
```
画面の表示はこんな感じです。
枠線がなくなっているのがわかるかと思います。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/7fdefd6a-7ad2-ebd3-7ee4-021ff85b8713.png" width="30%">

## パーツを十字配置するための部品を作成
コントローラーを書く際に、ボタンを十字に配置するケースが２回出てきます。
後で楽できるように、ボタンを十字に配置するパーツを先に作っておくことにします。

### ボタンを十字に配置するパーツの作り方
今回はGridレイアウトを利用することにします。
まずは3×3のGridレイアウトを作成します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/3f81f2d5-0acc-d6dd-476e-08bff940e006.png" width="50%">

```css
.cross-layout {
    display: grid;
    grid-template-columns: 30px 30px 30px;
    grid-template-rows: 30px 30px 30px;
}
```

次に、作成したGridレイアウトの各セルにパーツを配置するためのクラスを用意しておきます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/fdcd6d87-81af-8e4c-8bbc-a516df475652.png" width="50%">

```css
.cross-layout {
    display: grid;
    grid-template-columns: 30px 30px 30px;
    grid-template-rows: 30px 30px 30px;
}

.cross-layout .cross-layout-position-top {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.cross-layout .cross-layout-position-left {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

.cross-layout .cross-layout-position-center {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.cross-layout .cross-layout-position-right {
    grid-row: 2 / 3;
    grid-column: 3/4;
}

.cross-layout .cross-layout-position-bottom {
    grid-row: 3 / 4;
    grid-column: 2/3;
}
```

これでパーツは出来上がりです。
使い方はこんな感じです。

```html
<div class="cross-layout">
	<div class="position-top">上</div>
	<div class="position-left">左</div>
	<div class="position-right">右</div>
	<div class="position-bottom">下</div>
	<div class="position-center">中</div>
</div>
```
画面の表示はこんな感じです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/b30da36f-a74a-2849-6a4f-93804a84f352.png" width="30%">

## コントローラの右側を作る
### ボタンを作る
丸い形のボタンを作ります。
「border-radius」でボタンの角を丸くします。
Xボタン、Yボタン、Aボタン、Bボタンの４種類のボタンがあるので、４つボタンを作ります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/ceedde57-41a3-ef03-8f68-e41fb64f29ad.png" width="50%">

```style.css
.abxy-btn {
    border-radius: 50%;

    width: 30px;
    height: 30px;
    color: white;
}

.btn-x { background-color: blue; }
.btn-y { background-color: green; }
.btn-a { background-color: red; }
.btn-b { background-color: yellow; }
```

```index.html
<button class="btn abxy-btn btn-x">X</button>
<button class="btn abxy-btn btn-y">Y</button>
<button class="btn abxy-btn btn-a">A</button>
<button class="btn abxy-btn btn-b">B</button>
```

### ボタンを十字に配置する
下準備で作った「十字に配置する部品」を使って、ボタンを十字に配置します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/bc859912-c6ad-040a-6e2c-d933940a62ed.png" width="40%">

```index.html
<div class="cross-layout">
    <button class="btn abxy-btn position-top btn-x">X</button>
    <button class="btn abxy-btn position-left btn-y">Y</button>
    <button class="btn abxy-btn position-right btn-a">A</button>
    <button class="btn abxy-btn position-bottom btn-b">B</button>
</div>
```
### ４つのボタンの周りを円形の灰色で囲む
こんな感じにします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/363a2497-09a2-7f7b-1a82-dd510b5f54fa.png" width="40%">

```style.css
.abxy-btn-set {
    display: inline-block;
    padding: 10px;
    background-color: rgba(66, 86, 123, 0.5);
    border-radius: 50%;
}
```

```index.html
<div class="abxy-btn-set">
    <div class="cross-layout">
        <button class="btn abxy-btn position-top btn-x">X</button>
        <button class="btn abxy-btn position-left btn-y">Y</button>
        <button class="btn abxy-btn position-right btn-a">A</button>
        <button class="btn abxy-btn position-bottom btn-b">B</button>
    </div>
</div>
```
### さらに薄い灰色の円形で囲む
こんな感じにします。
これでコントローラの右側が完成です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/0448946d-e41a-f312-c48c-56d4495f4e83.png" width="40%">

```style.css
.controller-right {
    display: inline-block;
    background-color: rgb(229, 227, 250);
    padding: 20px;
    border-radius: 50%;
}
```

```index.html
<div class="controller-right">
    <div class="abxy-btn-set">
        <div class="cross-layout">
            <button class="btn abxy-btn position-top btn-x">X</button>
            <button class="btn abxy-btn position-left btn-y">Y</button>
            <button class="btn abxy-btn position-right btn-a">A</button>
            <button class="btn abxy-btn position-bottom btn-b">B</button>
        </div>
    </div>
</div>
```
##コントローラの左側を作る
###十字キーを作る
十字キーの上下左右、および真ん中のボタンをつくります。
上下左右のボタンのマークは「▲」という文字を回転させて作ります。
文字の回転は、「transform: rotate」を使用します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/0ac84a01-1fb9-347c-7a6a-2875c4f3f1d3.png" width="50%">

```style.css
.cross-key-btn {
    width: 30px;
    height: 30px;
    background-color: rgba(66, 86, 123, 0.5);
}

.left-mark {
    display: block;
    transform: rotate(-90deg);
}

.right-mark {
    display: block;
    transform: rotate(90deg);
}

.bottom-mark {
    display: block;
    transform: rotate(180deg);
}
```

```index.html
<button class="btn cross-key-btn"><span class="top-mark">▲</span></button>
<button class="btn cross-key-btn"><span class="left-mark">▲</span></button>
<button class="btn cross-key-btn"><span class="center-mark">●</span></button>
<button class="btn cross-key-btn"><span class="right-mark">▲</span></button>
<button class="btn cross-key-btn"><span class="bottom-mark">▲</span></button>
```
### 十字キーを十字に配置する
下ごしらえで作った「十字に配置する部品」を使って十字キーを配置します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/9df048ce-c5fe-c77c-0ae2-da5a11a58007.png" width="50%">

```index.html
<div class="cross-layout">
    <button class="position-top btn cross-key-btn"><span class="top-mark">▲</span></button>
    <button class="position-left btn cross-key-btn"><span class="left-mark">▲</span></button>
    <button class="position-center btn cross-key-btn"><span class="center-mark">●</span></button>
    <button class="position-right btn cross-key-btn"><span class="right-mark">▲</span></button>
    <button class="position-bottom btn cross-key-btn"><span class="bottom-mark">▲</span></button>
</div>
```

### 十字キーを灰色の円形で囲む
こんな感じにします。
これでコントローラーの左側も完成です。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/6a2583d5-76b6-2a1c-d111-65ec4cc4a52b.png" width="40%">

```style.css
.controller-left {
    display: inline-block;
    background-color: rgb(229, 227, 250);
    padding: 30px;
    border-radius: 50%;
}
```

```index.html
<div class="controller-left">
    <div class="cross-layout">
        <button class="position-top btn cross-key-btn"><span class="top-mark">▲</span></button>
        <button class="position-left btn cross-key-btn"><span class="left-mark">▲</span></button>
        <button class="position-center btn cross-key-btn"><span class="center-mark">●</span></button>
        <button class="position-right btn cross-key-btn"><span class="right-mark">▲</span></button>
        <button class="position-bottom btn cross-key-btn"><span class="bottom-mark">▲</span></button>
    </div>
</div>
```

## コントローラの真ん中を作る
### スタートボタン・セレクトボタンを作る
縦中のオブジェクトを作って、少し斜めに傾けます。
オブジェクトを斜めにするには「transform:rotate」を指定します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/16d6e5cb-3a74-5d9a-8a9e-573e0b92cc5d.png" width="30%">

```style.css
.selectstart-btn {
    width: 10px;
    height: 35px;
    border-radius: 15%;
    background-color: rgba(66, 86, 123, 0.5);

    transform: rotate(30deg);
}
```

```index.html
<button class="btn selectstart-btn"></button>
```

### スタートボタン・セレクトボタンを二つ並べたパーツを作ります。
こんな感じで並べます。
二つのボタンがくっつかないように、間にマージンを入れてます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/d76b22ea-56d7-032d-ac5c-4d154b3387b7.png" width="30%">

```sytle.css
.selectstart-btn:first-child {
    margin-right: 20px;
}
```

```index.html
<div class="selectstart-btn-set">
    <button class="btn selectstart-btn"></button>
    <button class="btn selectstart-btn"></button>
</div>
```
### ロゴの文字列を書くパーツを作ります。
こんな感じです。
適当にGoogle Fontsからフォントを選んで指定しているだけです。
Google Fontsを使うので、html側のヘッダータグの中に対象のフォントのlinkを追記するのを忘れないようにしましょう。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/a972b850-bcbc-8970-5ac2-714412ede30b.png" width="50%">

```style.css
.logo-msg { font-family: 'Mina', sans-serif; }
```

```index.html
<span class="logo-msg">Controller</span>
```
Google Fontsを使うため、下記の一文をhtmlのヘッダーに追加。

```index.html
<!-- ヘッダー部分 -->
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">
```

### Logoとスタート・セレクトボタンを一つのパーツにまとめる
上部中央にロゴを、下部中央にスタート・セレクトボタンを配置したパーツを作ります。
こんな感じです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/2e813f3c-9662-e756-cb0f-78ecec995ae5.png" width="50%">

```style.css
.controller-center {
    width: 220px;
    height: 130px;
    background-color: rgb(229, 227, 250);
}

.controller-center .logo-msg {
    display: block;
    width: 140px;
    margin: auto;
    padding-top: 20px;
    text-align: center;

    font-size: 0.8em;
    color: gray;
}

.controller-center .selectstart-btn-set{
    display: block;
    width: 140px;
    text-align: center;
    margin: auto;
    margin-top: 40px;
}
```

```index.html
<div class="controller-center">
    <span class="logo-msg">Controller</span>
    <div class="selectstart-btn-set">
        <button class="btn selectstart-btn"></button>
        <button class="btn selectstart-btn"></button>
    </div>
</div>
```

## コントローラの左側と右側と真ん中の部品をくっつける
これまで作ってきた左側と右側と真ん中をくっつけてコントローラを完成させます。
「display:flex」を使って各部品を横に並べたうえで、真ん中の部品の左右のマージンにマイナスを指定して、少し各部品が重なるように配置します。
重ねた各部品の重なり順は「z-index」で指定します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/73037cc7-3804-7c00-379e-c43764a13d44.png" width="50%">

```style.css
.spf-controller {
    display: flex;
}

.spf-controller .controller-center {
    margin-left: -80px;
    margin-right: -80px;
}

.spf-controller .controller-center { z-index:1;}
.spf-controller .controller-left { z-index: 2; }
.spf-controller .controller-right { z-index: 2; }
```

```index.html
<div class="spf-controller">
    <div class="controller-left">
        <div class="cross-layout">
            <button class="position-top btn cross-key-btn"><span class="top-mark">▲</span></button>
            <button class="position-left btn cross-key-btn"><span class="left-mark">▲</span></button>
            <button class="position-center btn cross-key-btn"><span class="center-mark">●</span></button>
            <button class="position-right btn cross-key-btn"><span class="right-mark">▲</span></button>
            <button class="position-bottom btn cross-key-btn"><span class="bottom-mark">▲</span></button>
        </div>
    </div>
    <div class="controller-center">
        <span class="logo-msg">Controller</span>
        <div class="selectstart-btn-set">
            <button class="btn selectstart-btn"></button>
            <button class="btn selectstart-btn"></button>
        </div>
    </div>
    <div class="controller-right">
        <div class="abxy-btn-set">
            <div class="cross-layout">
                <button class="btn abxy-btn position-top btn-x">X</button>
                <button class="btn abxy-btn position-left btn-y">Y</button>
                <button class="btn abxy-btn position-right btn-a">A</button>
                <button class="btn abxy-btn position-bottom btn-b">B</button>
            </div>
        </div>
    </div>
</div>
```

# おまけ
CSSの全体像はこんな感じです。

```style.css
/** 下準備_ボタン **/

.btn {
    border-style: none;
    cursor: pointer;
}

/** 下準備_十字配置部品 **/

.cross-layout {
    display: grid;
    grid-template-columns: 30px 30px 30px;
    grid-template-rows: 30px 30px 30px;
}

.cross-layout .position-top {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.cross-layout .position-left {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

.cross-layout .position-center {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.cross-layout .position-right {
    grid-row: 2 / 3;
    grid-column: 3/4;
}

.cross-layout .position-bottom {
    grid-row: 3 / 4;
    grid-column: 2/3;
}


/**　コントローラーの右側_ABXYボタン**/

.abxy-btn {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: white;
}

.btn-x {
    background-color: blue;
}

.btn-y {
    background-color: green;
}

.btn-a {
    background-color: red;
}

.btn-b {
    background-color: yellow;
}

/**　コントローラーの右側_ABXYボタンを灰色の円形で囲む**/

.abxy-btn-set {
    display: inline-block;
    padding: 10px;
    background-color: rgba(66, 86, 123, 0.5);
    border-radius: 50%;
}

/**　コントローラーの右側_ABXYボタンを灰色の円形で囲んだものをさらに灰色の円形で囲む**/

.controller-right {
    display: inline-block;
    background-color: rgb(229, 227, 250);
    padding: 20px;
    border-radius: 50%;
}


/**　コントローラーの左側_十字キー**/

.cross-key-btn {
    width: 30px;
    height: 30px;
    background-color: rgba(66, 86, 123, 0.5);
}

.left-mark {
    display: block;
    transform: rotate(-90deg);
}

.right-mark {
    display: block;
    transform: rotate(90deg);
}

.bottom-mark {
    display: block;
    transform: rotate(180deg);
}

/**　コントローラーの左側_十字キーを灰色の円形で囲む**/

.controller-left {
    display: inline-block;
    background-color: rgb(229, 227, 250);
    padding: 30px;
    border-radius: 50%;
}

/**　コントローラーの真ん中_スタートボタン(セレクトボタン)**/

.selectstart-btn {
    width: 10px;
    height: 35px;
    border-radius: 15%;
    background-color: rgba(66, 86, 123, 0.5);

    transform: rotate(30deg);
}

/**　コントローラーの真ん中_スタートボタンとセレクトボタンを並べる**/

.selectstart-btn:first-child {
    margin-right: 20px;
}

/**　コントローラーの真ん中_Logoを書く領域を定義**/

.logo-msg {
    font-family: 'Mina', sans-serif;
}

/**　コントローラーの真ん中_スタートボタン・セレクトボタンとLogoを書く領域を一つにまとめる**/

.controller-center {
    width: 220px;
    height: 130px;
    background-color: rgb(229, 227, 250);
}

.controller-center .logo-msg {
    display: block;
    width: 140px;
    margin: auto;
    padding-top: 20px;
    text-align: center;

    font-size: 0.8em;
    color: gray;
}

.controller-center .selectstart-btn-set {
    display: block;
    width: 140px;
    text-align: center;
    margin: auto;
    margin-top: 40px;
}

/**　コントローラーの左側と真ん中と右側をくっつける**/

.spf-controller {
    display: flex;
}

.spf-controller .controller-center {
    margin-left: -80px;
    margin-right: -80px;
}

.spf-controller .controller-center {
    z-index: 1;
}

.spf-controller .controller-left {
    z-index: 2;
}

.spf-controller .controller-right {
    z-index: 2;
}
```

# (2018/03/24追記) RボタンとLボタンを付ける
コメントをいただきましたので。
RボタンとLボタンをつけたい場合は、cssファイルとhtmlファイルに下記の修正を加えてください。

cssファイルに下記を追記。

```style.css
/** 追記_RボタンLボタン **/
.ear {
    position: absolute;

    width: 80px;
    height: 40px;

    background-color: rgba(66, 86, 123, 0.5);

    border-top-right-radius: 30%;
    border-top-left-radius: 30%;
}

.ear-left {
    transform: rotate(-30deg);
    top: 0px;
    left: 0px;
}

.ear-right {
    transform: rotate(30deg);
    top: 0px;
    right: 0px;
}

.spf-controller {
    position: relative;
    width:360px;
    
    margin:30px 30px;
}
```

htmlファイルの＜div class="spf-controller"＞の下に、２行追加。

```index.html
<div class="spf-controller">
    <button class="btn ear ear-left"></button>
    <button class="btn ear ear-right"></button>
```

完成版のイメージはこんな感じ。
<img src="https://qiita-image-store.s3.amazonaws.com/0/178845/f77a9af7-60b8-28b5-d008-f6e4830e1114.png" width="50%">

以上です。