初心者向けスターターテンプレート：meta viewport・CDN・初期CSSをやさしく解説

初心者向けスターター：meta viewport・CDN読み込み・初期CSSの定石

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapを使ってホームページを作ってみたいのですが、まず何から始めたらいいですか？」

先生

「まずはスターターテンプレートから始めましょう。metaタグ、CDNの読み込み、初期CSSの書き方を知ることが大事です。」

生徒

「metaタグって何ですか？CDNってよくわからないです…」

先生

「大丈夫です。一つ一つゆっくり解説していきますね！」

1. <meta viewport>の意味と役割とは？

HTMLの中でよく見る<meta name="viewport">は、スマートフォンやタブレットなどの画面サイズに合わせて表示を調整するためのタグです。

このタグがないと、スマホで見たときに文字が小さくなったり、画面がはみ出したりしてしまいます。

基本的には下記のように書きます。


<meta name="viewport" content="width=device-width, initial-scale=1">

2. CDNとは？Bootstrapを簡単に使う魔法の仕組み

CDN（シーディーエヌ）とは「コンテンツデリバリーネットワーク」の略で、インターネット上にある共有ファイルを素早く読み込める仕組みです。

自分のパソコンにBootstrapのファイルを保存しなくても、CDNを使えばすぐに読み込めます。

Bootstrap公式のCDNをHTMLに貼るだけで、ボタンやレイアウトがすぐに使えるようになります。

下記のように<link>や<script>タグで読み込みます。


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

3. HTMLのスターターテンプレートを作ってみよう

meta viewport、CDN、タイトルなどを含めたHTMLの基本の形（スターターテンプレート）を作ってみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>はじめてのBootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-primary text-center mt-5">こんにちは、Bootstrap！</h1>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザ表示

4. 初期CSSでよく使うスタイルを覚えよう

自分でCSSを書くときに、最初に決めておくと便利なスタイルを初期CSS（リセットCSS）といいます。

例えば、全体の余白をなくしたり、文字のサイズを調整したりします。以下は初心者でもよく使われる例です。


<style>
    body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
    }
    h1 {
        font-size: 2rem;
    }
</style>

<h1>リセットされた見出し</h1>

ブラウザ表示