30DAYSトライアル1st

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

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

DAY13課題

ドットインストールでの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」クラスでナビゲーションメニューを作成することになります。

ドットインストールではハンバーガーメニュー(横棒3本のアイコンをクリックするとメニューが出てくるやつ)を作成しますが、これも「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」でメニューが展開されて横並びで表示される。というイメージで処理されてる感じですかね。

ツールチップを表示させる

ツールチップ(マウスカーソルを当てるとちょっとした説明が出てくるやつ)の表示の手順です。

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

  • ツールチップを表示させたいテキストをspanタグで囲む
  • sapnタグのdata-toggle属性に「tooltip」、title属性にツールチップに表示したテキストを記述
  • ツールチップを表示する場所を指定したい場合は、data-placemente属性に場所(top/right/bottom/left)
  • bodyタグの最後にcodepenに記述しているjQueryを記述する

クラスやdata-toggle属性などの指定だけではツールチップを表示させることはできずに、jQueryを記述する必要があるというところに注意が必要です。

まとめ

  • 「nav」と「navbar」を混同してしまわないように注意する
  • ツールチップはjQueryを記述する必要がある
  • collapseとかの説明はないので、Bootstrapの公式ドキュメントをみて説明を見るのも大事
  • 動画をみながらのコーディングはEmmetを駆使してついていく
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す