WEB 開発環境/ツール

【bootstrap】Twitter社が開発したCSSフレームワーク

bootstrapってご存じですか?便利なCSSがあるって聞いたんですけど。

はい。bootstrap(Wikipedia)とはレスポンシブデザインに対応したフロントエンド向けCSSフレームワークデザインテンプレートと言っても良い)です。Twitter社が開発したんですよ。

ちょっと使ってみたいんですよね。

わかりました。bootstrapのダウンロードから簡単なサンプルを動かすところまで説明します。

この記事で解決できること

  • bootstrapの概要と簡単な使い方がわかる。

bootstrapって何なのさ?

Wikipediaでbootstrapを調べたら、こんなことが書いてありました。ラフに要約するとbootstrapレスポンシブデザインをサポートしたCSSのデザインテンプレートです。GitHubで4番目に人気があるらしく人気の程が伺えます。

BootstrapウェブサイトWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。タイポグラフィフォームボタンナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。

GitHubで四番目に人気がありアメリカ航空宇宙局MSNBCなどに採用されている。

HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基本情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。

Ver2.0以降ではレスポンシブデザインに対応しており、閲覧機器(PC、タブレット、携帯電話)の仕様に応じてWebページのレイアウトが動的に調整される。

出典:Wikipedia Bootstrap https://ja.wikipedia.org/wiki/Bootstrap

超カンタンにbootstrapを試す方法

①ダウンロードページに行く

ここに行きます。

≫Build fast, responsive sites with Bootstrap

②BootstrapCDNを使う

ページの真ん中ぐらいにBootstrapCDNと書いてあり、右にコードがありますね。このコードをコピペします。

これをHTMLに書くだけでカンタンにBootstrapを使うことが出来ます。CDNとはContents Delively Networkの略でして、CDNを使うとはサーバにおいてあるファイルを参照することを意味します。

実際にHTMLに上記コードを埋め込んでみました。<head></head>の間にBootstrapCDNからコピペしたコードと自作CSSを書くための<style></style>を書きます(後で出てきますので今は気にしなくてOK)。以下の内容をtest.htmlという名前を付けて保存しておいてください。

③Bootstrapのクラスをいくつか試してみる

準備

以下2つのファイルを右クリックでダウンロードしtest.htmlと同じフォルダに置いておきます。

