Bootstrap 4で固定ヘッダーと固定フッターを設定する簡単な方法
たくさんのWebサイトで採用されている固定ヘッダーや固定フッターをBootstrap 4を用いて簡単に実現する方法を紹介します。
固定ヘッダーと固定フッターを設定するにはHTMLやCSS、場合によってはJavaScriptの知識が必要になるので、想像以上に設定が難しいものですが、 Bootstrap 4を利用すればHTMLタグにclassを追加するだけ固定ヘッダーと固定フッターを簡単に設定できます。
Bootstrap 4の利用を前提としているので、まだ準備ができていない人は以下のページを参考にしてください。
固定ヘッダー、固定フッターとは
固定ヘッダーとは
固定ヘッダーとは、Webページの上部に固定されているヘッダーのことを言います。 スクロールしても上部に固定され続け、隠れずに残った状態となります。
スティッキーヘッダー(Sticky Header）やスティッキートップ(Sticky Top)とも呼ばれます。
この固定ヘッダーは様々なサイトで採用されており、Webサイトのナビゲーションの役割として設置されるケースが多いです。
Webサイトの主要カテゴリや検索窓、ユーザーページへのリンクなどを設置します。
固定フッターとは
固定フッターとは、Webページの下部に固定されているフッターのことを言います。 スクロールする前から常に下部に表示されている状態となります。
スティッキーフッター(Sticky Footer)やスティッキーボトム(Sticky Bottom)とも呼ばれます。
固定フッターを利用しているWebサイトは固定ヘッダーと比べると少ないですが、 スマホ向けWebページではあえて固定フッターを採用しているサイトもたまに見かけます。 スマホでは画面の下部の方が指が届きやすくクリックしやすいですもんね。
デモサンプル
設定方法の前にまずはサンプル画像を以下に掲載しました。
ボディ部をグレー、ヘッダー部をグリーン、メイン部を水色、フッター部をピンクに色付けしています。
スクロールが上部の場合
初期表示の段階でフッターが下部に固定されているのが分かります。
スクロールが下部の場合
スクロールを下部まで移動してもヘッダーが上部に固定されていることがわかります。
また初期表示にはヘッダーよりも上部に表示されていた「Sticky!」という文言は隠れています。
なお、下部にグレーのボディ部が見えているのは、フッター部の高さ分くらいメイン部をmarginで上げているためです。
サンプルのソースコード
上記のデモサンプルのソースコードは以下となります。
コピペしてhtmlファイルとして保存しブラウザで表示すれば、掲載した画像と同じ形になるはずです。
Bootstrap 4で固定ヘッダー、固定フッターを設定する方法
固定ヘッダーを実現する方法
Bootstrap 4で固定ヘッダーを実現する方法はとても簡単で、ヘッダー要素に対しclassを一つ指定して上げるだけです。
class="sticky-top"を追加してあげるだけです。
デモサンプルのようにヘッダーよりも上部に要素を追加すれば、初期表示時には表示されるけど下にスクロールしたら隠れるようにすることもできます。 もちろん、固定ヘッダーとして指定した要素はページ上部に固定された状態となります。
デモサンプルではヘッダーよりも上に「Sticky!」と文字を設定しましたが、文字ではなく画像を設定するのもいいと思います。
固定フッターを実現する方法
Bootstrap 4で固定フッターを実現する方法もとても簡単で、フッター要素に対しclassを一つ指定して上げるだけです。
class="fixed-bottom"を追加してあげるだけです。
なお、そのままだと固定フッターの背部にフッター意外の要素が隠れてしまうので、隠れてしまう部分についてはmargin-bottomで底上げしてあげる必要があります。
なおサンプルでは、メイン要素にBootstrap 4のclassであるclass="mb-5"を指定することでmargin-bottomを設定しています。
サンプルでは適当な高さ分だけ底上げしていますが、正しく設定する場合はフッター部の高さ分だけ底上げしてあげれば良いです。
おわりに
Bootstrap 4で固定ヘッダーと固定フッターを簡単に設定する方法について紹介しました。
CSSやJavaScriptでゴリゴリ設定するよりも簡単に設定ができるのでとてもおすすめです。
なお、Bootstrapの公式サイトに今回紹介したclassの説明があるので、気になる方は（英語ですが）見てみてください。
Bootstrap 4で要素の表示 ↔ 非表示を切り替える簡単な方法【HTMLだけで実現】
ブログやサイトで、リンクやボタンをクリックすると要素が表示したり非表示したり切り替わる部品を見たことありますよね。
今回はそんなリンクやボタンをクリックすると要素が表示 ↔ 非表示と切り替わる方法をBootstrap 4で簡単に実現する方法を紹介します。
Bootstrap 4を使えばCSSを編集せずにHTMLだけで手軽に要素の表示 ↔ 非表示の切り替えができます。
Bootstrap 4で要素の表示 ↔ 非表示を切り替える方法
表示 ↔ 非表示される部品のサンプル
まずは、どんなものができるのかイメージしてもらうために以下のサンプルを見てください。
クリックすると要素の表示 ↔ 非表示が切り替わります。
aタグを利用する場合とbuttonタグを利用する場合の2つを用意しています。
表示されました！
これを実現するためには以下のHTMLを書けばいいです。
なお、Bootstrap 4の導入は事前に済ませておいてくださいね。
HTMLの説明
先程掲載したHTMLの説明をします。
まず全体の構成ですが、大きく分けて2つの部分があります。
- クリック部分（リンクやボタン）
- 表示 ↔ 非表示する部分
クリック部分（リンクやボタン）について
クリック部分にはテキストリンクかボタンを利用します。
設定のポイントは以下になります。
-
aタグの場合はhref属性で、buttonタグの場合はdata-target属性で表示 ↔ 非表示する要素のidを指定する。 -
aタグでもbuttonタグでもdata-toggle="collapse"を指定する。
表示 ↔ 非表示する部分について
表示 ↔ 非表示する部分についての設定ポイントは以下になります。
-
classに
.collapseを付与する. - idをつける
なお、classに.showをつけると要素が表示された状態でページを表示することができます。
アクセシビリティについて
aタグ、buttonタグにはaria-expanded="false"、aria-controls="collapseExample"と属性をしています。
（要素を表示状態からページを表示する場合はaria-expanded属性はaria-expanded="true"とします。）
これらはなくても表示 ↔ 非表示する機能は実現できるのですが、ハンディキャップを持つ人々対してよりアクセシブルにするために記載することが好ましいです。
アクセシビリティについて詳しくない方は以下をご覧になってみてください。
おわりに
Bootstrap 4で要素の表示 ↔ 非表示を切り替える方法について紹介しました。
CSSを編集せずにHTMLだけで実現したい場合にはお手軽なのでぜひお試しください。
なお、Bootstrap 4を使わずにCSSだけで実現したい場合は以下がとても参考になると思います。
Bootstrapのbuttonの使い方をマスターするポイント【Boostrap 4】
WebフレームワークであるBootstrapを使うと簡単にボタンを設置することができます。
Bootstrapでは様々なスタイルのボタンが定義されているので使いこなせるようになればとても便利ですよ。
今回はBootstrapでボタンを設置する際のポイントを紹介します。
Bootstrapでボタンを使うポイント
Bootstrapでボタンを設置する場合はデフォルトで用意されている.btnclassを利用します。
.btnclassを<button>タグに設定します。
なお、<a>タグ、<input>タグに設定することでもボタンにすることができます。
<a>タグをボタンとして設定する場合は、
ブラウザにボタンであることを明示するためにrole="button"を指定すると良いとBootstrapのドキュメントに書いてあります。
Bootstrapのbuttonについての公式ドキュメント(英語)
ここからは、Bootstrapのbuttonの様々な使い方のポイントについて、例を出しながら紹介します。
buttonのスタイルカラーを指定する
Bootstrapではボタンのデザインカラーが複数用意されています。
以下に例として全て例示します。
（Bootstrapらしく、例をレスポンシブにしてみました。ブラウザのサイズに応じてレイアウトが変わります。）
ノーマルカラーのボタン
反転カラーのボタン
buttonのサイズを指定する
ボタンのサイズは大きくする場合は.btn-lgclassを、小さくする場合は.btn-smclassを利用できます。
また、親要素の幅いっぱいのボタンを設定するには.btn-blockclassを指定します。
それぞれの例は以下の様になります。
buttonのアクティブ、非アクティブを設定する
ボタンの活性、非活性ももちろん簡単に設定できます。
ただ、ちょっとしたブログやサイトではあまり使用するケースは少ないかもしれませんね。
buttonの余白を設定する
Bootstrapのbuttonにはデフォルトでpaddingの設定がされています。
デフォルトのままで十分ですが、自分でカスタマイズしたい場合にはBootstrapに用意されているpaddingの設定を利用しましょう。
.p{sides}-{size}classでpaddingの設定ができます。
{size}は0から5を指定してpaddingの大きさを指定できます。
{sides}は以下が指定できます。
- t : top
- b : bottom
- l : left
- r : right
- x : left と right
- y : top と bottom
- 指定なし : top と bottom と left と right
例を見た方がわかりやすいです。
おわりに
Bootstrapでbuttonを使う際のポイントについて紹介しました。
覚えなくてはいけないことは多くないので簡単に利用出来ると思います。
Bootstrapを使っている人の役に立てたらうれしいです。
【Bootstrap 4 入門】初心者は2つの使い方を覚えるだけでかなり便利にBootstrapを使えるようになる
Webフレームワークとして人気であるBootsrapをみなさん使いこなしているでしょうか。
先日、Bootstrapが正式にバージョン4にアップグレードされました。
まだBootstrapを使ってない人は、正式なメジャーバージョンが発表された今のタイミングに使い始めてみてはいかがでしょうか。
私自身はBootstrapはバージョン3から利用しています。
今となってはBootstrapを使いこなせるようになりましたが、最初は使い方がわからず効率的ではありませんでした。
今回は、Bootstrapを使いこなせていない人に向けてまずは覚えた方が良い2つ使い方について紹介します。
たった2つの使い方を覚えるだけで、Bootstrapがどれだけ便利かがわかると思います。
Bootstrapとは
BootstrapとはWeb部品の集まりを提供するフレームワークで、CSSやJavaScriptの詳しい知識を持たない人でも 比較的簡単にレスポンシブでデザイン性の高いWebページを作成できるようになります。
基本的にはBootstrapで用意されているclassをHTMLの各タグに指定するだけで、簡単にかっこいいWebページの作成が可能となります。
なお、Bootstrapは生まれはTwitter社です。オープンソースとしてたくさんの人に開発されています。
まだBootstrapを導入されていない人は、導入方法の記事もあるので見てみてください。
覚えるべき！便利な2つの使い方
何事も使い始めは覚えることも必要ですよね。
ただし、どの範囲をどれくらい覚えれば良いかは初心者にはわからないと思います。
そんな時、使い方をわかっている人から覚えるべきことを伝えてもらえれば効率いいですよね。
なので、今回は長らくBootstrapを使っている私が、まず覚えた方が便利だと思う2つの使い方について紹介します。
1つ目：レスポンシブグリッドシステムを覚えよう
まずはレスポンシブグリッドシステムを覚えましょう。
レスポンジブグリッドシステムはBootstrapを導入する意味の大部分を占めるのではないかと個人的に思います。
正直、これをだけのためにBootstrapを導入する価値があるとすら思います。
CSSを触らずともclassを指定するだけでデバイスのサイズに応じてレイアウトを可変にすることが可能となります。
指定方法として以下をまずは覚えてください。
- 「divタグのclass="container"」の中に
- 「divタグのclass="row"」を入れ、その中に
- 「要素となるカラム」を加える
なお、要素となるカラムは1行で12カラムまでで、はみ出た分は改行されます。
カラムの大きさはclassで設定しますが、
col-{breakpoint}-{size}のsizeで指定します。
breakpointについては後半に説明します。
まずは、カラムのsizeについて理解しましょう。
文字よりも例とソースコードを見てもらうとわかりやすいと思います。
（視覚的に理解しやすいように、外枠と背景色などを適宜Bootstrapのclassでつけています。）
まずは一つ目の例です。
①
②
③
col-{breakpoint}-{size}の{size}でカラムの大きさを指定します。
今回のケースでは、それぞれのカラムsizeを4（col-4）とし、合計で12のため1行にピッタリ収まっています。
（この例では{breakpoint}は指定していません。）
続いて二つ目の例です。
④
⑤
⑥
このケースでは、それぞれのカラムsizeを5、5、9としました。5 + 5 + 9 = 19 > 12なので、
はみ出たcol-9のカラムは改行されています。
次はカラムのbreakpointについて理解しましょう。
col-{breakpoint}-{size}の{breakpoint}で指定をします。
レイアウト変更の区切りとして設定します。
breakpointに設定できるものは、
指定なし、sm、md、lg、xlです。
指定なしからxlに向かうにほど大きい画面のデバイスに対応します。指定なしの場合、スマホなどの画面サイズが対象となります。
こちらも文字よりも例とソースコードを見てもらうとわかりやすいと思います。
なお、スマホだと画面サイズを変えられないので確認がしづらいと思います。
パソコンブラウザのウィンドウを大きくしたり小さくしたりして、レスポンシブにレイアウトが変わるところを確認してください。
①
②
③
④
ブラウザのウィンドウサイズを変えると、レイアウトが変わる様子を確認することができます。
スマホサイズのデバイスではsizeが12のカラムを4つ、それよりも大きいデバイスでは一つ一つのカラムsizeを大きくなるにつれ6、4と設定しています。
こんな感じでデバイスのサイズに応じてそれぞれのカラムsizeを指定することができ、簡単にレスポンシブデザインを設定することができます。
ちなみに、当記事のブックマークボタンやシェアボタンも画面のサイズに応じてレイアウトが変わるように設定しています。
2つ目：margin、paddingの設定方法を覚えよう
覚えた方が便利だと思う2つ目です。
Bootstrapでmargin、paddingを設定する方法を覚えましょう。
Bootstrapを使えばHTML上で簡単にmargin、paddingを設定できるのでかなり便利です。
私もレイアウトを考えるときかなり利用しています。
利用できるクラスは以下のように指定します。
marginはm{sides}-{size}で指定します。
paddingはp{sides}-{size}で指定します。
{size}は0から5を指定してmargin、paddingの大きさを指定できます。
{sides}は以下が指定できます。
- t : top
- b : bottom
- l : left
- r : right
- x : left と right
- y : top と bottom
- 指定なし : top と bottom と left と right
早速、例とソースコードを見てみましょう。
実際の例を見ながらどのようにコードを書くか学んだほうが覚えやすいと思います。
（視覚的に理解しやすいように、外枠と背景色などを適宜Bootstrapのclassでつけています。）
class="m-3 p-3"
class="mt-5 pt-5"
class="ml-3 pb-4"
こんな感じでmargin、paddingがとても簡単に設定することができます。
レイアウトの調整がはかどりますよ。
なお、margin、paddingも実はレスポンシブに調整可能で、それぞれ以下のように設定します。
marginはm{sides}-{breakpoint}-{size}で指定します。
paddingはp{sides}-{breakpoint}-{size}で指定します。
{breakpoint}には既に紹介済みの、指定なし、sm、md、lg、xlを指定できます。
例は以下のようなかんじです。ブラウザサイズを小さくしたり大きくしたりして確認してみてください。
class="mt-5 ml-sm-5 mb-md-5 pt-lg-5 pl-xl-5"
おわりに
Bootstrap初心者や使い始めて間もない人向けに、まずは覚えたほうがよい2つの使い方を紹介しました。
今回紹介したのはレスポンシブグリッドレイアウトとmargin、paddingの設定方法です。
この２つを覚えてしまえばかなり便利にBootstrapが使えるようになるので是非覚えてみてください。
Bootstrapでモーダルダイアログを超簡単に実装する方法
モーダルダイアログって知ってますか？
百聞は一見に如かずということで以下にモーダルダイアログが表示されるボタンを設置しました。
ボタンクリックで出てくる例のようなダイアログウィンドウのことをモーダルダイアログといいます。
今回はこのモーダルダイアログを超簡単に実装する方法について紹介します。
超簡単に実装するためにBootstrap 4を利用します。
モーダルダイアログ（モーダルウィンドウ）は何のためにある？
モーダルダイアログとは
冒頭で例を紹介しましたが、メインウィンドウの上に表示される子ウィンドウのことで、 例えば、エクセルやパワポで「名前をつけて保存」する際に出てくるダイアログもモーダルダイアログですね。
モーダルウィンドウが表示されるとメインウィンドウの操作はできずに、子ウィンドウであるモーダルダイアログだけ操作が可能となります。
モーダルダイアログの必要性
モーダルダイアログが表示されている際はメイン画面は操作できなくなるため、ある操作に集中してもらいたい場合に利用するとよいです。
例えば必ず読んでほしいものがあったり、選択してほしいものがある場合など有効です。
モーダルダイアログのデメリット
モーダルダイアログのデメリットとしては、メインウィンドウの操作が一時的にできなくなるためユーザが困惑してしまう場合があるということです。
また、なにか特定のアクションをユーザが実行しないと先に進めないモーダルダイアログの場合は、ユーザにとってストレスになる場合もあります。
これらのデメリットが気になるようであれば、サイトの設計を工夫することでモーダルダイアログを使わずに済ませる必要があります。
Bootstrapによるモーダルダイアログの実装
早速、実際の例と実装について見ていきましょう。
上記のコードをコピーして貼り付けるだけで簡単にモーダルダイアログを実装することができます。 （Bootstrap 4の設定がされていることを前提）
.modal-bodyのdiv内に好きな内容を記載すればモーダルダイアログ内の内容を変更することができます。
ボタン名などもお好みに合わせて変更してみてください。
別バーションのモーダル
ここまででノーマルバージョンのモーダルダイアログの実装方法を紹介しました。
ここからはセンターバージョン、ラージバージョン、スモールバージョンの3つを紹介します。
センターバージョンのモーダルダイアログ
ノーマルバージョンのモーダルダイアログはメイン画面の上部に表示されました。
センターバージョンではメイン画面の中央で表示します。
実装方法は.modal-dialogのdivのclassにmodal-dialog-centeredを追加するだけです。
以下の様なかんじです。
<div class="modal-dialog modal-dialog-centered" role="document">
ラージバージョンのモーダルダイアログ
ラージバーションは単純にノーマルバーションのモーダルダイアログを大きくしたものです。
（スマホだと表示上ノーマルバージョンと同じになるかもしれません。）
実装方法は.modal-dialogのdivのclassにmodal-lgを追加するだけです。
以下の様なかんじです。
<div class="modal-dialog modal-lg" role="document">
スモールバージョンのモーダルダイアログ
スモールバーションも単純にノーマルバーションのモーダルダイアログを小さくしたものです。
（スマホだと表示上ノーマルバージョンと同じになるかもしれません。）
実装方法は.modal-dialogのdivのclassにmodal-smを追加するだけです。
以下の様なかんじです。
<div class="modal-dialog modal-sm" role="document">
おわりに
Bootstrap 4を利用して簡単にモーダルダイアログが実装できることを紹介しました。
基本的には上記で紹介したコードをコピー貼り付けして内容を少し修正するだけなので、簡単に利用できると思います。
モーダルダイアログが必要な際は是非利用してみてくださいね。
Bootstrapやメディアクエリでレスポンシブデザインが反映されない場合の対処方法
Bootstrapを利用していたりメディアクエリを利用して、端末サイズに応じたレスポンシブなデザインにされている人が多いと思います。
先日、Bootstrapでデバイスのサイズに応じたデザインにしていましたが、想定とは異なるデザインになってしまうことがありました。
パソコンだと想定していたデザインになるのですが、スマホでは予期しないレイアウトになってしまうというものでした。
どんなレイアウトかというと、パソコンで表示されている画面をそのまま縮小してスマホに表示されるというものでした。
想定したレスポンシブなデザインにならない原因
画面が表示される際、ブラウザ側で「デバイスの画面サイズがわからない」、または、「どの程度縮小拡大していいかわからない」ために 想定したデザインで表示ないのだと思います。
デバイスの画面サイズに応じてレイアウトを正しく設定する方法
ページが表示される表示領域の設定は、HTML上のmeta要素にviewportを設定してあげればよいです。
viewportを指定することにより、ブラウザ側がページを表示する際に「表示領域のサイズはいくつか」、「表示する際の拡大率・縮小率はいくつか」がわかるようになります。
以下に設定例を紹介したいと思います。
Bootstrap 4を利用する際の初期設定方法にもしっかりこのmeta要素の設定について書かれているので、 その設定を漏らしてしまっている人は今回紹介しているような「想定したレスポンシブレイアウトにならない」といったケースに遭遇しているかもしれません。
なお、以下の記事で最新版のBootstrapの導入方法もわかるので良かったら見てみてください。
はてなブログの方はこちらもどうぞ。
おわりに
レスポンシブデザインにするには、meta要素にviewportの設定が必要なことを紹介しました。
最近のウェブサイトはモバイル対応が必須だと思うのでviewportはしっかり理解しないとですね。
Bootstrap 4が正式リリース（Bootstrap 3との違いは？）
Booststrap 4の安定版がついに正式リリースされました。2018年1月18日、Boostrap 4.0.0としてリリースされています。
Bootstrap 4の開発が始まったのが2015年後半なので、正式リリースまで約2年ほどかかりましたね。
Bootstrap 3よりも使いやすくなっていておすすめです。
Bootstrap 3 から Bootstrap 4への変更点
レスポンシブなグリッドシステムを採用し、モバイルファーストなデザインができることに変わりません。
細かい変更点がたくさんあるものの、Bootstrapをカスタマイズしないでそのまま利用する利用者としては、今までと同じ考え方で利用することができると思います。
ただし、class名の変更であったり廃止された考え方もあるのでBootstrap 3からBootstrap 4へ移行する際には公式のドキュメントを見ながら移行を進める必要があります。
ブラウザのサポートについて
サポート対象となるブラウザはチェックしておいたほうが良いでしょう。Bootstrap4ではCSS3で使えるFlexboxの考え方を採用していることもあり、昔のブラウザはサポート対象とはなっていません。
通常は新しいブラウザが使われるはずなので大丈夫ですが、古いブラウザにも対応したい方は注意が必要ですね。
なお、最近のChromeやSafariなどのブラウザはもちろんサポート対象です。
サポート対象外ブラウザ : IE 9 以下、iOS 6 以下
うれしい変更点
バージョン3からバージョン4への変更で、使いやすいclassがたくさん増えています。
数ある変更の中でも以下の変更点がとてもよかったです。
レイアウトを切り替える階層が増えた
Bootstrapでは画面のサイズに応じてレイアウトの調整を行うことができますが、
バージョンアップでそのレイアウトの切り替えを行う階層が一つ追加されました。
Bootstrap 3ではxs、sm、md、lgの4つでしたが、
Bootstrap4ではxlが一つ増えてより細かいレイアウトの切り替えができるようになりました。
なお、単純に階層が増えただけでなく、それぞれの切り替える階層の範囲も変更されているので注意しましょう。
margin、paddingの設定をclassで簡単に設定できる
marginとpaddingがclassで簡単に指定できるようになったのが個人的には一番うれしい点です。
上、下、左、右とそれぞれでも調整可能なので、レイアウトを調整するときにとても便利です。
marginを設定する場合はm{上下左右(t,b,l,r)}-{サイズ}、
paddingの場合はp{上下左右(t,b,l,r)}-{サイズ}で簡単に指定できます。
以下は例になります。
class="pt-5 pr-3 border"
class="mb-3 pl-5 pb-3 text-white"
Bootstrap 4の導入方法
Bootstrap 4を利用する方法はファイル群をダウンロードして使用する方法とCDNで利用する方法の大きく2種類があります。
CDNを利用する場合はHTMLのヘッダーとフッターにそれぞれ数行ずつ追加するだけですぐに利用できるのでオススメです。
CDNで利用する場合については、以下の記事で導入方法を紹介しているので参考にしてみてください。
おわりに
正式にBootstrap 4がリリースされたことを紹介しました。
Bootstrap 4を導入すればレスポンシブ対応が簡単にできるだけでなく、デザインの変更もとても簡単になるのでオススメです。
まだ導入していない方は導入しちゃいましょー。
Bootstrap 4を導入するための設定方法【2018年最新版】
BootstrapというWebフレームワークを導入すれば、CSSをそこまでいじらなくてもHTML上でclass指定すれば簡単にスタイルを決めることが出来るのでとても便利です。
また、Bootstrapのグリッドレイアウトの考え方を用いることで、デバイスに応じたレスポンシブデザインもとてもやりやすいです。
今回はそのBootstrapの現時点（2018年4月）最新版の「Bootstrap 4.0.0」を導入するための設定方法を紹介します。
私自身も「Bootstrap 4.0.0」を利用しています。
ちなみに公式サイトは以下になります。
「Bootstrap 4」の設定方法
今回紹介するのは、HTMLのhead要素とfooter要素にコードを追加する簡単な方法です。
head要素に設定を追加
まずはHTMLのhead要素に計2行を追加します。
- viewportのmetaタグ設定
- スタイルシート参照の追加
※この設定は必須ではなく、設定しなくても動きます。
※すでにviewportのmetaタグ設定されている場合は必要に応じ設定をまとめてください。
※既にスタイルシートを読み込んでいる場合は、それよりも前の位置に追加してください。
footer要素に設定を追加
続いて、HTMLのfooter要素に計3行を追加します。
Bootstrap 4の多く構成要素はJavaScriptを利用しているため、それを有効にするために追加が必要となります。
- jQuery参照の追加
- Popper.js参照の追加
- BootstrapのJavaScriptプラグイン参照の追加
設定したHTMLのサンプル
HTMLの全体の中で表現すると以下のようになります。
ファイルをダウンロードして使用する場合
Bootstrap 4のファイルを直接ダウンロードして使用する方法もありますが、
そちらの方法が良い方は公式サイトに記載されているので参照ください。
ダウンロード形式が良い方は以下からダウンロードできます。
「Bootstrapをカスタマイズしたい」や「読み込み速度をできるだけ速くしたい」といった人以外は、私が紹介したhead要素とfooter要素に追加する方法で良いです。
「Bootstrap 4」の使い方
Bootstrapは使い慣れるとすごく便利ですが始めは使い方を徐々に覚えていく必要があります。
Bootstrap 4の公式ドキュメントを見ても、どこを勉強した方が良いかは書いてません。
以下の記事でBootstrapを使い始める人向けにまずは覚えたほうが良いことを書いたので覗いてみてください。
まとめ
現時点（2018年4月）最新版の「Bootstrap 4.0.0」を導入するための設定方法をご紹介しました。
Bootstrap 4を導入すればサイトや記事の作成が格段に作成しやすくなります。
導入する際の参考になればうれしいです。
なお、はてなブログにBootstrap 4を設定する記事も書いているので、はてなブログをご利用の人は以下もご覧になってみてください。
はてなブログにBootstrap 4を設定する方法
ブログをやるならデザインはかっこよくしたいですよね。
デザインを編集する際には、ブログを表示するデバイスの画面のサイズに応じて編集（レスポンシブ対応）しないと、パソコンではかっこよく見えるけどスマホではそうではないなどと困ったことが起こりやすいです。
そんなとき、BootstrapというCSSフレームワークを導入すれば、html上でクラスを指定するだけで、デバイスに応じたレスポンシブなデザインにすることができます。
今回はそのBootstrapをはてなブログに設定する方法についてレクチャーします。
設定するのは現時点(2018年4月)で最新のBootstrap 4.0.0です。
なお、Bootstrapのバージョンが上がる度にこの記事を更新していきます。
この記事を読めばはてなブログへBootstrapを設定できますが、より詳しく知りたい方は本家のサイトもご覧ください。
はてなブログへの設定作業はとても簡単で、大きく「headに要素を追加」と「footerに要素を追加」の２つです。3分くらいでできると思います。
はてなブログのheadに要素を追加
はてなブログにBootstrapのCSSを読み込ませるため、headに以下の要素を追加します。
設定 > 「詳細設定」タブ > 「検索エンジン最適化」項目 > 「headに要素を追加」欄に要素を追加します。
追加したら、必ず変更の保存を忘れないようにしましょう。
はてなブログのfooterに要素を追加
はてなブログにBootstrapのJavascriptを読み込ませるため、footerに以下の要素を追加します。
設定 > 「デザイン」ボタン > スパナマークのタブ > 「フッタ」欄に要素を追加します。
こちらも追加したら、必ず変更の保存を忘れないようにしましょう。
これにて設定が完了です。あとは記事でもデザインでもBootstrapのクラスを利用することが可能となります。
はてなブログをレスポンシブデザインモードにする
せっかくBootstrapが使えるようになったので、はてなブログをレスポンシブデザインモードに設定しておきましょう。
なぜなら、html上でBootstrapのclassをうまく利用すれば、一つのhtmlでパソコンとスマホの両方に対応できるからです。
はてなブログのデザインでは、パソコンとスマホそれぞれに設定することが可能ですが、それをやめて一括でデザイン設定するようにしたほうが楽なので私はそうしてます。
設定はすごく簡単です。
設定 > 「デザイン」ボタン > スマホマークのタブ > 「詳細設定」項目の「レスポンシブデザイン」にチェックする。
これだけです。
Bootstrapを自由自在に使えるようになれば、デザインの調整をする際にとても便利です。
是非、Bootstrapをどんどん利用していきましょう。
