Edited at

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

More than 1 year has passed since last update.


はじめに

タイトルのままです。

cssでスーパーファミコン風のコントローラーを書いたので、作り方をまとめました。


完成イメージ

こんな感じです。


準備するもの

・cssファイル × 1

・htmlファイル × 1

・やる気 × 1


下準備


ボタンの下ごしらえ

buttonタグに適用するクラスを用意しておきます。

.btn {

border-style: none;
cursor: pointer;
}

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

<button class="btn">ボタン</button>

画面の表示はこんな感じです。

枠線がなくなっているのがわかるかと思います。


パーツを十字配置するための部品を作成

コントローラーを書く際に、ボタンを十字に配置するケースが2回出てきます。

後で楽できるように、ボタンを十字に配置するパーツを先に作っておくことにします。


ボタンを十字に配置するパーツの作り方

今回はGridレイアウトを利用することにします。

まずは3×3のGridレイアウトを作成します。

.cross-layout {

display: grid;
grid-template-columns: 30px 30px 30px;
grid-template-rows: 30px 30px 30px;
}

次に、作成したGridレイアウトの各セルにパーツを配置するためのクラスを用意しておきます。

.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;
}

これでパーツは出来上がりです。

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

<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>

画面の表示はこんな感じです。


コントローラの右側を作る


ボタンを作る

丸い形のボタンを作ります。

「border-radius」でボタンの角を丸くします。

Xボタン、Yボタン、Aボタン、Bボタンの4種類のボタンがあるので、4つボタンを作ります。


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>


ボタンを十字に配置する

下準備で作った「十字に配置する部品」を使って、ボタンを十字に配置します。


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>


4つのボタンの周りを円形の灰色で囲む

こんな感じにします。


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>


さらに薄い灰色の円形で囲む

こんな感じにします。

これでコントローラの右側が完成です。


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」を使用します。


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>


十字キーを十字に配置する

下ごしらえで作った「十字に配置する部品」を使って十字キーを配置します。


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>


十字キーを灰色の円形で囲む

こんな感じにします。

これでコントローラーの左側も完成です。


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」を指定します。


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>



スタートボタン・セレクトボタンを二つ並べたパーツを作ります。

こんな感じで並べます。

二つのボタンがくっつかないように、間にマージンを入れてます。


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を追記するのを忘れないようにしましょう。


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とスタート・セレクトボタンを一つのパーツにまとめる

上部中央にロゴを、下部中央にスタート・セレクトボタンを配置したパーツを作ります。

こんな感じです。


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」で指定します。


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">の下に、2行追加。


index.html

<div class="spf-controller">

<button class="btn ear ear-left"></button>
<button class="btn ear ear-right"></button>

完成版のイメージはこんな感じ。

以上です。