Bootstrap - スターターテンプレートデモ
こんにちは、Web開発志望者の皆さん！今日は、Bootstrapの素晴らしい世界に飛び込み、スターターテンプレートについて探求します。近所の親切なコンピュータサイエンスの先生として、この旅を案内するのがとても楽しみです。お気に入りの飲み物を片手に、リラックスして、始めましょう！
スターターテンプレートとは？
Bootstrapのスターターテンプレートの詳細に突き込む前に、まずスターターテンプレートが実際に何かを理解しましょう。ウェブサイトの構造のための préメイドのレシピのように考えてください。レシピが材料と作り方を提供して、美味しい料理を作る手助けをするように、スターターテンプレートは基本的なHTML、CSS、JavaScriptを提供して、Webプロジェクトを迅速に始動させる的东西です。
Bootstrapの文脈では、スターターテンプレートはBootstrapのコンポーネントと依存関係をすべて含む基本的なHTMLファイルです。これが、キャンバスがすでに用意されていて、絵の具が全部揃っているようなものです！
スターターテンプレートを使う理由は？
「スターターテンプレートを使う意味は何だろう？すべてから scratch で書くのでは？」と疑問に思うかもしれません。確かに、すべてから書くことはできますが、私の初期の教師生活の小さな話を共有しましょう。
私の授業にいたある生徒は、すべてを基から作ることを主張していました。彼は admirer ですが、基本的なレイアウトの問題に週単位で苦しみました。Bootstrapで数分で解決できる問題です。その生徒のように働かないでください - スマートに働きましょう！
スターターテンプレートを使用することで、以下のことができます：
- 時間を節約します
- 必要な依存関係をすべて確保します
- 一貫した出発点を提供します
- 実際のコンテンツと機能に集中できます
「なぜ？」が理解できたので、「どのように？」を見てみましょう！
Bootstrap スターターテンプレート
基本的なBootstrapスターターテンプレートは以下のようになります：
<!doctype html>
<html lang="en">
<head>
<!-- 必要なメタタグ -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- オプションのJavaScript；どちらか1つを選んでください！ -->
<!-- オプション1: Bootstrap バンドルとPopper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- オプション2: 分離されたPopperとBootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>これを順番に見ていきましょう：
ドキュメントタイプ宣言
<!doctype html>この行はブラウザに、これはHTML5ドキュメントであることを伝えます。自己紹介をし、会話を始める前的のようなものです。
HTMLタグ
<html lang="en">このタグはHTMLドキュメントを開き、言語が英語であることを指定します。本を開いて英語で書かれている 것을確認するようなものです。
ヘッダーセクション
<head>
<!-- 必要なメタタグ -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head><head>セクションには、ドキュメントに関するメタデータが含まれています。以下に分解します：
-
<meta charset="utf-8">: これはHTMLドキュメントの文字エンコーディングを指定します。UTF-8はすべての文字を表現できる万能な文字エンコーディングです。 -
<meta name="viewport" content="width=device-width, initial-scale=1">: これはウェブページがレスポンシブであり、すべてのデバイスで見栄えよく表示されるようにします。 -
<link>タグはBootstrapのCSSファイルをCDNからインポートします。これはウェブページのスタイルガイドをインポートするようなものです。 -
<title>: これはウェブページのタイトルを設定し、ブラウザタブに表示されます。
ボディーセクション
<body>
<h1>Hello, world!</h1>
<!-- オプションのJavaScript；どちらか1つを選んでください！ -->
<!-- オプション1: Bootstrap バンドルとPopper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- オプション2: 分離されたPopperとBootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body><body>セクションはウェブページの主要なコンテンツが含まれています。このスターターテンプレートでは以下のことを含みます：
- シンプルな「Hello, world!」の見出しを始めます。
- JavaScriptファイルをBootstrapの機能に使用します。2つのオプションがあります：
- オプション1: BootstrapとPopper.jsを含む単一のバンドルファイル。
- オプション2: 分離されたPopper.jsとBootstrapのファイル（デフォルトではコメントアウトされています）。
スターターテンプレートの使用方法
スターターテンプレートを解析したので、これを使って簡単なウェブページを作成する例を見てみましょう：
<!doctype html>
<html lang="en">
<head>
<!-- 必要なメタタグ -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>私の最初のBootstrapページ</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">私のウェブサイトへようこそ！</h1>
<p class="lead">これはシンプルなヒーローユニットで、特集コンテンツや情報に追加の注目を集めるためのシンプルなジンボタンスタイルのコンポーネントです。</p>
<hr class="my-4">
<p>これはタイポグラフィとスペースを整えるためのユーティリティクラスを使用して、大きなコンテナ内のコンテンツを間隔を空けて配置します。</p>
<a class="btn btn-primary btn-lg" href="#" role="button">もっと詳しく</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>この例では、Bootstrapクラスを使用してシンプルなヒーローユニット（強調メッセージボックス）を追加しています。以下に追加した内容を分解します：
-
<div class="container">: これは応答型の固定幅コンテナを作成します。 -
<h1 class="mt-5">:mt-5クラスは見出しの上にマージンを追加します。 -
<p class="lead">:leadクラスはこのパラグラフを強調します。 -
<hr class="my-4">: これは水平線を生成し、y軸方向のマージンを設定します。 -
<a class="btn btn-primary btn-lg">: これは大きな、主要なボタンを作成します。
結論
そして、ここまででBootstrapのスターターテンプレートについての旅が終わりました。Bootstrapスターターテンプレートを使って、シンプルなウェブページを作成する方法を学びました。これが始まりです。Bootstrapには、素晴らしいコンポーネントやユーティリティがたくさんあります。
私の教え子の一人が、この同じテンプレートから始めて、期末ではポートフォリオサイトを作成し、インターンシップを獲得しました。あなたも数ヶ月後にはその彼女かもしれません！
練習を続け、探索を続け、最も重要なことは、楽しむことです。Web開発は芸術であり、科学でもあります。あなたの創造力を存分に発揮してください。次回まで、ハッピーコーディング！
Credits: Image by storyset