前回の復習
前回は、Bootstrapのダウンロード方法・ファイル・フォルダの紹介をしました。 第2回目は、Bootstrapの読み込み方・実際に動かすところまでを紹介をします。 読み込みってなんだ？と、少しややこしく感じると思いますが全然難しいことではありません！ ゆっくり進めていきましょう！！！ こちらの記事は、初心者の方に向けての記事となっております。 Macの環境を前提に紹介をしています。始める前の準備
Bootstrapを読み込むのに必要なフォルダ・ファイルについて書いていきます。 まず初めに、testというフォルダを作成してください。 （デスクトップで右クリックをすると、新規フォルダと表示されるのでクリックするとフォルダができます。） testフォルダが作成できたら、次にindex.htmlというファイルを作成します。 テキストエディットを開き何も書いていない状態で、ファイル名をindex.htmlにして保存をしてください。 作成したindex.htmlと、第1回目でダウンロードした Bootstrapフォルダを testフォルダの中に入れてください。＜ 例 ＞
test
- Bootstrap
- index.html
htmlファイルに必要なタグ
index.htmlに必要なタグを書いていきましょう。＜ 参考 ① ＞ htmlファイルを使用するのに必要なタグ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>実際にBootstrapを動かしてみよう！</title> </head> <body> <p>Bootstrapを使う練習。</p> </body> </html>
＜ 参考 ② ＞ それぞれのタグの説明。
<!DOCTYPE html> 文書型宣言です。html5で作成するため!DOCTYPE htmlとなります。 <html lang="ja"></html> 言語を指定できます。日本語を指定する場合は、lang="ja"となります。 <head></head> ページに必要なデータ・詳細を書く場所です。 <meta charset="UTF-8"> 文字エンコーディングを指定しています。文字化けを防ぎます。 <title></title> ページのタイトルの記入欄。 <body></body>書いた内容が実際に表示されます。
＜ 例 ＞
Bootstrapを使う練習。
Bootstrapを読み込んでみよう
次は、実際にBootstrapを読み込んでみましょう。＜ 参考 ③ ＞
<!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="bootstrap/css/bootstrap.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <p>Bootstrapを使う練習。</p> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
Bootstrap読み込みの確認
では、実際にBootstrapを読み込めているか確認してみましょう！！＜ 参考 ④ ＞
<!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="bootstrap/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>Bootstrapを使う練習。</p>
<button class="btn btn-primary">ボタン</button>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
＜ 例 ＞
Bootstrapを使う練習。
