LoginSignup
4
8

More than 5 years have passed since last update.

@blurblue(blurblue)

スーパーファミコンのコントローラーをHTMLとCSSで作ってみた

Posted at

（だいぶ前に作ったのだけど）
sfc.png

HTML

<div class="wrapper">
    <div class="controller">
        <div class="ci"><div class="logomark"><span class="part1"></span><span class="part2"></span><span class="part3"></span><span class="part4"></span></div>Nintendo<br>SUPER FAMICOM</div>
        <div class="subBtn selectBtn"></div>
        <div class="subBtn startBtn"></div>
        <div class="leftArea">
        <div class="clossKey">
        <div class="btn top"></div>
        <div class="btn top_right"></div>
        <div class="btn right"></div>
        <div class="btn right_bottom"></div>
        <div class="btn bottom"></div>
        <div class="btn bottom_left"></div>
        <div class="btn left"></div>
        <div class="btn left_top"></div>
        </div>
        </div>
        <div class="rightArea">
        <div class="btnBlock btnXY">
        <div class="btn btnX"></div>
        <div class="btn btnY"></div>
        </div>
        <div class="btnBlock btnAB">
        <div class="btn btnA"></div>
        <div class="btn btnB"></div>
        </div>
        </div>
        <div class="btnTop btnL"></div>
        <div class="btnTop btnR"></div>
    </div>
</div>

CSS

body {
    margin: 0;
    line-height: 1.5;
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 12px;
    -webkit-text-size-adjust: 100%;
}

