HTMLページをゼロから作る時のベースとなるHTML5テンプレート「HTML5 Boilerplate」をご紹介します。
ページに必要最低限記述した方が良いmeta情報等が用意されてるので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>
HTML5 Boilerplateを使ったHTMLテンプレートデモページ
HTML5 Boilerplateを使ったHTMLテンプレートデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。