10

More than 5 years have passed since last update.

bootstrapを使ってシンプルなWebページを作成する①〜セットアップ〜

Last updated at 2017-10-29Posted at 2017-10-26

bootstrapとは

cssのフレームワーク
自分でcssを書かなくてもシンプルできれいな画面を作れる
bootstrapのcssで定義されたスタイルを適用していくので、特定のclass名をhtmlタグにつけていくだけ
最新版は4系だけどこの記事では3系について書いていく
https://getbootstrap.com/docs/3.3/

動作確認するためのセットアップ手順

ここからダウンロードしてzipを展開する
BootstrapはjQueryというjavascriptのライブラリに依存している
jQueryはここからダウンロードしてjsフォルダに入れておく
- ソースが直接表示されてしまう場合は右クリックで名前をつけて保存する
- フォルダにjquery.jsという名前で配置
こんな状態になっていればOK

スクリーンショット 2017-10-26 22.16.18.png

不要なファイルを除外して最小限にするならこんな感じ

スクリーンショット 2017-10-26 22.18.06.png

動作確認

bootstrapのファイルを配置したフォルダ内にindex.htmlを作成する

スクリーンショット 2017-10-26 22.20.43.png

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を読み込んでいる
ファイルをブラウザで開くとこんな感じ

スクリーンショット 2017-10-26 22.26.24.png

ここまでできたら後はbodyの中を作っていくだけ
html + css + javascriptはファイルを作ってブラウザで開くだけで動作確認できるので便利
次回以降具体的な画面の作り方を見ていく

次回

続きはこちら

10

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

10