プログラミング学習記録16〜bootstrapひと段落〜

##今日やったこと
- Udemyの「Web開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のセクション8の79~88

昨日の続きでbootstrapについて学習しました。

以下、パートごとにとったメモです。

####79.グリッドシステム１
####80.グリッドシステム２
####81.グリッドシステム３
####82.グリッドシステム4
グリッドシステムを使うと画面サイズの違うデバイスに対しても、いい感じにレイアウトできます。

グリッドシステムでは1つの行を12分割してレイアウトすることできます。

1つ分だったらcol-1(カラム１)
2つ分だったらcol-2
というように表記します。

colはcolumn(列)の略語です。

1行のcolの合計が12を超えると、次の行にかかります。

```html
<div class="row">
      <div class="col-xs-12 col-sm-6 col-md-3 bg-info">
        ぽん
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 bg-success">
        ぽん
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 bg-warning">
        ぽん
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 bg-danger">
        ぽん
      </div>
    </div>
```

PC、タブレット、スマホで表示形式が変わるように書きました。

<img width="1092" alt="スクリーンショット 2019-03-04 10.50.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/323324/ca5b7180-c197-fbe6-39b3-4eda9dd80488.png">

<img width="761" alt="スクリーンショット 2019-03-04 10.50.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/323324/7fbc6c82-56b7-c47e-b323-0933557b765f.png">

<img width="403" alt="スクリーンショット 2019-03-04 10.51.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/323324/7ee804f6-9ced-17a8-10f6-68b3585f7a23.png">




このようにclassに書き込むだけでレスポンシブ対応できるので、gridシステムはかなり便利です。

####83.実践：フォトギャラリー制作１
フォトギャラリーを作るための下準備をしました。

####84.実践：フォトギャラリー制作２
Unsplashで無料の画像を使う方法について解説されています。

無料の画像をランダムに表示することもできるので、とても便利です。

こちらのサイトに使い方が詳しく書かれています↓
 無料高品質画像サイトUNSPLASHとそのAPIの紹介（https://donsyoku.com/website/about-unsplash.html）


####85.実践：フォトギャラリー制作３
実際に画像を配置しました。

class=“imp-thumbnail”で画像に枠をつけられます。

b-◯（◯は1~5の数字) でmargin-bottomを指定することもできます。

また、Atomで***Commandキーを押しながらクリックすると選択するカーソルを増やせる***、という技も知りました。これは結構使えると思います。


####86.補足：フォントオーサム公式サイトについて
フォントオーサム公式サイトのURLが変わりました、という話が書いてあるだけです。

####87.実践：フォトギャラリーの制作４　フォントオーサムの導入

無料でアイコンが使えるサイトfontawesomeの使い方を学習しました。

導入方法はサルワカさんのサイトがわかりやすいです。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
（https://saruwakakun.com/html-css/basic/font-awesome)


####88.実践：フォトギャラリーの制作５仕上げ
フォトギャラリーページを完成させました。

簡単なものでも自分の手を動かして完成させると、達成感が出るのでオススメです。

できたページはこんな感じです↓

<img width="1440" alt="スクリーンショット 2019-03-04 14.45.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/323324/f1b2bd2b-833b-f07c-8a93-5db4491eb8b1.png">

<img width="451" alt="スクリーンショット 2019-03-04 14.45.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/323324/f3a940dc-c098-128a-5e65-44ed001619bd.png">



ソースコード(HTMLとCSS）↓

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>猫のフォトギャラリー</title>
    <meta name="description" content="かわいい猫のフォトギャラリーです。">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="css/gallery.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a href="gallery.html" class="navbar-brand"><i class="far fa-image mr-1"></i>Cats</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a href="gallery.html" class="nav-link active">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">New</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <main class="container">
      <div class="jumbotron">
        <h1><i class="fas fa-camera-retro"></i>フォトギャラリー</h1>
        <p>かわいい猫たちのフォトギャラリーをご覧ください。</p>
      </div>
      <div class="row">
        <div class="col-lg-4 col-sm-6 mb-3">
          <div class="img-thumbnail">
            <img src="https://source.unsplash.com/C0zDWAPFT9A" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-3">
          <div class="img-thumbnail">
            <img src="https://source.unsplash.com/5GQszN6vyI8" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-3">
          <div class="img-thumbnail">
            <img src="https://source.unsplash.com/egfS7HzgKcc" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-3">
          <div class="img-thumbnail">
            <img src="https://source.unsplash.com/e-S23SJzFqs" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-3">
          <div class="img-thumbnail">
            <img src="https://source.unsplash.com/Hnwm8ktAd6E" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-3">
          <div class="img-thumbnail">
            <img src="https://source.unsplash.com/gb3gq2Nh5xE" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-3">
          <div class="img-thumbnail">
            <img src="https://source.unsplash.com/XKhV1c4oV7c" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-3">
          <div class="img-thumbnail">
            <img src="https://source.unsplash.com/7qau-YIXn90" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6 mb-3">
          <div class="img-thumbnail">
            <img src="https://source.unsplash.com/QTe-MHNUrz4" alt="">
          </div>
        </div>
      </div>
    </main>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>
```


```css
@charset "UTF-8";

html{
  font-size:16px;
}

body{
  padding-top:5rem;
  font-family:"Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
}

img{
  width:100%;
}
```

cssはこれだけしか記述していないのですが、Bootstrapを使うことにより、このような華やかなページを作ることができました。

しかも、レスポンシブ対応しています。
お得感ありますね。


##セクション8Bootstrap4入門全体の感想
テックアカデミーのフロントエンドコースでbootstrapnには触れていたので、知っている内容がほとんどでした。

しかし、ハンバーガーメニューの作り方や画像の枠の作り方などは知らなかったので、知れてよかったです。

Bootstrapを使うとだいぶ楽にページをレスポンシブ対応できるので、どんどん使っていきたいですね。

特に理解できないところはなかったので、次のセクションに進みます。

<br>
ということで、明日からも引き続きプログラミング学習頑張ります。

おわり