ロゴ画像(logo.png

カラーバー(color_bar.png

ロゴを中央に表示

<body></body>の間に<p class="text-center"><img src="logo.png"></p>と書いてtest.htmlを表示します。

このようにロゴが中央に表示されました。

カラーバーをjumbotronで表示する

2つやることがあります。

①自作CSSと書いた<style></style>の間に  .jumbotron { background:url(color_bar.png) center no-repeat; background-size: cover;}と打ち込みます。

②先ほど書いたロゴの下に<div class="jumbotron">…(略)...</div>を入れます。

横幅をフルサイズで表示するとこんな感じに見えます。

次に、横幅を限界まで狭めるとこういう感じになります。カラーバーは縦横比を保持しつつ縮小されました。レスポンシブなWebサイトを構築するためのテクニックの1つですが、これは自作CSSでjumbotronに指定したbackground-size: coverの効果です。

一方、ロゴは縮小されないので見切れてしまいました。

あとカラーバーの四隅を見てください。元のカラーバー画像は四隅が直角でしたがjumbotronで表示すると角丸になります。直角にしたい場合、jumbotron-fluidという指定をすればよいです。具体的には<div class="jumbotron jumbotron-fluid">と書きます。

標準のBootstrapCDNを使うだけで事足りる方はこれで十分。インストールは飛ばして次の項目に進んでください。

インストール

①ダウンロードページに行く

ここに行きます。これはさっきと同じ。

≫Build fast, responsive sites with Bootstrap

②「Download」ボタンを押す

 

③コンパイル済コンポーネントをダウンロード

赤枠の「Download」をクリックします。※今回はコンパイル済コンポーネントを使った説明をします。Source FilesからSassコンパイルをする手順は応用編で説明する予定です。

bootstrap-4.5.0-dist.zip」がダウンロードされます。

④ZIPを展開する

ZIPを展開すると以下のようなコードが展開されます。この中で必要なファイルは2つ。bootstrap.min.cssbootstrap.min.jsです。この2つのファイルをtest.htmlと同じフォルダに置きます。

bootstrap-4.5.0-dist
├css
│├bootstrap.css
│├bootstrap.css.map
│├bootstrap.min.css
│├bootstrap.min.css.map
│├bootstrap-grid.css
│├bootstrap-grid.css.map
│├bootstrap-grid.min.css
│├bootstrap-grid.min.css.map
│├bootstrap-reboot.css
│├bootstrap-reboot.css.map
│├bootstrap-reboot.min.css
│└bootstrap-reboot.min.css.map
└js
├bootstrap.bundle.js
├bootstrap.bundle.js.map
├bootstrap.bundle.min.js
├bootstrap.bundle.min.js.map
├bootstrap.js
├bootstrap.js.map
bootstrap.min.js
└bootstrap.min.js.map

⑤Popper.jsとJQuery.jsもダウンロードする(任意)

BootstrapCDNを振り返ると4つのファイルをサーバ参照しています。このうbootstrap.min.cssbootstrap.min.jsBootstrapのページからコンパイル済コンポーネントとしてダウンロードできましたが、jquery-3.5.1.slim.min.jspopper.min.jsはbootstrapとは関係ありません。

CDN(サーバ参照)のままでも良いですがローカルファイルとして利用したい場合はJQueryとPopperのサイトから落としてくる必要があります。

jQueryのダウンロード(jquery-3.5.1.slim.min.js)

ここに行く。

≫Downloading jQuery

赤枠のファイルを右クリックして保存します。jquery-3.5.1.slim.min.jsをtest.htmlと同じフォルダに置きます。

Popperのダウンロード(popper.min.js)

ここに行く。

≫GitHub - popperjs /popper-core

ダウンロードしようとしたら直接ダウンロードは推奨されないという警告文があり、ダウンロードできませんでした。

3. Direct Download?

Managing dependencies by "directly downloading" them and placing them into your source code is not recommended for a variety of reasons, including missing out on feat/fix updates easily. Please use a versioning management system like a CDN or npm/Yarn.

仕方ないのでPopperCDNを直接開き、ブラウザのメニューから「ファイル」→「名前を付けてページを保存」を選びダウンロードしました。popper.min.jsをtest.htmlと同じフォルダに置きます。

≫cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js

⑥配置を確認

ここまで進めていればファイルがこういう配置になってると思います。もし違っていたら上に戻って確認してみてください。

test.html
logo.png
color_bar.png
bootstrap.min.css
bootstrap.min.js
jquery-3.5.1.slim.min.js
popper.min.js

⑦test.htmlのCDNをローカルファイル参照にする。

以下の通り、CDSをローカルファイル参照にしました。

これでtest.htmlを表示したところ、先ほどと同じ表示になりました。ローカルファイル参照はインターネットにつながってなくてもテストできるメリットがありますが、ローカルファイルがメンテナンスされなくなるという問題があるためお薦めできません。あくまで実験用と捉えてください。

 

GitHubも見てみる

①GitHubのページに行く

ここに行きます。

≫GitHub - twbs /bootstrap 

②ダウンロードしてみる(任意)

「Clone or Download」をクリックすると「Donload ZIP」というボタンが出てくるのでダウンロードすると「bootstrap-master.zip」というファイルがダウンロードされます。この中身はBootstrapのダウンロードページにある「Source Files」とほぼ同じ構成ですが、こっちの方が本家なので最新版がUPされていると思います(BootstrapにあるSoure Filesはある時点のアーカイブと思われ)。

まとめ

今回Bootstrapの基本に触れてみました。PC、タブレット、スマホなど表示デバイスが多種多様なWEBサイトを作るのにレスポンシブデザインは避けて通れませんので「レスポンシブデザイン」などのキーワードで色々調べてみることをお勧めします。当サイトでもCSS応用編としてレスポンシブデザインに触れていきたいので良かったら見に来てください。

 

  • この記事を書いた人
  • 最新記事

ペイヴメント

ペイヴメントのエンジニア塾(当ブログ)では20年以上の経験から得られたプログラミング系ノウハウについてベテランにも満足して頂けるような内容の濃いコンテンツを初心者にも分かりやすい形で日々発信しています。【経歴】ベンチャーのソフトハウスで4年勤務後、精密機器メーカーのソフト開発部門に勤務し今に至ります。

-WEB, 開発環境/ツール

Copyright© ペイヴメントのエンジニア塾 , 2020 All Rights Reserved.