Bootstrap

【Bootstrap4】ドットインストールを復習して学んだ内容まとめ

 
ひたすら独学で学んでいた僕ですが、30DAYSトライアルと出会い、「どんなスキルを身につけておくべきなのか」がわかった気がしました。
なんの指針もない独学より、はっきりとした道しるべを示してくれるので、本当に助かりました。
http://kaylife.wp.xdomain.jp/30daystrial/
 
Progateは何度も繰り返していたので、Bootstrapの基礎から始めることにしました。

まずはドットインストールのBootstrap4入門ですが、やってみると理解していない点がたくさん出てきます。
ドットインストールで学んだ内容をまとめておきたいと思います。
 

1、基本のナビゲーションメニューの作り方

ナビゲーションメニューの基本を学んでおけば、デザインをみたときに「こうやればいいんだ」とすぐにイメージが浮かびそうです。
すると、ヘッダーから手が止まることは無くなりますね。

See the Pen
agZLmg
by kei (@kei_01011)
on CodePen.


ここではわかりやすく色をつけてみました。

  <header>
    <div class="container">
<!--headerとcontainerで囲む-->
      <nav class="navbar navbar-expand-sm navbar-light">
<!---navにnavbarを宣言する->
<!--navbar-expandでレスポンシブにする-->
<!--navbar-lightで色を付ける-->
          <a href="#" class="navbar-brand">Logo</a>
<!--navbar-brandはロゴのクラス-->
        <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<!--buttonにnavbar-togglerクラスをつける-->
<!--toggerはナビバーを小さくしたときに表示するアイコンのこと-->
<!--data-toggleにcollapse-->
        <span class="navbar-toggler-icon"></span></button>
<!--navbar-toggler-iconでトグルボタンを表示-->
        <div class="collapse navbar-collapse" id="menu">
<!--classにcollapse、buttonのdata-targetとなるidをつける-->
          <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
          </ul>
        </div>
      </nav>
    </div>

 
全体のコードはこんな感じ。
一つずつ分解して解説していきます。

  1. コンテナーで囲む
  2. ナビバーを宣言し、レスポンシブにする
  3. ページタイトル(ロゴ)を指定する
  4. トグルを設置する
  5. ナビバーにメニューをセットする

 
 

①navをcontainerで囲む

  <header>
    <div class="container">
      <nav>
      </nav>
    </div>
</header>

containerで囲むことで、左右の余白を作ります。
また、headerをcontainerの外に出すことで、headerの背景は横幅いっぱいにしつつ、ナビゲーションバーは中央寄せにすることができます。
 
これはHTMLの基本中の基本なので、覚えておかないとですね。
 

②ナビバーを宣言し、レスポンシブにする

      <nav class="navbar navbar-expand-sm navbar-light bg-light">

ナビバーを宣言するには、クラスをつけます。
navbar → ナビバーを宣言
 
また、画面サイズに応じて、メニューを切り替えるために、nav要素のclass属性に「navbar-expand-(サイズ)」を指定します。
(サイズ)に入るのは、グリッドと同じようにsm,md-lg-xlを指定し、セットしたサイズ以上になるとナビゲーションバー上にメニューが表示されるようになります。

  • sm : 576px以上
  • md : 768px以上
  • lg : 992px以上
  • xl : 1200px以上

 
色をつけてみましたが、こんな感じになります。

See the Pen
NZrazz
by kei (@kei_01011)
on CodePen.


 

③ページタイトル(ロゴ)を指定する

See the Pen
NZraEB
by kei (@kei_01011)
on CodePen.


ページタイトルは、a要素に「navbar-brand」のclassをセットしてあげることで簡単に実装できます。
もちろん、画像ロゴの場合は、imgをaタグでマークアップすればOK。
 
 

④トグルを設置する

「トグル」とは、巷でいうハンバーガーメニューのことです。
画面サイズが小さい場合は、ナビバーのトグルをクリックすればメニューが表示されるようにします。

See the Pen
ydJPBd
by kei (@kei_01011)
on CodePen.


button要素に「navbar-toggler」のclassをつけます。
data-toggle属性:collapse
data-target属性:表示するメニューのidセレクターを指定(ここでは#menu)
 
この状態で、画面サイズを縮小するとトグルボタンが表示されるのがわかります。
「navbar-expand-sm」を指定しているので、画面サイズが576px以下になればトグルが出現するはずです。
 
しかし、ボタンをクリックしてもメニューが表示される状態ではありませんので、表示するメニュー部分を作っていきます。
 

⑤メニューをセットする

        <div class="collapse navbar-collapse" id="menu">
          <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
          </ul>
        </div>

メニューをセットしていきます。
ulタグで作っていきますが、divタグで全体を囲っていきます。
 
メニュー全体を囲む親要素のdivに対して「collapse」「navbar-collapse」のclass属性値をつけ、トグルをクリックしたときに表示させるため、「id=”menu”」とします。
それぞれに以下のclass名をつけて完成です。

ul:navbar-nav
li:nav-item
a:nav-link

完成版がこちらになります。
 

See the Pen
GbqOpx
by kei (@kei_01011)
on CodePen.


これが、ナビゲーションメニューの基本の作り方です。
ドットインストールをやって、ようやく理解した感じなので、基本のメニューについては自信がつきました。
 
 

2、gridシステムのcolの表示順を変える方法

よくLPで見かけるのが、右、左、右と画像とテキストが入れ替わるレイアウトです。文章では説明しにくいので、実際に書いてみました。

See the Pen
NZrwvV
by kei (@kei_01011)
on CodePen.


こんな奴です。
flexboxでも簡単にできるみたいですが、Bootstrapならもっと簡単でした。
colのクラス名に「order-(サイズ)-(順番)」を記述するだけ。
 
具体的には、order-sm-2と書けば、「smのサイズの時に2番目に表示する」という状態になります。
これで順番を指定してあげれば、画像とテキストの順番を自由に変えることができます。
 
 

まとめ:基本を抑えつつBootstrapのいいとこ取りをする

ドットインストールでは、Bootstrapの機能のみでサイトを作り上げましたが、そんなことってあんまりないそうです。
実際には、Bootstrapのグリッドシステムやナビゲーションメニューなどをうまく利用しつつ、CSSでデザインを整えるスキルが重要だと感じました。
 
Bootstrapの活用の仕方とかは、まじで経験だと思ったので、どんどんコードを書いていくしかないかなあと思っています。