こんにちは、okutani(@okutani_t)です。みなさんはBootstrapを知っていますか？BootstrapはTwitterが作ったCSSフレームワークで、ノンデザイナーの方でもオシャレなサイトがかんたんに構築できるスグレモノです。
最近ではBootstrapの解説書が出るくらい、人気のWeb制作ツールですね。また、始めからレスポンシブ対応しているので、かんたんにスマートフォンでも最適に見れるサイトを構築できることが、何よりも魅力的です。
スマートフォンユーザーの多い今日では、Bootstrapの使い方を覚えておくだけ損はないかと思います。
実際に、私はお仕事でブログシステム等の管理ページを作成するときは、すべてBootstrapを使って構築しています。まだBootstrapを使ったことのない方は、この機会に試してみてはどうでしょうか。
今回はBootstrapの導入方法と初期設定を紹介します。それほど難しくはないかと思いますので、お気軽に読み進めてくださいませ。
では、さっそくBootstrapの導入方法をみていきましょう。
スポンサーリンク
Bootstrapの導入方法
Bootstrapを利用するには、主にふたつの方法があります。ひとつは、Bootstrap本体をダウンロードして使う方法。もうひとつは、CDNを使ってBootstrapリンクをHTMLファイルに埋め込む方法です。
今回、ダウンロードとCDNを利用した導入方法を両方紹介しています。基本的にどちらを利用してもOKですので、お好きな方法で使ってみましょう。
なお、CDNを使った方法では、ネット環境がない場合は利用できないため注意が必要です。その説明も、CDNを利用した導入方法の箇所で行っています。
では、まず始めに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の初期テンプレートのコードなので、そのコードを丸ごとコピーして利用すると便利です。
Bootstrap利用時には、このコードをコピーして設定を進めることをオススメします。
「index.html」というファイルを作成し、そこに先ほどコピーしたテンプレートコードを丸ごと貼り付けましょう。
貼り付けたあと、2行目の「<html lang=”en”>」の箇所を、次のように日本語に設定しておきます。
<html lang="en"> ↓ <html lang="ja">
ブラウザで確認
index.htmlをブラウザにドラッグして「Hello, world!」と表示されればOKです。
無事にBootstrapを導入することができました。
次はCDNを利用したBootstrapの導入方法をみてみましょう。
CDNを利用したBootstrapの利用方法
CDNを使えば、Bootstrap本体をダウンロードせずに、CDN用のコードをコピペだけで利用できるため、楽に導入できて便利です。
また、CDNではユーザーのブラウザにBootstrap設定ファイルがキャッシュされるので、ダウンロード方式でBootstrapを利用するより高速にサイトを表示させることができます。
しかし、「ネット環境がない場所」「参照しているリンクが切れている」「参照しているサーバーが落ちている」場合は読み込むことができず、レイアウトが崩れてしまいます。
どちらを利用するかは導入するサイトによって、適宜選択するのが良いかと思います。
CDNの導入は、冒頭で紹介した公式サイトからコードを取得して進めていきます。
公式サイトにアクセスして「Getting started」をクリック。
下にスクロール、「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翻訳や日本語でまとまったサイトを参照するのも良いかと思います。
HTMLとCSSの基礎知識があれば、Bootstrapの習得コストはそれほど高くはないので、どんどん活用してみてください。
Bootstrapを使って、レスポンシブでカッコいいサイトを作ってみてくださいね。お疲れ様でした。
まとめ
Bootstrapの導入はそれほど難しくないので、気軽に始めてみてください。
また、本番環境でBootstrapを使う場合は、CDNではなくダウンロードから利用することをオススメしています。参照しているリンクが切れたり、ネットに繋がらない場合はレイアウトが崩れてしまいます。
逆に、テスト環境でサイトを構築する場合は、CDNの方がコピペだけで導入ができて楽です。参考にしてください。