ダッシュで奪取

元SIerだけどWebエンジニアになりたい!

【CSS】計算機(の見た目)作った

calc
ガラケーでぽちぽちHTML打っていた世代なので、CSSにめちゃくちゃ苦手意識を持っていたのですが…いざ触ってみたらたのしくなってきてしまいました。

サンプルページ
※見た目だけなので、まだ中身はありません。

配色はScheme Colorさんからお借りしました。
可愛い色だらけでワクワクする…!

目次

  1. やりたいこと
  2. 全体像
  3. HTML
  4. CSS
  5. ひとこと

1.やりたいこと

  • 計算機を作りたい
  • モチベーションを上げるために、見た目から入りたい
  • iOSの計算機の見た目が好きなので、それを参考に作成

2. 全体像

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/style_calc.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="format-detection"
      content="telephone=no, email=no, address=no"
    />
    <title>けいさんき</title>
  </head>
  <body>
    <div class="container">
      <div class="calculator">
        <div class="display"><span id="display_text">1234567890</span></div>
        <div class="button">
          <button type="button" class="action_btn">AC</button>
          <button type="button" class="action_btn">+/-</button>
          <button type="button" class="action_btn">%</button>
          <button type="button" class="symbol_btn">÷</button>
          <button type="button" class="number_btn">7</button>
          <button type="button" class="number_btn">8</button>
          <button type="button" class="number_btn">9</button>
          <button type="button" class="symbol_btn">×</button>
          <button type="button" class="number_btn">4</button>
          <button type="button" class="number_btn">5</button>
          <button type="button" class="number_btn">6</button>
          <button type="button" class="symbol_btn"></button>
          <button type="button" class="number_btn">1</button>
          <button type="button" class="number_btn">2</button>
          <button type="button" class="number_btn">3</button>
          <button type="button" class="symbol_btn"></button>
          <button type="button" class="number_btn long_btn">0</button>
          <button type="button" class="number_btn">.</button>
          <button type="button" class="symbol_btn"></button>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

*:focus {
  outline: none; /* chromeで表示される青枠を消す */
}

body {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* - - - - - - - - - - - - - 電卓本体 - - - - - - - - - - - - */
.container {
  width: 380px;
  margin: auto; /* 左右のマージンを自動で中央寄せ */
}

/* 電卓本体 */
.calculator {
  background-color: #fff;
}

/* 電卓画面 */
.display {
  position: relative;
  width: 366px;
  height: 100px;
  margin: 5px;
  border-radius: 10px;
  font-size: 50px;
  text-align: right;
  color: #000;
  background-color: #ccc;
}

/* 電卓文字 */
#display_text {
  position: absolute; /* 位置指定の基準にする */
  right: 0; /* 基準位置の右から0px*/
  bottom: 0; /* 基準位置の下から0px */
  margin-right: 10px;
  color: #000;
}

/* - - - - - - - - - - - - - ボタン - - - - - - - - - - - - - */
button {
  width: 80px;
  height: 80px;
  margin: 5px;
  padding: 0;
  border-style: none; /* ボタンの周りの枠線を消す */
  border-radius: 10%; /* ボタンを丸くする */
}

/* ACボタンとか */
.action_btn {
  font-size: 30px;
  color: #000;
  background-color: #fdd937;
}

.action_btn:hover {
  animation: action_color 0.4s;
}

@keyframes action_color {
  0% {
    background-color: #fdd937;
  }
  50% {
    background-color: #fff4c5;
  }
  100% {
    background-color: #fdd937;
  }
}

/* 四則演算ボタン */
.symbol_btn {
  font-size: 32px;
  color: #fff;
  background-color: #f57653;
}

.symbol_btn:hover {
  animation: symbol_color 0.4s;
}

@keyframes symbol_color {
  0% {
    background-color: #f57653;
  }
  50% {
    background-color: #f8ae9a;
  }
  100% {
    background-color: #f57653;
  }
}

/* 数字ボタン */
.number_btn {
  font-size: 36px;
  background-color: #fbf5df;
}

.number_btn:hover {
  animation: number_color 0.4s;
}

@keyframes number_color {
  0% {
    background-color: #fbf5df;
  }
  50% {
    background-color: #ffe585;
  }
  100% {
    background-color: #fbf5df;
  }
}

/* 長いボタン */
.long_btn {
  width: 176px;
  border-radius: 10%;
}

3.HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

幅をデバイスの幅に合わせるおまじない記述。

<meta name="format-detection" content="telephone=no, email=no, address=no" />

手持ちのiPhoneで確認したところ、計算機の数字部分が電話番号リンクになってしまいました。
これではあんまりなので、スマホの自動リンクを無効化。

ボタンのクラスは深く考えず、とりあえず色で分けました。

4.CSS

*:focus {
  outline: none; /* chromeで表示される青枠を消す */
}

chromeで確認したところ、全てのボタンに青い枠が表示されてしまいました。
これもあんまりなので、無効化。

※うまくいった!と喜んでいたのですが、キーボード操作の場合、どこにカーソルがあるのか分からなくなってしまうみたいなので、他に良いやり方がないか探しています…

電卓部分

/* 電卓画面 */
.display {
  position: relative;
  width: 366px;
  height: 100px;
  margin: 5px;
  border-radius: 10px;
  font-size: 50px;
  text-align: right;
  color: #000;
  background-color: #ccc;
}

/* 電卓文字 */
#display_text {
  position: absolute; /* 位置指定の基準にする */
  right: 0; /* 基準位置の右から0px*/
  bottom: 0; /* 基準位置の下から0px */
  margin-right: 10px;
  color: #000;
}

電卓の背景と文字は別々に配置の設定をしたかったので、要素を分けました。
position: relativeで灰色の画面の方を基準に設定し、文字(数字?)の方でrightbuttomを使って右下に表示。

ボタン

button {
  width: 80px;
  height: 80px;
  margin: 5px;
  padding: 0;
  border-style: none; /* ボタンの周りの枠線を消す */
  border-radius: 10%; /* ボタンを丸くする */
}

border-radiusでいっぺんに4箇所ぶんの角が丸くなります。プロパティの値50%で丸(メモ)。

左上だけ丸くするとか、右上はちょっと丸くする・右下は少し丸くする等個別設定もできるみたいです。

/* ACボタンとか */
.action_btn {
  font-size: 30px;
  color: #000;
  background-color: #fdd937;
}

.action_btn:hover {
  animation: action_color 0.4s;
}

@keyframes action_color {
  0% {
    background-color: #fdd937;
  }
  50% {
    background-color: #fff4c5;
  }
  100% {
    background-color: #fdd937;
  }
}

iOSの電卓ではボタンを押した時にふわっと色が変わるので、それっぽい感じにしたかった…

最初はマウスカーソルを乗せた時の:hoverに直接背景色を設定していたのですが どうもスマホでの見た目がいまいちだったので、前回使用した@keyframesで徐々に色を変えるアニメーションを付けました。

/* 長いボタン */
.long_btn {
  width: 176px;
  border-radius: 10%;
}

0のボタンだけ横長にしたかったので、専用のクラスを付けました。
CSSは後に書いた方が強くなるので、最後に記述。

5.ひとこと

今まで借りてきたテンプレートの色をちょっといじるぐらいだったので、初めて1からCSS書きました。楽しかった…

次は電卓の中身を作っていきます!