div, p, ul, ol, dl, li, dt, dd {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

.wrapper {
    width: 550px;
    overflow: hidden;
    height: 500px;
}
/* ===== controller ===== */
.controller {
    position: relative;
    top: 30px;
    left: 130px;
    width: 272px;
    height: 180px;
    background-color: #b2b3b4;
    color: #4b4665;
    font-family: monospace;
    z-index: 2;
}
.controller:before,
.controller:after {
    position: absolute;
    display: block;
    width: 208px;
    height: 208px;
    content: " ";
    background-color: #b2b3b4;
    border-radius: 104px;
    z-index: 1;
}
.controller:before {
    top: 0;
    left: -104px;
}
.controller:after {
    top: 0;
    right: -104px;
}

.controller .ci {
    position: absolute;
    top: 8px;
    left: 44px;
    width: 160px;
    height: 2em;
    line-height: 1.2;
    padding-top: 10px;
    padding-left: 34px;
    color: #4f4b64;
    font-size: 12px;
    z-index: 3;
}
.controller .logomark span {
    position: absolute;
    display: block;
    background-color: #4f4b64;
    z-index: 3;
}
.controller .logomark .part1 {
    top: 20px;
    left: 2px;
    width: 10px;
    height: 8px;
    border-radius: 10px / 8px;
    z-index: 5;
}
.controller .logomark .part2 {
    top: 26px;
    left: 11px;
    width: 10px;
    height: 8px;
    border-radius: 10px / 8px;
    z-index: 5;
}
.controller .logomark .part3 {
    top: 14px;
    left: 8px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    z-index: 3;
}
.controller .logomark .part3:before {
    position: absolute;
    left: -4px;
    bottom: -4px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #b2b3b4;
    border-radius: 10px;
    z-index: 4;
    content: " ";
}
.controller .logomark .part4 {
    top: 20px;
    left: 17px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    z-index: 3;
}
.controller .logomark .part4:before {
    position: absolute;
    left: -4px;
    bottom: -4px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #b2b3b4;
    border-radius: 10px;
    z-index: 4;
    content: " ";
}

.controller .leftArea {
    position: absolute;
    top: 44px;
    left: -64px;
    width: 120px;
    height: 120px;
    background-color: #bbbcbd;
    border-radius: 60px;
    box-shadow: 1px 1px 1px #8b8d8c inset;
    z-index: 3;
}
.controller .clossKey {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 84px;
    height: 84px;
    z-index: 3;
}
.controller .clossKey:before,
.controller .clossKey .btn {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: #505856;
    content: " ";
    z-index: 4;
}
.controller .clossKey:before {
    top: 26px;
    left: 26px;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    z-index: 5;
}
.controller .clossKey:after {
    position: absolute;
    top: 32px;
    left: 32px;
    width: 20px;
    height: 20px;
    background-color: #4a5250;
    border-radius: 10px;
    box-shadow: -3px -3px 5px #6a726f inset;
    content: " ";
    z-index: 6;
}
.controller .clossKey .btn:before {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-bottom: 20px solid #4a5250;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    margin-left: 14px;
    content: " ";
    pointer-events: none;
    z-index: 5;
}
.controller .clossKey .btn:after {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-bottom: 16px solid #505856;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    margin-left: 10px;
    content: " ";
    pointer-events: none;
    z-index: 6;
}
.controller .clossKey .top {
    top: 0;
    left: 28px;
    box-shadow: 1px 0 1px #000;
}
.controller .clossKey .top:active {
    box-shadow: 1px 1px 1px #000 inset;
}
.controller .clossKey .top:before {
    top: 4px;
    left: -8px;
}
.controller .clossKey .top:after {
    top: 6px;
    left: 0;
}
.controller .clossKey .right {
    top: 28px;
    left: 56px;
    box-shadow: 1px 1px 1px #000;
}
.controller .clossKey .right:active {
    box-shadow: 1px 1px 1px #000 inset;
}
.controller .clossKey .right:before {
    top: 4px;
    left: -8px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.controller .clossKey .right:after {
    top: 6px;
    left: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.controller .clossKey .bottom {
    bottom: 0;
    left: 28px;
    box-shadow: 1px 1px 1px #000;
}
.controller .clossKey .bottom:active {
    box-shadow: 1px 1px 1px #000 inset;
}
.controller .clossKey .bottom:before {
    top: 4px;
    left: -8px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.controller .clossKey .bottom:after {
    top: 6px;
    left: 0;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.controller .clossKey .left {
    top: 28px;
    left: 0;
    box-shadow: 0 1px 1px #000;
}
.controller .clossKey .left:active {
    box-shadow: 1px 1px 1px #000 inset;
}
.controller .clossKey .left:before {
    top: 4px;
    left: -8px;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
.controller .clossKey .left:after {
    top: 6px;
    left: 0;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.controller .clossKey .top_right,
.controller .clossKey .right_bottom,
.controller .clossKey .bottom_left,
.controller .clossKey .left_top {
    background: none;
    box-shadow: none;
}

.controller .clossKey .top_right:before,
.controller .clossKey .top_right:after,
.controller .clossKey .right_bottom:before,
.controller .clossKey .right_bottom:after,
.controller .clossKey .bottom_left:before,
.controller .clossKey .bottom_left:after,
.controller .clossKey .left_top:before,
.controller .clossKey .left_top:after {
    display: none;
}

.controller .clossKey .top_right {
    top: 0;
    right: -2px;
    -webkit-border-top-right-radius: 42px;
    border-top-right-radius: 42px;
}
.controller .clossKey .right_bottom {
    bottom: -2px;
    right: -2px;
    -webkit-border-bottom-right-radius: 42px;
    border-bottom-right-radius: 42px;
}
.controller .clossKey .bottom_left {
    bottom: 0;
    left: 0;
    -webkit-border-bottom-left-radius: 42px;
    border-bottom-left-radius: 42px;
}
.controller .clossKey .left_top {
    top: 0;
    left: 0;
    -webkit-border-top-left-radius: 42px;
    border-top-left-radius: 42px;
}

.controller .rightArea {
    position: absolute;
    top: 12px;
    right: -92px;
    width: 180px;
    height: 180px;
    background-color: #8b9597;
    border-radius: 90px;
    z-index: 3;
}

.controller .subBtn {
    position: absolute;
    width: 40px;
    height: 10px;
    background-color: #515755;
    border-radius: 10px;
    box-shadow: 1px -1px 0 #000;
    -webkit-transform: rotate(145deg);
    transform: rotate(145deg);
    z-index: 3;
}

.controller .subBtn:active {
    box-shadow: 0 -1px 1px #000 inset;
}

.controller .rightArea .btnBlock {
    position: absolute;
    width: 120px;
    height: 52px;
    background-color: #afb3b1;
    border-radius: 40px;
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
}

.controller .rightArea .btnXY {
    top: 40px;
    right: 48px;
}

.controller .rightArea .btnAB {
    bottom: 40px;
    right: 10px;
}

.controller .rightArea .btn {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    box-shadow: 0 -1px 2px #000;
}

.controller .rightArea .btn:active {
    box-shadow: 0 -1px 2px #666 inset;
}

.controller .rightArea .btnA {
    bottom: 6px;
    left: 6px;
    background-color: #c92c13;
}

.controller .rightArea .btnB {
    top: 6px;
    right: 6px;
    background-color: #e9bc25;
}

.controller .rightArea .btnX {
    bottom: 6px;
    left: 6px;
    background-color: #2547b3;
}

.controller .rightArea .btnY {
    top: 6px;
    right: 6px;
    background-color: #098762;
}

.controller .btnTop {
    position: absolute;
    top: -6px;
    width: 60px;
    height: 10px;
    background-color: #b2b3b4;
    border-radius: 60px / 10px;
    z-index: 1;
}
.controller .btnTop.btnL {
    left: 0;
}
.controller .btnTop.btnL:active {
    margin-top: 1px;
}
.controller .btnTop.btnR {
    right: 0;
}
.controller .btnTop.btnR:active {
    margin-top: 1px;
}


.controller .selectBtn {
    top: 120px;
    left: 80px;
}

.controller .startBtn {
    top: 120px;
    left: 130px;
}

.controller .selectBtn:before,
.controller .startBtn:before {
    position: absolute;
    display: block;
    width: 10em;
    height: 1em;
    font-size: 11px;
    -webkit-transform: rotate(-145deg);
    transform: rotate(-145deg);
    pointer-events: none;
}

.controller .selectBtn:before {
    bottom: 3.8em;
    left: -4.5em;
    content: "SELECT";
}

.controller .startBtn:before {
    bottom: 3.8em;
    left: -4.5em;
    content: "START";
}

これにJS載せてボタンポチポチできるようにすればゲームできるかも。
http://www.blurblue.com/sfc/

4
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
8