HTML5 Boilerplateを使ったHTML5テンプレート｜DAD UNION

HTMLページをゼロから作る時のベースとなるHTML5テンプレート「HTML5 Boilerplate」をご紹介します。
ページに必要最低限記述した方が良いmeta情報等が用意されてるのでHTMLページをゼロから作る時に使うと便利です。

Contents

HTML5 Boilerplateとは
HTML5 BoilerplateのHTML記述
HTML5 Boilerplateを使ったHTMLテンプレートデモページ

HTML5 Boilerplateとは

HTML5 Boilerplateは、ブラウザ間の互換性を備えたHTML5 Webサイトを作成するためのHTML、CSS、およびJavaScriptテンプレートです。
（ウィキペディア参考）

HTML5 BoilerplateのHTML記述

※必要最低限HTMLページに記述した方が良いdoctype、metaタグ、cssファイル（normalize.css、style.css）、jsファイル（modernizr-3.12.0.min.js、app.js）読み込みがの記述が用意されてました。これをベースに記述を書き換えてHTMLページをコーディングすると良いです。

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">

  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <!-- Add your site or application content here -->
  <p>Hello world! This is HTML5 Boilerplate.</p>
  <script src="js/vendor/modernizr-3.12.0.min.js"></script>
  <script src="js/app.js"></script>

</body>

</html>