/* ============================================================
    勉強会(1)  見た目を作る
   ============================================================

    書き方

        セレクタ {
          プロパティ: 値;
        }

    セレクタで「どの要素に」、プロパティと値で「何をするか」を指定する。

        body      … body タグすべて
        #board    … id="board" が付いた要素（# は id）
        .note     … class="note" が付いた要素（. は class）

    色は #ffffff のような16進数、または white のような名前で書く。
    長さは 300px のようにピクセルで書く。

   ============================================================ */


/* ------------------------------------------------------------
    STEP 6   ページ全体
   ------------------------------------------------------------
    背景色と文字色、そして中身を中央に寄せる。

        body {
          background: #1a1a1a;
          color: #f0f0f0;
          font-family: sans-serif;
          text-align: center;
        }

    確認: 背景が暗くなり、文字が白く、中央に寄る。
          色は好きに変えてよい。
   ------------------------------------------------------------ */




/* ------------------------------------------------------------
    STEP 7   盤
   ------------------------------------------------------------
    HTML では見えなかった #board に、大きさと見た目を与える。
    使うプロパティは次の5つ。

        width             幅            300px
        height            高さ          400px
        background        背景色        好きな色
        border            枠            2px solid #666
        margin            外側の余白    20px auto

    margin の auto は「左右の余白を均等にする」という意味で、
    これで要素が中央に来る。

    確認: 盤が中央に表示される。
   ------------------------------------------------------------ */




/* ------------------------------------------------------------
    STEP 8   玉
   ------------------------------------------------------------
    #ball に大きさと色を与える。20px 四方くらい。
    書き方は STEP 7 と同じ要領。

    四角を丸くするには次を足す。

        border-radius: 50%;

    border-radius は角を丸めるプロパティで、
    50% にすると角が最大まで丸まって円になる。

    確認: 盤の中に丸が表示される。
   ------------------------------------------------------------ */




/* ------------------------------------------------------------
    STEP 9   タイマー・ボタン・説明文
   ------------------------------------------------------------
    #timer, #startBtn, .note の見た目を整える。
    ここは指定しないので、自分で決める。

    使えそうなプロパティ

        font-size        文字の大きさ        32px
        font-weight      文字の太さ          bold
        padding          内側の余白          10px 24px
        border-radius    角の丸み            6px
        border           枠                  none で消せる
        cursor           カーソルの形        pointer
        opacity          透明度              0.6

    確認: 自分が見せたい画面になっている。
   ------------------------------------------------------------ */




/* ============================================================
    完成したら公開する。

      1. GitHub の自分のリポジトリを開く
      2. Add file → Upload files
      3. index.html と style.css をドラッグして Commit
      4. 数十秒待って、自分の URL をスマホで開く

    この手順は次回 git を使って自動化する。
   ============================================================ */