1. HTMLのスターターテンプレートとは？

HTMLスターターテンプレートとは、ウェブページを作り始めるときの基本の土台です。
家でいうところの基礎工事にあたる部分で、このベースがあることで、その後のデザインやレイアウトがうまく表示されます。

特に、スマホ対応のためのmeta viewportタグや、デザインを整えるCSSの準備が含まれているのが特徴です。

2. meta viewportって何？スマホ対応のキモ

meta viewport（メタ・ビューポート）とは、スマホやタブレットでページを見たときの表示サイズを調整するタグです。

たとえば、スマホでページを開いたのに文字が極端に小さくなった経験はありませんか？それはviewportが設定されていない場合によく起こります。

以下のように書くことで、画面の幅に合わせた自然な表示になります。


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

3. BootstrapのCDN読み込みとは？

CDN（シーディーエヌ）とは、「インターネット上にある共有ファイル置き場」のようなものです。

BootstrapというデザインのテンプレートセットをこのCDNから読み込むことで、美しいレイアウトやボタンなどが簡単に使えるようになります。

Bootstrap 5のCSSとアイコンを読み込むには、以下のように書きます：


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

4. 初心者におすすめの初期CSSスタイルの定石

最初のCSSには、ページ全体の余白や文字の大きさ、背景などを軽く整える内容を設定するのが一般的です。

これを設定しておくと、後からデザインを加えるときにバランスが良くなります。

以下は、初心者向けにおすすめの初期スタイルの例です：


<style>
    body {
        margin: 20px;
        font-family: sans-serif;
        background-color: #f8f9fa;
    }
    h1 {
        color: #0d6efd;
    }
</style>

<h1>はじめてのHTMLページ</h1>
<p>これは初期CSSが設定されたサンプルです。</p>

ブラウザ表示

5. スターター構成のサンプルを見てみよう

ここまで説明した内容をすべて組み込んだ、初心者向けのスターターテンプレートを紹介します。

このHTMLをコピペして使えば、スマホ対応もできて、Bootstrapもすぐ使える状態になります。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>スターターテンプレート</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    body {
        margin: 20px;
        font-family: sans-serif;
        background-color: #f8f9fa;
    }
    h1 {
        color: #0d6efd;
    }
  </style>
</head>
<body>
  <div class="container text-center">
    <h1><i class="bi bi-lightning-charge-fill me-2"></i>スターター構成できました！</h1>
    <p>metaタグ・CDN・CSSがすでに組み込まれています。</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザ表示