Glacial Webwork : 駆け出し未満のデザイナー(自称)のお勉強ブログ。

【サンプルサイト付き】Bootstrap4をささっと導入しよう

では、早速ですがソースコードの解説を簡単にしていきます!
詳しく書きすぎると記事が非常に長くなってしまうので、本当に簡潔な内容にとどめています。ですが、要はHTMLとCSSを普通に使っているだけなので、初心者でもBootstrap4を数ヶ月使っていれば自然と慣れてくると思います。

headタグ内

Bootstrap4を読み込んでいること以外は普通のサイトと特に変わりはありません。必要に応じて、metaタグなどを追加していきましょう。
style.cssにBootstrap4をアレンジした内容や、装飾を記述しています。

navタグ内

サイトのナビゲーションを載せるスペースです。
私なりにシンプルにアレンジしたので、通常のBootstrap4とは少し状況が異なる点があります。個人的にBootstrapのデフォルトのナビゲーションって複雑すぎると思います・・・。

ナビゲーションバー~Bootstrap4移行ガイド

  • SEO対策にh1を用意
  • その下にサイトのタイトルを掲載(今考えると<p>タグで挟むべきだったかも)
  • 背景色や文字色は余白は.navbarで設定できる
  • 簡略化のため、見出しやメニューは全部中央寄せ(.navbar {flex-direction: column;}で対応した)

アイキャッチ

サイトの顔となる箇所です。Bootstrap4のジャンボトロンを使ってみました。
スライドショーを実装するようなケースもよくありますが、今回は固定の背景画像を1枚載せるだけにしています。ジャンボトロンの中にコンテナ(div.container)を作って、その中にテキストスペースを用意しました。

Simple is Best★

ジャンボトロン~Bootstrap4移行ガイド

メインコンテンツ

Bootstrapといえば、グリッドシステム!レスポンシブ対応!!

  1. コンテナを作る:<div class=”container”>
  2. コンテナの中に行のコンテナを作る:<div class=”row”>
  3. 行のコンテナの中に列のコンテナを作る:例<div class=”col-sm-4″>
  4. 列のコンテナの中に文章や画像といったコンテンツを記載

詳しい解説は他所に譲るとしまして(泣)、上記がグリッドシステムの大まかな使い方です。Bootstrapでは列が12分割されており、その列を何個分使うかをコンテナのクラス名で指定します。「<div class=”col-sm4“>なら、横幅576px以上のときに列を4個分確保する。」という具合に。

グリッド~Bootstrap4移行ガイド

フッター

一般的なサイトのフッターらしく、背景色を付けました。
あとはシンプルにコンテナを2分割しています。ブラウザの横幅を縮めていくと、横に並んでいたのが1列になって表示されます。

Java Scriptの呼び出し

Bootstrapに必要なJava Scriptのファイルを</body>の直前で呼び出しました。
追加でJava Scriptを実装したい場合はbootstrap-4.0.0.jsの下に追加してあげましょう。jQueryのプラグインによっては3.2.1で動かないことがあるので、必要に応じてバージョンを調整してあげます。

ひとまずの説明を終えて

ソースが非常に汚くなりやすいナビゲーションと、グリッドシステムを抑えてしまえば、Bootstrap4の基本はバッチリです!
私はお仕事でBootstrap4(以前はBootstrap3)を使ってWebサイトを制作していますが、グリッドシステム以外は正直覚えなくても何とかなると思ってます。分からない点もその都度検索すれば、済みます。効率を重視するような環境なら、何らかのテンプレートが用意されているでしょう。

非常に簡単な説明であれですが、何かの参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA