Help us understand the problem. What is going on with this article?

【備忘録:Webサイト作成の基礎】HTML5のテンプレート

はじめに

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のテンプレート

こちらを参考に

参考サイト

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away