ホームページ作成/ホームページ作成テクニック、小技

見やすいUIを作れるフレームワークBootstrap4の使い方(2ページ目)

Bootstrap4の機能と使い方を解説。Bootstrapとは、ウェブページ上に見やすく使いやすいデザインやUI(ユーザ・インターフェイス)を簡単に作成できる便利なフレームワークです。CSSやJavaScriptの知識があまりなくても、タブやメニューでのナビゲーション機能、リンクのボタン化、各種入力フォーム、段組レイアウトなどの様々なデザインと動作が簡単に作れます。手軽に見やすいウェブページを作りたい場合におすすめです。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

Bootstrap4を使うために必要な記述 (自サイトへの設置は不要)

Bootstrap4は、ファイル一式をダウンロードして自サイトに設置することもできますが、CDNサーバ(=有名ライブラリなどの構成ファイルを配信してくれるサービス)経由で読み込むこともできます。CDNサーバ経由で読み込めば、設置作業が不要なので楽でおすすめです。読み込む必要のあるファイルは、最大で4つです。



Step1. CSSファイルを1つ読み込む (※bootstrap.min.css)
まず、HTMLソースのhead要素内に以下の1行を記述します。これは、CDNサーバ上に公開されているCSSファイルを、link要素を使って読み込む記述です。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
ここでは、本稿執筆時点での最新版であるBootstrap Ver 4.0.0の「bootstrap.min.css」を読み込んでいます。他のバージョンのCSSを読み込む場合は、単に「4.0.0」の部分を書き換える方法ではダメで、integrity属性の値も変える必要がありますから注意して下さい。詳しくは後述します。


 
Step2. JavaScriptファイルを3つ読み込む (※jQuery, Popper.js, bootstrap.min.js)
次に、HTMLソースの終わり付近(</body>タグの直前あたり)に、以下の3行を記述します。
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
この3行は、以下のJavaScriptファイルを読み込んでいます。

  • 1行目:Bootstrapの動作に必要なjQuery (ここでは Ver 3.2.1 )
  • 2行目:Bootstrapの動作に必要なPopper.js (ここでは Ver 1.12.9 )
  • 3行目:Bootstrap独自のJavaScript (ここでは Ver 4.0.0 )

1行目のjQueryと、2行目のPopper.jsは、同一ページ内の別の場所で既に読み込んでいるなら、ここに記述する必要はありません。CSSの場合と同様に、他のバージョンのJavaScriptファイルを読み込む場合は、単に「4.0.0」などのバージョン表記部分を書き換える方法ではダメで、integrity属性の値も変える必要がありますので注意して下さい。詳しくは後述します。

上記のように、CSSファイル1つとJavaScriptファイル3つを読み込めば、Bootstrap4の機能を利用できるようになります。なお、例えばグリッドシステムを使いたいだけの場合は、CSSファイル「bootstrap.min.css」だけを読み込めば動作しますので、JavaScriptを読み込む必要はありません。


 
注意 最新バージョンの記述方法をコピーする方法 (バージョン番号の修正だけではダメ)
最新バージョンを読み込む記述は、Bootstrap配布サイト内にあるQuick start項目に掲載されています(下図)。ここにあるソース全体をそのままコピーして下さい。

最新バージョンのファイルをCDNサーバから読み込む記述を、そのままコピー&ペーストする

最新バージョンのファイルをCDNサーバから読み込む記述を、そのままコピー&ペーストする (図は黄色矢印がCSSファイルを読み込むソース、緑色矢印がJavaScriptファイルを読み込むソース)


なお、バージョンによってintegrity属性に記述する値(=中身が改ざんされていないかどうかを検証するための値)が異なりますから、先のソースの中にあるバージョン番号(例えば4.0.0)だけを書き換えても読み込めません。Bootstrapサイト上に掲載されているCDNの書き方全体をコピー&ペーストして使う必要がある点に注意して下さい。


 
参考. 簡単に始めるテンプレートHTMLソース(Starter template)も参考に
Bootstrap4のIntroductionページには、Bootstrap4を使うために必要な記述を含めたHTML5ソースのテンプレート「Starter template」が掲載されています。白紙の状態からページを作る場合は、このソースを丸ごとコピー&ペーストするのも手軽で良いでしょう。ただし、日本語ページを作る際は、2行目の「<html lang="en">」を「<html lang="ja">」に修正するのを忘れないようご注意下さい。

Bootstrap4の構成ファイルを読み込むHTML5ソースの記述例

Bootstrap4の構成ファイルを読み込むHTML5ソースの記述例



Bootstrapの使い方はバージョンごとに異なる

Bootstrapには複数のバージョンがあります。本項執筆時点の最新版はBootstrap4ですが、バージョンごとに配布サイトが分かれており、Bootstrap3Bootstrap2のサイトも残っています。

Bootstrapはバージョン別にウェブサイトがある (左上から順に、Bootstrap2、Bootstrap3、Bootstrap4用サイト)

Bootstrapはバージョン別にウェブサイトがある (左上から順に、Bootstrap2、Bootstrap3、Bootstrap4用サイト)


各バージョンによって導入方法が異なる上、記述方法には互換性があまりないので注意して下さい。Bootstrap2での書き方はBootstrap3では使えませんし、Bootstrap3の書き方はBootstrap2では使えません。Bootstrap4の書き方はBootstrap3に近いですが、同じ記述でも表示のされ方が異なる部分があるため、別物だと考えておく方が無難です。

また、サポートされているブラウザのバージョンも異なります。基本的には最新版を使えば良いですが、よほど古いブラウザ向けのページを作りたい場合には、あえて古いバージョンを使う必要があるかも知れません。例えばVer.4ではIE9以下やiOS6以下のサポートはなくなりました。

当ガイドサイト内には、Bootstrap2の使い方を解説した記事「Bootstrap2のグリッド機能で段組を作成」も残してありますので、ご参照下さい。

Bootstrapで段組を簡単作成

段組(マルチカラム)は、多くのウェブサイトでページレイアウトに使われています。Bootstrapでは、レスポンシブWebデザインに対応した複雑な段組でも簡単に作れます。詳しい書き方は、記事「Bootstrapでスマホ対応グリッドレイアウトを簡単作成」で解説していますので、ぜひご参照下さい。

Bootstrap3を使ったサンプルページ

Bootstrapを使った、段組構造を含むサンプルページ


上図のサンプルページは、左端にメニューを配置して右側に本文領域を設ける2段組になっており、右側の本文領域内はさらに3段組と4段組に分割されています。Bootstrapが提供するグリッドシステムを使うと、このような入れ子構造の段組でもとても簡単に作れます。


 

Bootstrapで見やすいボタンを簡単作成

ウェブ上のリンクは、ボタン型に装飾した方が使いやすい場面が多々あります。Bootstrapでは、テキストリンクをボタンのように見せる装飾も簡単に作れます。単に1つのリンクを1つのボタンにするだけでなく、複数を連結したボタンや、プルダウンメニュー付きのボタン、ページ移動用ボタンなど、様々な形のボタンに装飾できます。詳しくは記事「Bootstrap4で見やすいボタンを簡単に作る方法」をご参照下さい。

Bootstrapで作成できる様々なボタンの例

Bootstrapで作成できる様々なボタンの例



見やすく使いやすいウェブページが簡単に作れるフレームワーク

今回は、見栄えの良いデザインや機能をウェブページ上で簡単に作れるフレームワークであるBootstrapについて、実現できる装飾や機能を簡単にご紹介し、自身のウェブサイト上で使うための準備方法を解説いたしました。ぜひ、試してみて下さい。

【関連記事】
【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます