はじめに
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のテンプレート
こちらを参考に