bootstrapとは
- cssのフレームワーク
- 自分でcssを書かなくてもシンプルできれいな画面を作れる
- bootstrapのcssで定義されたスタイルを適用していくので、特定のclass名をhtmlタグにつけていくだけ
- 最新版は4系だけどこの記事では3系について書いていく
- https://getbootstrap.com/docs/3.3/
動作確認するためのセットアップ手順
- ここからダウンロードしてzipを展開する
- BootstrapはjQueryというjavascriptのライブラリに依存している
- jQueryはここからダウンロードしてjsフォルダに入れておく
- ソースが直接表示されてしまう場合は右クリックで名前をつけて保存する
- フォルダに
jquery.jsという名前で配置
- こんな状態になっていればOK
- 不要なファイルを除外して最小限にするならこんな感じ
動作確認
- bootstrapのファイルを配置したフォルダ内に
index.htmlを作成する
- index.htmlに以下の内容を記載する
index.html
<html>
<head>
<meta charset="utf-8">
<title>bootstrap sample</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.js"></script>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
- headタグの中でcssとjavascriptを読み込んでいる
- ファイルをブラウザで開くとこんな感じ
- ここまでできたら後はbodyの中を作っていくだけ
- html + css + javascriptはファイルを作ってブラウザで開くだけで動作確認できるので便利
- 次回以降具体的な画面の作り方を見ていく
次回
- 続きはこちら