知識ゼロでもHTML.CSSでアラートとボタンを作る方法

HTML.CSSのコピーアンドペースト手順の備忘録です。

###大枠な流れ・Bootstrap使い方まとめ

1. リンク先コピー：[CSSのみ](https://getbootstrap.jp/)
2. headerコピー：[Components の　Alerts](https://getbootstrap.jp/docs/4.5/components/alerts/)
3. ボタンコピー：[Components の　Buttons](https://getbootstrap.jp/docs/4.5/components/buttons/)
4. 全体の中央寄せ：[Layout の　container](https://getbootstrap.jp/docs/4.5/layout/overview/)
5. ボタン真ん中寄せ：[Utilities の Flex](https://getbootstrap.jp/docs/4.5/utilities/flex/)
6. スペースのバランスを整える：[Utilities の Spacing「Exaples」 ](https://getbootstrap.jp/docs/4.5/utilities/spacing/)



####Step1 フォルダを作る
HTML.CSSを書いていくフォルダを作ります。

```
~$ mkdir test
```

####Step2 "html5boilerplate"フォルダをダウンロード＆コピー

1. [html5boilerplate](https://html5boilerplate.com/)　ダウンロード
2. ダウンロードフォルダの中へ移動
3. html5boilerplateフォルダを開く
4. index.htmlのみコピー![スクリーンショット 2020-12-07 1.31.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/80671f18-2099-dd22-bff8-8ccfd5e73a9b.png)
5. 最初に作ったtestフォルダの中に貼り付ける

####Step3 HTML.CSS実行

1. テストフォルダのindex.htmlをエディタで開く
2. `<body></body>`で囲まれている中身を消す
3. [Bootstrap](https://getbootstrap.jp/)検索
4. ダウンロード又は下の方にある`CSSのみ`と書いてある所のコードを全部コピー![スクリーンショット 2020-12-07 9.01.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/482bf3ba-05d6-d0d0-ee4a-049238308ea6.png)
5. `<head></head>`の19行目あたりに貼り付け![スクリーンショット 2020-12-07 11.17.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/adb2d4e1-921b-ea4b-ede0-4fe39bca0d0c.png)


6. index.htmlファイルを検索タブにドラック＆ドロップしてタブに表示する（CSSのコードの結果が見れる）

####Step4 headerをつける

1. [Bootstrap](https://getbootstrap.jp/docs/4.5/components/alerts/)の`ドキュメント`をクリック
2. 左側メニューの`Components`をクリック
3. `Alerts`をクリックし好きなコードをコピー![スクリーンショット 2020-12-07 9.23.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/6caea3c0-d2ef-6fb8-1f69-c2a5f4073c17.png)
4. index.htmlファイル`<body>`のなかに貼り付け


####Step5 ボタンをつける

1. [Buttons](https://getbootstrap.jp/docs/4.5/components/buttons/)をクリック
2. 好きなボタンコードをコピー![スクリーンショット 2020-12-07 9.30.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/f45fe269-3528-0751-4418-f52c0134bc83.png)
3. index.htmlファイル`<body>内の<div class="alert alert-info" role="alert">A simple info alert—check it out!</div>`の下あたりに貼り付け
4. ４つ同じコードを打つ![スクリーンショット 2020-12-07 9.45.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/b68bb707-37bd-9ba8-29e9-87a0ae438640.png)


####Step6 全体を中央に寄せる

1. [Layout](https://getbootstrap.jp/docs/4.5/layout/overview/)をクリックする
2. コンテナーコピー![スクリーンショット 2020-12-07 9.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/3f51c434-5bfb-0c7e-05d8-7a6e42fa4d4d.png)
3. index.htmlファイルの`<Body>`タグすぐ下に貼り付けて、`</div>`の部分のみ`</Body>`のすぐ上に移動させる

```
例　
<body>
　<div class="container">
    <!-- Content here -->

    <div class="mt-3 alert alert-info" role="alert">
    A simple info alert—check it out!
    </div>
      <button type="button" class="ml-1 btn btn-secondary">Secondary</button>
      <button type="button" class="ml-1 btn btn-secondary">Secondary</button>
      <button type="button" class="ml-1 btn btn-secondary">Secondary</button>
      <button type="button" class="ml-1 btn btn-secondary">Secondary</button>

　</div>
</body>
```
####Step7 ボタンを真ん中に寄せる
1. [Utilities](https://getbootstrap.jp/docs/4.5/utilities/borders/)の[Flex](https://getbootstrap.jp/docs/4.5/utilities/flex/)をクリック
2. 好きなレイアウトのコードをコピー![スクリーンショット 2020-12-07 10.12.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/2c73d584-d8f4-fe98-6606-07d90f55edad.png)
3. index.htmlファイルの`<Body>`内`button`のすぐ上に貼り付け

```
例
<div class="d-flex justify-content-center">
      <button type="button" class="ml-1 btn btn-secondary">Secondary</button>
      <button type="button" class="ml-1 btn btn-secondary">Secondary</button>
      <button type="button" class="ml-1 btn btn-secondary">Secondary</button>
      <button type="button" class="ml-1 btn btn-secondary">Secondary</button>
</div>
```
4. index.htmlタブをリロードして確認

####Step 7 スペースのバランスを整える

1. [Spacing](https://getbootstrap.jp/docs/4.5/utilities/spacing/)をクリック
2. スクロールをし「Exaples」の`ml-1`をコピー
3. index.htmlファイルの`<Body>`内`<button>`のclass内に入れていく![スクリーンショット 2020-12-07 10.33.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/5e0ba8a9-8bca-17a6-6bf4-1ef5d642c4be.png)
4. alartにも同様に入れていく![スクリーンショット 2020-12-07 10.36.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/21a73706-9e7a-adb4-b425-fbc905c2ca4a.png)
5. index.htmlタブをリロードして確認(色は異なる場合があります)![スクリーンショット 2020-12-07 10.38.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741863/fd6e8dda-28bc-8f94-ad5c-6ad364062781.png)

完成です。参考になれば幸いです。

参考にした動画:[【JavaScript超入門講座】わずか50分で知識ゼロから基礎をマスター！](https://youtu.be/QCjFPSO96RU)