30DAYSトライアルのまとめ【DAY13】

DAY13の課題は「Bootstrapでレイアウトを作ろう後編＋Bootstrapを使ってビジネスLP制作①」になります。

ドットインストールでのBootstrap学習を終わらせて、YoutubeのBootstrapチュートリアルでLP制作に入っていきます。

いつもと同じようにここで出てきた内容をまとめていきます。(今回はドットインストールで出てきた内容のみです)

タブメニューを作成する
ハンバーガーメニュー(レスポンシブなナビゲーションメニュー)を作成する
ツールチップを表示させる
まとめ

タブメニューを作成する

タブメニューを作成するには「nav」クラスを指定して実装していきます。

「nav」クラスはナビゲーションメニューを作成するためのクラスになります。「nav」クラスを指定しただけではよくある横並びのナビゲーションメニューになりますが、併せて「nav-tabs」クラスを指定することでタブメニューを作成することができます。

とはいえ単純に「nav」と[nav-tabs」クラスを指定すれば良いわけではないので、いつも通りcodepenで記述してみました。

See the Pen
Bootstrap_nav by Jyu2 (@Jyu2)
on CodePen.

一つめが「nav」クラスのみ指定した通常のナビゲーションメニュー、二つめが「nav」と「nav-tabs」クラスを指定したタブメニューになります。

タブメニューに必要なのは以下の通りです。

ulタグに「nav」「nav-tabs」クラスを指定する
liタグに「nav-item」クラスを指定する
liタグ内のaタグにhref属性に該当のタブのリンク先のIDを指定する
liタグ内のaタグに「nav-link」クラスを指定する
liタグ内のdata-toggle属性に「tab」を指定する
divタグ(上記ulタグの外)に「tab-content」クラスを指定する
「tab-content」クラスを指定したdivタグの中に「tab-link」クラスのIDを持つdivタグを用意し、「tab-pane」クラスを指定する
初期表示時に選択された状態にしておきたい「nav-link」クラス、「tab-pane」クラスに「active」classを追加する

これだけでタブメニューが作れるなんてほんとすごいのと、ありがたいですね。

ハンバーガーメニュー(レスポンシブなナビゲーションメニュー)を作成する

「nav」クラスでもナビゲーションメニューは作成できますが、タブメニューとかでない場合は「navbar」クラスでナビゲーションメニューを作成することになります。

ドットインストールではハンバーガーメニュー(横棒３本のアイコンをクリックするとメニューが出てくるやつ)を作成しますが、これも「navbar」クラスを使います。。

とりあえずcodepenで書いてみます。

See the Pen
Bootstrap_navbar by Jyu2 (@Jyu2)
on CodePen.

「nav」クラスのナビゲーションメニューと違うところは、「nav」クラスはulタグに指定していたのに対して「navbar」クラスはnavタグに指定します。

またcodepenの例をみてもらうと分かるように、「navbar」クラスと共に「navbar-expand」クラスを指定しないとメニューが横並びになりません。このことから「navbar」はデフォルトではメニューが縦並びになっており、「navbar-expand」クラスの指定でメニューが展開されることが分かります。

それと合わせて「navbar-brand」という会社のロゴなどを指定できるようなクラスが用意されています。

そこからハンバーガーメニューを作成するには以下のように指定します。

- navタグの「navbar-expand」クラスにメニューを展開するサイズを追加する(codepenの例では「navbar-expand-sm」にしています)
- buttonタグに「nabbar-toggler」クラスを指定し、data-toggle属性に「collapse」、data-target属性にハンバーガーメニューで展開するメニューのidを指定する。
- buttonタグ内にspanタグを用意し、「navbar-toggler-icon」クラスを指定する。(これによりハンバーガーメニューのアイコンを表示できる)
- divタグを用意しい、buttonタグのdata-target属性に指定したidと「collapse」「navbar-collapse」クラスを指定する

(「collapse」クラスを指定することでメニューの内容が非表示になる)

ulタグを用意し「navbar-nav」クラスを指定する
liタグを用意し「nav-item」クラスを指定する
liタグ内にaタグを用意し「nav-link」クラスを指定する

codepenで記述した例だと、menuは「collapse」クラスの指定で通常は非表示になっており、ハンバーガーメニューのアイコン(ボタン)がクリックされることで、メニューに対してメニューが縦に開くイベントが実行される。ブラウザのサイズがsm以上になると「navbar-expand」でメニューが展開されて横並びで表示される。というイメージで処理されてる感じですかね。