Bootstrapの導入方法＆初期設定まとめ
2017/01/31
こんにちは、okutani(@okutani_t)です。みなさんはBootstrapを知っていますか？BootstrapはTwitterが作ったCSSフレームワークで、ノンデザイナーの方でもオシャレなサイトがかんたんに構築できるスグレモノです。
最近ではBootstrapの解説書が出るくらい、人気のWeb制作ツールですね。また、始めからレスポンシブ対応しているので、かんたんにスマートフォンでも最適に見れるサイトを構築することができます。
スマートフォンユーザーの多い今日では、Bootstrapの使い方を覚えておくだけ損はないですね。
実際に、私はお仕事で管理ページなどを作成するときは、ほとんどBootstrapを使って構築しています。まだBootstrapを使ったことのない方は、この機会に試してみてはどうでしょうか。
今回はBootstrapの導入方法と初期設定をかんたんに紹介します。それほど難しくはないかと思いますので、お気軽に読み進めてくださいませ。
では、さっそくBootstrapの導入方法をみていきましょう。
スポンサーリンク
もくじ
Bootstrapの導入方法
Bootstrapを利用するには、主にふたつの方法があります。
ひとつは、Bootstrap本体をダウンロードして使う方法。もうひとつは、CDNを使ってBootstrapリンクを直接HTMLファイルに埋め込む方法です。
今回、ダウンロードとして利用する方法と、CDNを使って利用する方法をそれぞれ紹介しています。基本的にどちらを利用してもOKですので、お好きな方法で導入してみてください。
では、まず始めにBootstrap本体をダウンロードして利用する方法をみていきましょう。
Bootstrapをダウンロードして利用する方法
下記の公式サイトからBootstrapをダウンロードしていきます。
LINKBootstrap · The world’s most popular mobile-first and responsive front-end framework.
TOPページの『Download Bootstrap』を選択。
画面が遷移して表示された『Download Bootstrap』をクリックします。
Bootstrap本体のzipファイルがダウンロードされます。解凍してリネームしておきましょう。名前は好きな名前でOKです。
テンプレートコードを利用した初期設定
先ほどダウンロード時に遷移したページに、『Basic template』という項目があります。こちらがHTMLの初期テンプレートのコードなので、そのコードを丸ごとコピーして利用すると便利ですね。
てきとうに『index.html』としてHTMLファイルを作成し、先ほどのコピーしたテンプレートコードをそこに丸ごと貼り付けましょう。
貼り付けたあと、2行目の『<html lang=”en”>』の箇所を、次のように日本語に設定しておきます。
<html lang="en">
↓
<html lang="ja">ブラウザで確認
index.htmlをブラウザにドラッグして『Hello, world!』と表示されればOKです。
無事にBootstrapを導入することができました！
次はCDNを利用したBootstrapの導入方法をみてみましょう。
CDNを利用したBootstrapの利用方法
CDNを使えば、Bootstrap本体をダウンロードせずに、コードをHTMLファイルにコピペするだけで利用できるため、楽に導入できて便利です。
またCDNでは、ユーザーのブラウザにBootstrap自体がキャッシュされるので、ダウンロード方式でBootstrapを利用するより高速にサイトを表示させることができます。
しかし、「ネット環境がない場所」「参照しているリンクが切れている」「参照しているサーバーが落ちている」場合は、読み込むことができず、レイアウトが崩れてしまいます。
どちらを利用するかは、導入するサイトによって適宜選択するのが良いかと思います。
というわけで、実際にCDNを利用してBootstrapを導入してみましょう。
公式サイトにアクセスして『Getting started』をクリック。
LINKBootstrap · The world’s most popular mobile-first and responsive front-end framework.
下にスクロール、『Bootstrap CDN』の項目を、それぞれコピーします。
一番上の行にあるコードがBootstrap本体を参照しています。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">真ん中の『bootstrap-theme.min.css』の行は、Bootstrapデザインにしたくないパーツをデフォルトに戻したい場合に使います。これは使うことほとんどないので、コピーせずスルーでOKです。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">一番下の行はbootstrapのjavascriptを呼んでいます。これがないとドロップダウンやモーダルが動かなくなるので必須です。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>ダウンロードの利用時と同じく、『Basic template』からHTMLテンプレートコードを利用してサイトを構築していきます。次のような形になっていればOKです。コメントアウトされている箇所は、IE対応コード以外削除して頂いて構いません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>index.htmlファイルひとつでBootstrapを利用することができるので、スッキリしていて良いですね。
CDNを使ったBootstrapの導入＆初期設定は以上です。
では最後に、Bootstrap公式サイトの参考のしかたを軽く紹介します。
公式サイトを参考にコーディングしていこう
Bootstrapの書き方は、公式サイトを見て覚えていくことをオススメします。
というのも、公式サイトのマニュアルがかなり詳しく＆分かりやすく利用方法が記述してあるので、最初から最後までそちらを閲覧していくだけで、コーディングをおこなうことができるからです。
公式サイトの上部メニュー『CSS』から、CSSを利用した記述方法を見ることができます。
上部メニュー『Components』では、アイコンやinputの利用方法が確認できます。
英語のサイトなので利用するのに少し抵抗があるかと思いますが、基本的に使いたいコードをコピーしてbodyタグの中に貼り付けるだけで利用できるので、比較的かんたんです。
例えば、「Components」内にある「Alerts」を使いたい場合は、下記のように該当するコードをコピペするだけで利用できます。
「どうしても英語が苦手」という方は、Google翻訳や、日本語でBootstrapのコーディング方法を解説しているサイトを利用してみてください。
HTMLとCSSの基礎知識があれば、Bootstrapの習得コストはそれほど高くはないので、この機会にどんどん活用しましょう。
まとめ
Bootstrapはおぼえると頻繁に使うことになるかと思うので、導入手順をスムーズに行えるようになると良いですね。
また、本番環境でBootstrapを使う場合は、CDNではなく本体をダウンロード利用することをオススメします。参照しているリンクが切れたり、ネットに繋がらない場合はレイアウトが崩れてしまう恐れがあるからです。
逆に、テスト環境でサイトを構築する場合は、CDNの方がコピペだけで導入ができて楽ですね。参考にしてください。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
