Bootstrap4が公開されていますが、まだα版ということもあり、まだまだ現役バリバリのBootstrap3。レスポンシブデザインをやるなら必ずと言っていいほどCSSフレームワークが取り入れられていますが、その中でも特に人気の高いフレームワークでもあります。
この記事ではこれからBootstrap3を始めるWebクリエイターさんから、Web系に転身された元Lisp使いの方まで、神ってるWebデザイナーになるためのBootstrap3の始め方をやさしく解説していきたいと思います。
Bootstrap3をさくっとインストール
Bootstrap3に必要なファイルのダウンロード
まずはBootstrap3の公式サイトにアクセスします。
トップにDownloadボタンがあるのでこれをクリックしてダウンロードページへ移動。ダウンロードページでは3つのリンクがありますが、中央と右のファイルはソースコードが入っており、複雑な構造になっているため、最初のうちは一番左を選んでおけばOK。
ダウンロードすると、ダウンロードフォルダにbootstrap-3.3.7-dist.zipというファイルがあると思うのでこれを展開しておきます。
Bootstrap3の表示方法
Bootstrap3のダウンロードファイルの中身
必要なファイルのダウンロードができたら解凍したフォルダの中身を見てみましょう。以下のように3つのフォルダが含まれています。
- css: cssファイルがまとめられているフォルダ
- fonts: glyphiconのフォントファイルが入っているフォルダ
- js: javascriptファイルがまとめられているフォルダ
表示するにはHTMLファイルからこれらを読み込めばOK。
高品質なコードエディターでBootstrapを編集しやすくしよう!
HTMLファイルは標準搭載されているメモ帳などで作成してもいいのですが、コーディングしづらいこととコードの見た目も分かりにくくなるため、コードエディターを使うことをオススメします。
コードエディターは無料で使えてWindowsにもMacにも対応しているBracketsがおすすめ。非常に軽量で起動もさくさく。拡張機能を使って後から様々な機能を追加できるので、プロのエンジニアさんやWebデザイナーさんもよく使ってます。
Braketsのインストールは通常のアプリと同じ。ダウンロードしたファイルを実行してインストールしてください。特にやっておかなければいけない初期設定などもないのでインストール後はすぐに使うことができます。
Bracketsをインストールしたら早速起動してみましょう。するとBracketsの使い方がまとめられたHTMLファイルが表示されます。初めて使う方は一通り目を通しておくといいかもですね。
コードエディターでHTMLファイルを作成
さて、準備が整ったところでさっそくHTMLファイルの作成をしてみたいと思います。Bracketsを開いて最初のドキュメントが出てきたら、左サイドバーの「Get Started」の右側にある下三角をクリックしてドロップダウンを表示します。
「フォルダーを開く」から先ほどダウンロードして解凍した「bootstrap-3.3.7-dist」フォルダを選択して「開く」をクリックします。このほかに「ファイル」メニューから「フォルダを開く」を選んでも開くことができます。
フォルダを開いた状態で左サイドバー上で右クリックしてから「新しいファイル」をクリックし、入力フォームにindex.html
と入力してエンターキーで確定します。
これで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ファイルをダブルクリックして「Hello World」と表示されていればOK。
この時点で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に慣れている方ならすぐにでも使い始めることができるので色々いじってみましょう。
最後までご覧いただきありがとうございました 🙂