30DAYSトライアル お勉強

【デイトラ】Bootstrap学習【30DAYSトライアル DAY11】

30DAYSトライアル

ドットインストールでの学習ということだったのですが、私にはちょっと合わず、無料分までVScodeを利用して進めました!
ただ、ドットインストール無料分だけだと不十分だと思い、TECHACADEMYでもBootstrapについて学習し、実際にコードを書いて動かしてみました!

ドットインストールでBootstrap

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
      .box-container {
       width : 100px;
       height: 100px;
       background: #ddd; 
       margin-bottom:  5px;
      }
    </style>
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="box-container">
      <div class="bg-primary w-25 h-50">BOX</div>
    </div>
    <div class="box-container">
      <div class="bg-success w-75 h-100">BOX</div>
    </div>
    <h2 class="font-weight-normal display-4">Hallo Bootstrap</h2>
    <!-- テキスト中央寄せ -->
    <div class="text-center">しゅがは!</div>
    <!-- テキスト中央寄せ+背景色 -->
    <div class="text-center bg-danger">しゅがはRed!</div>
    <div class="text-center bg-success text-warning">しゅがは!</div>
    <div class="text-center bg-info ">しゅがは!</div>
    <div class="text-center bg-warning  font-weight-bold">しゅがは!</div>

Bootstrap ドットインストールの演習 デイトラ

実際に動かしてみて、BootstrapをCSSとして定義していればクラス呼び出してあげるだけでこんなに簡単に定義できちゃうんだ!ってちょっと感動。
これは便利!!

あと、「Ctrl + /」でコメントアウトさせて何を定義したのかメモしていきました。
marginについてはもう何度目かの復習をしたよね(笑)。

TECHACADEMYでBootstrap

<div class="table-responsive">
        <table class="table table-striped table-bordered text-nowrap">
          <thead>
            <tr>
              <th>#</th>
              <th>名前</th>
              <th>出身地</th>
              <th>趣味</th>
              <th>作品名</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
                <td>一ノ瀬 トキヤ</td>
                <td>福岡</td>
                <td>読書</td>
                <td>うたの☆プリンスさまっ♪</td>
            </tr>
            <tr>
              <th scope="row">2</th>
                <td>一ノ瀬 志希</td>
                <td>岩手</td>
                <td>観察・アヤしい実験・失踪</td>
                <td>アイドルマスターシンデレラガールズ</td>
            </tr>
            <tr>
              <th scope="row">3</th>
                <td>宮本 フレデリカ</td>
                <td>パリ</td>
                <td>ファッション</td>
                <td>アイドルマスターシンデレラガールズ</td>
            </tr>
          </tbody>
        </table>
      </div>

Bootstrap TECHACADEMYの演習 デイトラ テーブル

  • table-striped
    ⇒テーブルの行に交互に色を付けます
  • table-bordered
    ⇒テーブルに枠線を付けます
  • text-nowrap
    ⇒テキストが折り返さないようにします

『table-responsive』が、追加しても全然適用されないから調べたら『text-nowrap』も追加しないとダメでした。

<!-- デフォルト -->
      <button type="button" class="btn btn-danger btn-lg">Danger</button>
      <button type="button" class="btn btn-success btn-lg">Success</button>
      <!-- アウトライン -->
      <button type="button" class="btn btn-outline-warning btn-sm">Warning</button>
      <button type="button" class="btn btn-outline-info btn-sm">Info</button>

      <a class="btn btn-primary" href="#" role="button">Link</a>
      <input class="btn btn-primary" type="reset" value="Reset"> ss

Bootstrap TECHACADEMYの演習 ボタン デイトラ

アウトラインのボタンはマウスをのせると以下のように変化します!

Bootstrap TECHACADEMYの演習 ボタン デイトラ

Bootstrap TECHACADEMYの演習 ボタン デイトラ

<form>
        <div class="form-group">
          <label for="exampleInputEmail1">メールアドレス</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">パスワード</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">ファイルアップロード</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> チェックする
          </label>
        </div>
        <button type="submit" class="btn btn-default">送信</button>
      </form>

