HTMLの基本テンプレート

戻る

新しいHTMLファイルを作成するときの基本テンプレートです。
コメント（<!-- ～ -->）を参考にしながら、必要な内容を書き換えて使用してください。

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">

  <!-- ページの概要 -->
  <meta name="description"
        content="ページの概要">

  <!-- 作者 -->
  <meta name="author"
        content="Canape">

  <!-- 電話番号・住所・メールアドレスの自動リンクを防止 -->
  <meta name="format-detection"
        content="telephone=no, address=no, email=no">

  <!-- ブラウザ間の表示差を少なくする -->
  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

  <!-- 自分のCSS -->
  <link rel="stylesheet" href="style.css">

  <!-- ページタイトル -->
  <title>ページタイトル</title>

</head>

<body>

  <!-- ページの内容 -->

  <a href="https://example.com"
     target="_blank"
     rel="noopener noreferrer">
     外部サイト
  </a>

</body>
</html>

ポイント

• DOCTYPE：HTML5であることを宣言します。
• lang="ja"：ページの言語を日本語に設定します。
• charset="UTF-8"：文字化けを防ぎます。
• viewport：スマートフォンに対応します。
• description：ページの概要を設定します。
• Normalize.css：ブラウザごとの表示差を少なくします。
• style.css：自分で作成したCSSを読み込みます。
• target="_blank"：リンクを新しいタブで開きます。
• rel="noopener noreferrer"：外部リンクを安全に開くための設定です。