基本コード

Head Tag（Headタグで頻繁に使用する内容）

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <meta name="description" content="120文字以内"> <!-- SEO関連 -->
  <!-- OGP -->
  <meta property="og:title" content="このページのタイトル">
  <meta property="og:type" content="TOPページはwebsite、子ページはarticle">
  <meta property="og:url" content="このページのURL">
  <meta property="og:image" content="1200×630以上推奨、絶対パスで指定">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:description" content="80〜90文字推奨">
  <meta name="twitter:card" content="summary or summary_large_image">
  <meta name="twitter:site" content="@ユーザー名">
  <!-- /OGP -->
  <meta name="format-detection" content="telephone=no"> <!-- スマホ向け電話番号自動リンク無効 -->
  <link rel="shortcut icon" sizes="16x16" href=""> <!-- ファビコン -->
  <link rel="apple-touch-icon" sizes="192x192" href=""> <!-- タッチアイコン -->
  <link rel="shortcut icon" sizes="192x192" href=""> <!-- タッチアイコン -->
  <meta name="last-modified" content="Sun, 29 Dec 2019 20:30:30 GMT"> <!-- SEO関連 -->
</head>


<!-- GoogleFonts(日本語) -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap" rel="stylesheet">

<!-- クローラー -->
<meta name="robots" content="noindex">

/*
  Base
---------------------------------------------- */
html {
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* 画面からはみ出る原因確認方法 */
* {
  outline: 2px solid blue;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS P Gothic', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #14171a;
  letter-spacing: 0.05em;
  background-color: #fafafa;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
strong {
  font-weight: bold;
}

li {
  list-style: none;
}

input,
textarea {
  max-width: 100%;
  font-family: inherit;
  font-size: 100%;
}
.wrapper {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  /* padding: 0 4%; */
}