Bootstrapの基本をおさえよう (3/5)
作成:2017-02-04 10:23
更新:2017-02-04 10:23
更新:2017-02-04 10:23
■Bootstrapの基本コード
では、Bootstrapを使ったWebページがどのようになるのか、その基本的なソースコードを書いてみましょう。まずは、CDNを使わず、ファイルをすべてローカルに設置した場合の書き方です。
下に掲載したリストが、サンプルのHTMLソースコードです。これを記述し、Bootstrapのフォルダ内に「index.html」といった名前で保存しましょう。
（※ここでは、jquery-3.1.1.min.jsというファイル名で「js」内にjQueryのファイルを配置した前提で記述してあります）
一見すると、普通のソースコードに見えますが、いろいろとポイントがあります。ざっとポイントを整理しましょう。
●bootstrap.css/bootstrap-theme.cssのロード
Bootstrapは、スタイルシートが重要な役割を果たします。「bootstrap.css」と「bootstrap-theme.css」の２つは必ず読み込んで下さい。なお、ここではbootstrap.min.css/bootstrap-theme.min.cssを使っていますが、どちらでも同じです。
●スクリプトはどこで読み込む？
スクリプトファイルは、２つあります。jQuery（jquery-xxx.js）と、Bootstrap本体（bootstrap.js）です。これらは、<body>タグのロードが完了したあとで読み込ませるようにします。
これは、Bootstrapのテンプレートでそうなっているので、それにあわせています。が、実は<head>内に<script>タグを用意しても問題なく動きます。Bootstrapのスクリプトを見ると、
このようにしてロード後に処理が実行されるようにちゃんとできていますので、「<body>の後に読み込ませるように書かなかったから動かない」なんてことはありません。お好きな場所にどうぞ。
●表示内容は<div class="container">内に書く
見ればわかるように、<body>内には、まず<div class="container">というタグがあり、その中にコンテンツが記述されています。これは、別に必須というわけではないのですが、お約束としてこう書いたほうがいいでしょう。
この<div class="container">タグは、コンテンツの周囲に若干の余白を用意します。これがないと、コンテンツ関係はウインドウの両端まで隙間なく表示されてしまいます。
Bootstrapは、表示デバイスやウインドウの横幅に応じてコンテンツの横幅を自動調整しますが、<div class="container">がないと「端から端までべたっと表示」になり、Bootstrapらしさがなくなってしまうのです。
下に掲載したリストが、サンプルのHTMLソースコードです。これを記述し、Bootstrapのフォルダ内に「index.html」といった名前で保存しましょう。
（※ここでは、jquery-3.1.1.min.jsというファイル名で「js」内にjQueryのファイルを配置した前提で記述してあります）
一見すると、普通のソースコードに見えますが、いろいろとポイントがあります。ざっとポイントを整理しましょう。
●bootstrap.css/bootstrap-theme.cssのロード
Bootstrapは、スタイルシートが重要な役割を果たします。「bootstrap.css」と「bootstrap-theme.css」の２つは必ず読み込んで下さい。なお、ここではbootstrap.min.css/bootstrap-theme.min.cssを使っていますが、どちらでも同じです。
●スクリプトはどこで読み込む？
スクリプトファイルは、２つあります。jQuery（jquery-xxx.js）と、Bootstrap本体（bootstrap.js）です。これらは、<body>タグのロードが完了したあとで読み込ませるようにします。
これは、Bootstrapのテンプレートでそうなっているので、それにあわせています。が、実は<head>内に<script>タグを用意しても問題なく動きます。Bootstrapのスクリプトを見ると、
$(window).on('load', function () {……}このようにしてロード後に処理が実行されるようにちゃんとできていますので、「<body>の後に読み込ませるように書かなかったから動かない」なんてことはありません。お好きな場所にどうぞ。
●表示内容は<div class="container">内に書く
見ればわかるように、<body>内には、まず<div class="container">というタグがあり、その中にコンテンツが記述されています。これは、別に必須というわけではないのですが、お約束としてこう書いたほうがいいでしょう。
この<div class="container">タグは、コンテンツの周囲に若干の余白を用意します。これがないと、コンテンツ関係はウインドウの両端まで隙間なく表示されてしまいます。
Bootstrapは、表示デバイスやウインドウの横幅に応じてコンテンツの横幅を自動調整しますが、<div class="container">がないと「端から端までべたっと表示」になり、Bootstrapらしさがなくなってしまうのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!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"> <title>Bootstrap</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> </head> <body > <div class="container"> <h1>Hello, world!</h1> <p>This is Bootstrap sample page!</p> </div> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>
※関連コンテンツ