神ってるWebデザイナーになるためのBootstrap3の始め方

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

One owl to rule them all

Bootstrap4が公開されていますが、まだα版ということもあり、まだまだ現役バリバリのBootstrap3。レスポンシブデザインをやるなら必ずと言っていいほどCSSフレームワークが取り入れられていますが、その中でも特に人気の高いフレームワークでもあります。

この記事ではこれからBootstrap3を始めるWebクリエイターさんから、Web系に転身された元Lisp使いの方まで、神ってるWebデザイナーになるためのBootstrap3の始め方をやさしく解説していきたいと思います。

Bootstrap3をさくっとインストール

Bootstrap3に必要なファイルのダウンロード

まずはBootstrap3の公式サイトにアクセスします。
Bootstrap3のインストール方法-01

トップにDownloadボタンがあるのでこれをクリックしてダウンロードページへ移動。ダウンロードページでは３つのリンクがありますが、中央と右のファイルはソースコードが入っており、複雑な構造になっているため、最初のうちは一番左を選んでおけばOK。
Bootstrap3のインストール方法-02

ダウンロードすると、ダウンロードフォルダにbootstrap-3.3.7-dist.zipというファイルがあると思うのでこれを展開しておきます。

Bootstrap3の表示方法

Bootstrap3のダウンロードファイルの中身

必要なファイルのダウンロードができたら解凍したフォルダの中身を見てみましょう。以下のように３つのフォルダが含まれています。
Bootstrap3のインストール方法-03

  • css: cssファイルがまとめられているフォルダ
  • fonts: glyphiconのフォントファイルが入っているフォルダ
  • js: javascriptファイルがまとめられているフォルダ

表示するにはHTMLファイルからこれらを読み込めばOK。

高品質なコードエディターでBootstrapを編集しやすくしよう！

HTMLファイルは標準搭載されているメモ帳などで作成してもいいのですが、コーディングしづらいこととコードの見た目も分かりにくくなるため、コードエディターを使うことをオススメします。

コードエディターは無料で使えてWindowsにもMacにも対応しているBracketsがおすすめ。非常に軽量で起動もさくさく。拡張機能を使って後から様々な機能を追加できるので、プロのエンジニアさんやWebデザイナーさんもよく使ってます。
Bootstrap3のインストール方法-04

Braketsのインストールは通常のアプリと同じ。ダウンロードしたファイルを実行してインストールしてください。特にやっておかなければいけない初期設定などもないのでインストール後はすぐに使うことができます。

Bracketsをインストールしたら早速起動してみましょう。するとBracketsの使い方がまとめられたHTMLファイルが表示されます。初めて使う方は一通り目を通しておくといいかもですね。
コードエディターBracketsのインストール

コードエディターでHTMLファイルを作成

さて、準備が整ったところでさっそくHTMLファイルの作成をしてみたいと思います。Bracketsを開いて最初のドキュメントが出てきたら、左サイドバーの「Get Started」の右側にある下三角をクリックしてドロップダウンを表示します。
HTMLファイルの作成方法-01

「フォルダーを開く」から先ほどダウンロードして解凍した「bootstrap-3.3.7-dist」フォルダを選択して「開く」をクリックします。このほかに「ファイル」メニューから「フォルダを開く」を選んでも開くことができます。
HTMLファイルの作成方法-02

フォルダを開いた状態で左サイドバー上で右クリックしてから「新しいファイル」をクリックし、入力フォームにindex.htmlと入力してエンターキーで確定します。
HTMLファイルの作成方法-03

これでHTMLファイルの作成は完了。

HTMLファイルにBootstrapのコードを記述

HTMLコードはゼロから自分で書くこともできますが、Bootstrap3の公式ページでテンプレートが用意されているのでこれを使ってみます。

Bootstrap3ドキュメントのBasic templateにアクセスして、記述されているコードの右上にある「Copy」ボタンを押してコードをコピーします。

<!DOCTYPE html>
<html lang="en">
  <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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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.3/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.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

コピーしたコードをBracketsで開いているindex.html内にペーストしましょう（編集>ペースト）。
HTMLコードの記述-01

ペーストできたらファイルを保存（ファイル>保存）しておきます。HTMLファイルをダブルクリックして「Hello World」と表示されていればOK。
HTMLコードの記述-02

この時点でBootstrapがうまく読み込めない！という場合はCSSやJavascriptのリンクをチェックしてみてください。今回の例では以下のようなファイルの配置になっていれば正しく表示されるはずです。

<!-- index.html -->
bootstrap-3.3.7-dist/index.html

<!-- css -->
bootstrap-3.3.7-dist/css/bootstrap.min.css

<!-- js -->
bootstrap-3.3.7-dist/js/bootstrap.min.js

Bootstrap3の準備完了！

ここまででBootstrap3のダウンロード〜Hello Worldの表示までが出来ました。この状態まで出来れば、あとはbodyタグ内にBootstrap3ドキュメントに記載されているコードをコピーして貼り付けるだけで、各コンポーネントが表示されるようになります。HTMLやCSSに慣れている方ならすぐにでも使い始めることができるので色々いじってみましょう。

最後までご覧いただきありがとうございました 🙂