はじめに

HTML, CSS, JSを使って静的なWebサイトを作る際、毎回始めに使っているHTMLのテンプレートがあるので、それをまとめてみた。

HTMLのテンプレート

`<head>`

index.html

<!DOCTYPE>
<html lang="ja">
<head>
  <!--基本-->
  <meta charset="utf-8">
  <meta name="description" content="サイトの説明文">
  <meta name="keyword" content="キーワード1, キーワード2, ...">
  <title>hoge hoge</title>
  <!--SEO対策のようなもの？-->
  <meta property="og:type" content="website">
  <meta property="og:title" content="タイトル">
  <meta property="og:description" content="サイトの説明文">
  <meta property="og:url" content="サイトURL">
  <meta property="og:image" content="サイトアイコン画像のパス指定">
  <!--アイコン画像-->
  <link rel="icon" type="shortcut icon" href="サイトアイコン画像のパス指定">
  <!--レスポンシブ対応-->
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <!--CSS-->
  <link href="CSSファイルのパス指定" rel="stylesheet" type="text/css">
</head>

<body>
</body>

</html>

jsやjQueryの読み込みは、<body>タグの最下部でおこなう。
そうすることで、ページの表示速度が多少早くなるらしい。

`<body>`

index.html

<body>

  <header></header>

  <main></main>

  <footer></footer>
  
  <!--jQuery読み込み-->
  <script src="jQueryのCDN" type="text/javascript"></script>
  <!--JavaScript-->
  <script src="JSファイルのパス指定" type="text/javascript"></script>
</body>

ちなみに、<main>タグはinline要素として扱われることがあるので、CSSでmain{display: block}と指定する癖をつけておくと面倒なことが起きにくい。

CSSのテンプレート

こちらを参考に

参考サイト