HTML5に対応したテンプレートについて

TOP
コラム
HTML5に対応したテンプレートにつ

はじめに

ホ―ムページを作成する際、HTMLやCSS、Javascriptなどを１から用意するのは大変ですよね。そんなときは、テンプレートを使うのが良いでしょう。テンプレートとは、ページを作る際にHTML、CSS、Javascriptなどがあらかじめ用意されているファイルの集まりです。たくさんの種類がありますが、ここではHTML5に対応したテンプレートを紹介していきます。本記事では、HTML5に対応したテンプレートであるHTML5 Boilerplateを紹介していきます。

Boilerplate

HTML5 Boilerplateは、非常に有名で人気なフロントエンドテンプレートです。200人を超えるコントリビューターが10年間の分析・研究・実験を行っていてるため、使いやすく、洗練されたテンプレートといえるでしょう。特徴として、プログレッシブ・エンハンスメントを念頭に置いて設計されています。プログレッシブ・エンハンスメントとは、核となっているコンテンツを最も重要視するウェブデザイン戦略です。

プログレッシブ・エンハンスメント

この戦略では、エンドユーザーの環境がどのようなものであっても、核となるコンテンツが利用できるようになっています。ブラウザによって基本的なコンテンツを表示し、高度な環境の場合は同じコンテンツの拡張バージョンを提供することができます。つまりBoilerplateでは、作成したコンテンツが様々なブラウジング環境で表示されるように設計されているのです。

サポートされているブラウザ

以下のブラウザが、Boilerplateではサポートされています。

Chrome (latest 2)
Edge (latest 2)
Firefox (latest 2)
Internet Explorer 11
Opera (latest 2)
Safari (latest 2)

しかし、これらはHTML5 Boilerplateは古いブラウザーで利用できないことを意味するのではなく、上のブラウザーとの互換性が確保されていることだけを意味します。上記以外に、古いブラウザーのサポートが必要な場合は、HTML5 Boilerplateのv6やv5が利用できます。v6はIE9とIE10に、v5はIE8にそれぞれ対応していますが、現在は積極的な開発は終わっています。

ライセンス

ライセンスはMITライセンスとなっております。MITライセンスは、マサチューセッツ工科大学が起源である代表的なソフトウェアライセンスです。自由に使っていいが、本許諾表示は必須、もとの作成者は関知しない、という感じのライセンスです。

HTML5の基本テンプレート

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="manifest" href="site.webmanifest">

  <link rel="apple-touch-icon" href="icon.png">

  <!-- Place favicon.ico in the root directory -->

 

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

  <link rel="stylesheet" href="css/main.css">

 

  <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.11.2.min.js"></script>

  <script src="js/plugins.js"></script>

  <script src="js/main.js"></script>

 

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->

  <script>

    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;

    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')

  </script>

  <script src="https://www.google-analytics.com/analytics.js" async></script>

</body>

 

</html>

おわりに

本記事ではHTML5テンプレートとBoilerplateについて紹介しました。皆さんも是非、サービスを作成する際には使ってみてください。