【俺の50m走】初心にもどって解説するぜ 第二回 CSS編

【俺の50m走】初心にもどって解説するぜ
の第二回、CSS編です！

これはなんぞや

ということで、まだこのゲームについてわからない方は前回の記事をごらんください。

解説

コードの全文は？

<style>
h1 {
  text-align: center;
  margin-top: 20vh;
}

#player {
  position: absolute;
  bottom: 25;
}

#stage2 {
  position: absolute;
  bottom: 29;
  left: 1000;
  background-color: red;
}

#stage1 {
  position: absolute;
  bottom: 20;
  left: 1;
  background-color: blue;
  color: #fff;
}

#stage3 {
  position: absolute;
  bottom: 20;
  left: 200;
  background-color: brown;
}

#stage4 {
  position: absolute;
  bottom: 20;
  left: 400;
  background-color: brown;
}

#stage5 {
  position: absolute;
  bottom: 20;
  left: 600;
  background-color: brown;
}

#stage6 {
  position: absolute;
  bottom: 20;
  left: 800;
  background-color: brown;
}

#stagec {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  background-color: lightgreen;
  width: 100%;
  padding-top: 20px;
}

body {
  background-color: lightblue;
}

#board {
  display: none;
  position: absolute;
  padding: 20px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #fff;
  width: 60%;
  z-index: 1000;
}

#board2 {
  background-color: lightblue;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#page2 {
  color: #000;
  text-align: center;
  z-index: 1001;
  background-color: yellow;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#page3 {
  display: none;
}

.pitt {
  font-size: 25px;
  color: red;
}

@keyframes blinking {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.bli {
  color: red;
  animation: blinking 0.4s ease-in-out infinite alternate;
  font-weight: bold;
  font-size: 25px;
}

#text2 {
  border-radius: 5px;
  outline: none;
  border: none;
  padding: 10px 15px 10px 15px;
}

#btn {
  border-radius: 5px;
  outline: none;
  border: none;
  color: #fff;
  font-weight: bold;
  position: absolute;
  bottom: 1.5vh;
  right: 1.5vh;
  padding: 10px 15px 10px 15px;
  background-color: orange;
}

#btn2 {
  border-radius: 5px;
  outline: none;
  border: none;
  color: #fff;
  font-weight: bold;
  position: absolute;
  padding: 10px 15px 10px 15px;
  background-color: lightcoral;
}

</style>

分けてみていく

ステージと背景

  h1{text-align: center;margin-top:20vh;}
    #player{position:absolute;bottom:25;}
    #stage2{position:absolute;bottom:29;left:1000;background-color: red;}
    #stage1{position:absolute;bottom:20;left:1;background-color:blue;color:#fff;}
    #stage3{position:absolute;bottom:20;left:200;background-color: brown;}
    #stage4{position:absolute;bottom:20;left:400;background-color: brown;}
    #stage5{position:absolute;bottom:20;left:600;background-color: brown;}
    #stage6{position:absolute;bottom:20;left:800;background-color: brown;}
    #stagec{position:absolute;bottom:0;left:0;display:inline-block;background-color:lightgreen;width:100%;padding-top:20px;}
    body{background-color: lightblue;}

ここまでが、ステージと背景用のCSSです！
( h1{text-align: center;margin-top:20vh;}は、トップ画面用)

結果発表画面

#board {
  display: none;
  position: absolute;
  padding: 20px;
  left: 0;
  right:0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #fff;
  width: 60%;
  z-index: 1000;
}

#board2 {
  background-color: lightblue;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#page2 {
  color: #000;
  text-align: center;
  z-index: 1001;
  background-color: yellow;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#page3 {
  display: none;
}

.pitt {
  font-size: 25px;
  color: red;
}

と、ここまで #boardは、結果発表のモーダル画面で、

 display: none;/*最初は非表示*/
 /*ここからは、画面を上下左右余白なくピタッとつけるやつ*/
 position: absolute;
 padding: 20px;
 left: 0;
 right:0;
 top: 0;
 bottom: 0;
 

ポイントは

z-index: 1000;

で、これは要素が重なっている際などに指定した要素を手間に出すものです。
値が大きければ大きいほど前面に出てきます。

#board2
は、ゲーム画面を構成しています。シンプルに background-color: lightblue;で背景色を指定したりしています。
.pitt
は単に文字を赤色にしているだけです。

文字の点滅

ゲームの結果で文字が点滅してるだけでうれしい時ってありますよねあります。

@keyframes blinking {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.bli {
  color: red;
  animation: blinking 0.4s ease-in-out infinite alternate;
  font-weight: bold;
  font-size: 25px;
}

そこでこんな感じにして、bliっていうクラスを付ければ点滅させられます

後の残り

あとは、cssを完全に理解することにより解決するものとします。

#btnと#btn2は、ボタンの装飾です。

さ、お次はJavascript編へ！

お読み下さりありがとう。