Bootstrap TECHACADEMYの演習 フォーム デイトラ

Gridレイアウトについて

公式リファレンスの日本語言い回しが理解不能で読む気がせず、ググり力強化のために検索の旅へ。
公式もざっと流し見したけど何を言っているのかよくわからなかった←

グリッドシステムとは

横の線で分割された「行」のエリアとは、縦の線で分割された「列」のエリアで構成されています。「列」は12列まで構成できます。

1行に対して何列分使ってボックスを配置するかを決めてレイアウトしていきます。

グリッドレイアウトの構造

①全体を囲むボックスを作る

<div class="container">
  <!-- この中にグリッドレイアウトを入れる -->
</div>

②作りたい分の行を作る

ここでは5行のグリッドレイアウトを作成することにします。

<div class="container">
  <div class="row"><!-- 1行目 --></div>
  <div class="row"><!-- 2行目 --></div>
  <div class="row"><!-- 3行目 --></div>
  <div class="row"><!-- 4行目 --></div>
  <div class="row"><!-- 5行目 --></div>
</div>

1行に対して何列分使うかを指定する

最大で指定できる列は12列です。

<div class="container">
      <div class="row"><!-- 1行目 -->
        <div class="col-2 bg-danger">col-2</div>
        <div class="col-10 bg-warning">col-10</div>
      </div>
      <div class="row"><!-- 2行目 -->
        <!-- 3カラムレイアウト -->
        <div class="col-3 bg-warning">col-3</div>
        <div class="col-4 bg-danger">col-4</div>
        <div class="col-5 bg-warning">col-5</div>
      </div>
      <div class="row"><!-- 3行目 -->
        <!-- 4カラムレイアウト -->
        <div class="col-3 bg-danger">col-3</div>
        <div class="col-3 bg-warning">col-3</div>
        <div class="col-3 bg-danger">col-3</div>
        <div class="col-3 bg-warning">col-3</div>
      </div>
      <div class="row"><!-- 4行目 -->
        <div class="col-5 bg-warning">col-5</div>
        <div class="col-7 bg-danger">col-7</div>
      </div>
      <div class="row"><!-- 5行目 -->
        <div class="col-6 bg-danger">col-6</div>
        <div class="col-6 bg-warning">col-6</div>
      </div>
    </div>

bootstrap グリッドレイアウト

グリッドレイアウトのレスポンシブ化

  • col-: スマホ〜
  • col-sm-: タブレット〜
  • col-md-: 大きめタブレット〜
  • col-lg-: PC〜
  • col-xl-: 大きいPC〜

また以下のような例だと、列数は12といわれているのがタブレット表示時には24列で表示できてしまうので、12列にこだわる必要はないのかも?

<div class="container">
      <div class="row">
        <div class="col-md-2 col-sm-4 bg-danger">.col-md-2 .col-sm-4</div>
        <div class="col-md-2 col-sm-4 bg-warning">.col-md-2 .col-sm-4</div>
        <div class="col-md-2 col-sm-4 bg-danger">.col-md-2 .col-sm-4</div>
        <div class="col-md-2 col-sm-4 bg-warning">.col-md-2 .col-sm-4</div>
        <div class="col-md-2 col-sm-4 bg-danger">.col-md-2 .col-sm-4</div>
        <div class="col-md-2 col-sm-4 bg-warning">.col-md-2 .col-sm-4</div>
      </div>
    </div>

グリッドレイアウトが使われているサイト

この方法でグリッドレイアウトといわれているサイトをいくつか見てみたんですけど、上記のサイトのように格子状のようになるサイトが全然見つからず...。
なんでしょうね...。CSSに「grid」って書いてないと格子状にならないのかしら。うーむ。

Googleで「グリッドレイアウト 例」で調べるとたくさん出てくるのでチェックしてみてください!

参考にしたサイト

詰まったところ

全角の空欄が入ってしまっていてレイアウトが崩れてしまっていたのだが、それに中々気づけなかった。。

-30DAYSトライアル, お勉強
-,

© 2021 文系女子とプログラミング