vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

Bootstrapの導入方法&初期設定まとめ

      2017/01/31

LINEで送る
Pocket

first-bootstrap
こんにちは、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』を選択。

first-bootstrap2

画面が遷移して表示された『Download Bootstrap』をクリックします。

first-bootstrap3

Bootstrap本体のzipファイルがダウンロードされます。解凍してリネームしておきましょう。名前は好きな名前でOKです。

first-bootstrap4

テンプレートコードを利用した初期設定

先ほどダウンロード時に遷移したページに、『Basic template』という項目があります。こちらがHTMLの初期テンプレートのコードなので、そのコードを丸ごとコピーして利用すると便利ですね。

first-bootstrap5

てきとうに『index.html』としてHTMLファイルを作成し、先ほどのコピーしたテンプレートコードをそこに丸ごと貼り付けましょう。

first-bootstrap6

貼り付けたあと、2行目の『<html lang=”en”>』の箇所を、次のように日本語に設定しておきます。

<html lang="en">

↓

<html lang="ja">

ブラウザで確認

index.htmlをブラウザにドラッグして『Hello, world!』と表示されればOKです。

first-bootstrap7

無事に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.

first-bootstrap8

下にスクロール、『Bootstrap CDN』の項目を、それぞれコピーします。

first-bootstrap9

一番上の行にあるコードが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の利用方法が確認できます。

first-bootstrap10

英語のサイトなので利用するのに少し抵抗があるかと思いますが、基本的に使いたいコードをコピーしてbodyタグの中に貼り付けるだけで利用できるので、比較的かんたんです。

例えば、「Components」内にある「Alerts」を使いたい場合は、下記のように該当するコードをコピペするだけで利用できます。

first-bootstrap11

「どうしても英語が苦手」という方は、Google翻訳や、日本語でBootstrapのコーディング方法を解説しているサイトを利用してみてください。

HTMLとCSSの基礎知識があれば、Bootstrapの習得コストはそれほど高くはないので、この機会にどんどん活用しましょう。

まとめ

Bootstrapはおぼえると頻繁に使うことになるかと思うので、導入手順をスムーズに行えるようになると良いですね。

また、本番環境でBootstrapを使う場合は、CDNではなく本体をダウンロード利用することをオススメします。参照しているリンクが切れたり、ネットに繋がらない場合はレイアウトが崩れてしまう恐れがあるからです。

逆に、テスト環境でサイトを構築する場合は、CDNの方がコピペだけで導入ができて楽ですね。参考にしてください。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
Bootstrapを使うだけで、かんたんにスマホ対応のサイトが作れていいですよねー。Bootstrapを使ったテンプレート集等、ネット上にたくさんあるので興味がある人は調べてみてください。

 - Bootstrap

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

Bootstrapのfileアップロードフォームがダサいから装飾してみた

こんにちは、okutani(@okutani_t)です。Bootstrapデフォ …

「ClockPicker」を使ってBootstrapでカッコいい時間入力を実装する

こんにちは、okutani(@okutani_t)です。仕事でカッコいい時間入力 …

BootstrapのUIキット「Flat UI」がオシャレでオススメな件

こんにちは、okutani(@okutani_t)です。みなさんBootstra …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。