デモページ 卓球得点表 CSSフレームワークBLUMAを使用して画面の修正

デモページとして、今まで学習してきた内容をもとに、
卓球の得点表のようなものを作成していこうと思います。

また、下記ではロジックについてまとめています。
今回は、CSSフレームワークのBLUMAの使い方、
そして、CSSフレームワークを使ってサイトの体裁を整えていく方法についてまとめていきます。

https://qiita.com/shisshi_engineer/items/5e2d57a093db0323ca96

## 目次：

- [アプリの内容紹介](#アプリの内容紹介)
- [BULMA「CSSフレームワーク」を活用して画面を整える](#bulmacssフレームワークを活用して画面を整える)
- [BULMA「CSSフレームワーク」グリッドシステムを使用する](#bulmacssフレームワークグリッドシステムを使用する)
- [中身の修正](#中身の修正)

## アプリの内容紹介

プレイヤーを２人作ります。

そして、何点先取するかの点数を最初に決めます。

それぞれのプレイヤーの点数を増やしていき、最初に決めた点数に達したら、
勝った方のプレイヤーの得点の色が緑色に、負けた方のプレイヤーの得点の色が赤色に変化します。
また、ゲームが終了したら得点のボタンは無効化され、クリックできなくなります。


そして、リセットボタンだけが押せるようになり、リセットボタンをクリックすると、最初からやり直しができるようになります。
## Bulma「CSSフレームワーク」を活用して画面を整える

先ほどまで作成した簡素な得点表を、
CSSフレームワークのBlumaを使用して、体裁の整ったページに作成していこうと思います。

完成図：
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/da36916c-41fa-7527-8152-bd086e2350cd.png width = 60%>


BULUMA > Get Started > Overview > Starter template


まずは、BLUMAを読み込む為のリンクをHTMLのheadの中に挿入します。

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
```

次に、cardのコンポーネントをコピーしてHTMLの中に貼り付けます。
このcardの中身を修正して、完成に近づけていきます。

Compornents > Card > #Examples

#ExamplesのHTMLをコピーしてHTMLのbodyの直下に貼り付け。

そして、div class="container"の中に挿入します。

## BULMA「CSSフレームワーク」グリッドシステムを使用する

BULMA > CSS Library > Columns

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/94a6537d-ea1e-e298-68a4-ba75aad47be8.png width = 60%>

基本は、div class = "columns"で囲み、
その中でdiv class = "column"を作成してclassを変更して調整していきます。

#### コンテナの大きさの半分の大きさを取るようにする

```html
<div class = "column is-half"> 
```
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/afab8725-b340-7dcb-9a62-f992d7cca4e4.png width = 60%>


<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/c515b68a-87f0-9742-76f7-68bc53f0f65f.png width = 60%>

コンテナを中心に寄せる。

```html
<div class = "column is-half is-offset-one-quarter"> 
```

左右に25%ずつ余白を作ります。「is-offset-one-quarter」

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/811e5380-f142-7e56-e8af-22bf15c0c4c0.png width = 60%>

これで、BLUMAのグリッドシステムを使用して、自分の意図した場所に要素を配置することができました。

## 中身の修正

先ほど作成したカードの中身を修正し、
自分の作成したい卓球得点表の中身に変更していこうと思います。

#### タイトルの修正

```html
<p class="card-header-title">卓球得点表</p>
```

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/59dbcab9-b876-70bf-ff32-9b741fee1519.png width = 60%>

#### h1を挿入

```html
<div class="card-content">
    <div class="content">
        <h1 class="title is-1"><span id="p1Display">0</span> 対 <span id="p2Display">0</span></h1>
    </div>
</div>
```
CSS Library > Elements > Title
title is-1 classを適用し、見出しの大きさを変更しました。
```html
<h1 class="title is-1">Title 1</h1>
```

<img src  = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/f19e5d67-b226-072b-4462-ed293f698581.png width = 60%> 

#### テキストの挿入
```html
<p class="subtitle">
    下のボタンを押して得点を管理しよう
</p>
```
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/796d992b-7f23-a510-e2ac-f4f45520f489.png width = 60%>

#### Button要素に作成したロジックを対応させる

現状では、Save、Edit、Deleteとなっている部分を、
作成した卓球得点表のp1Buttton、p2Button、reset Buttonに修正していきます。

CSS Library > Elements > Button
⇨
上記の中から対応する色やサイズのclassを適用してボタンの見た目を修正していきます。

```html
<footer class="card-footer">
    <button id="p1Button" class="is-primary button card-footer-item is-large">+1 プレイヤー1</button>
    <button id="p2Button" class="is-info button card-footer-item is-large">+1 プレイヤー2</button>
    <button id="reset" class="is-danger button card-footer-item is-large">リセット</button>
</footer>
```
<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/4faf2968-d24f-f9ba-c56b-59382589eb54.png width = 60%>

#### セレクトボタンの修正

CSS Library > Form > Select > #Styles 

Rounded dropdownを適用していきます。

```html
<div class="select is-rounded">
    <select name="" id="winningScore">
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
    </select>
</div>
```

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/48f22c39-c98d-bd1d-5428-9750e853f171.png width= 60%>

#### セレクトボタンの前にテキストを追加

テキストはlabel要素で追加していきます。

```html
<label for="winningScore" class="label is-large is-inline">何点先取？</label>
```

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/67bc4aca-0005-2db9-2c04-abc320208b12.png width = 60%>

#### 画像の追加

画像はunsplashより著作権フリーの画像を拝借しております。

https://unsplash.com/ja/s/%E5%86%99%E7%9C%9F/%E5%8D%93%E7%90%83

<img src = https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3679750/6b4bc119-7e5f-da1b-5b3d-f66af08c4434.png width = 60%>

```html
<div class="card-image">
    <figure class="image is-2by1">
        <img src="https://images.unsplash.com/photo-1611251135345-18c56206b863?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8JUU1JThEJTkzJUU3JTkwJTgzfGVufDB8fDB8fHww" alt="">
    </figure>
</div>
```