わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr

HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。

サイトのキャプチャ

Initializr - Start your HTML5 project in 15 seconds!

[ad#ad-2]

InitializrでHTML5のテンプレート一式を作成する方法

HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。

トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。

サイトのキャプチャ

Initializr - Start your HTML5 project in 15 seconds!
選択項目のキャプチャ

[ad#ad-2]

Initializrで作成されるHTML5のテンプレート

作成されたHTML5のテンプレートは、下記のようになります。
選択項目は全部デフォルトのままです。

<!DOCTYPE html>
<!--&#91;if lt IE 7 &#93;> <html lang="en" class="no-js ie6"> <!&#91;endif&#93;-->
<!--&#91;if IE 7 &#93;>    <html lang="en" class="no-js ie7"> <!&#91;endif&#93;-->
<!--&#91;if IE 8 &#93;>    <html lang="en" class="no-js ie8"> <!&#91;endif&#93;-->
<!--&#91;if IE 9 &#93;>    <html lang="en" class="no-js ie9"> <!&#91;endif&#93;-->
<!--&#91;if (gt IE 9)|!(IE)&#93;><!--> <html lang="en" class="no-js"> <!--<!&#91;endif&#93;-->
<head>
	<meta charset="UTF-8">
	
	<title>Your website name</title>
	
	<meta name="description" content="">
	<meta name="author" content="">
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	
	<link rel="stylesheet" href="css/style.css?v=2">

	<script src="js/libs/modernizr-1.6.min.js"></script>
</head>
<body>
<p class="info">Your HTML5 project is almost ready! Please check the <a href="TODO.txt">TODO list</a>.</p>
	<div id="header-container">
		<header class="wrapper">
			<h1 id="title">Your title</h1>
			<nav>
				<ul>
					<li><a href="#">Some</a></li>
					<li><a href="#">navigation</a></li>
					<li><a href="#">links</a></li>
				</ul>
			</nav>
		</header>
	</div>
	<div id="main" class="wrapper">
		<aside>
			<h3>Something aside</h3>
		</aside>
		<article>
			<header>
				<h2>Your article heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra. Pellentesque auctor neque quis nisl lacinia id rutrum lacus venenatis.</p>
			</header>
			<h3>A smaller heading</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra. Pellentesque auctor neque quis nisl lacinia id rutrum lacus venenatis.</p>	
			<h3>A smaller heading</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra. Pellentesque auctor neque quis nisl lacinia id rutrum lacus venenatis.</p>
			<footer>
			<h3>About the author</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
			</footer>	
		</article>
	</div>
	<div id="footer-container">
		<footer class="wrapper">
			<h3>A nice footer</h3>
		</footer>
	</div>
	<p id="jquery-test" href="#" class="info">jQuery is not loaded</p>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
	<script src="js/script.js"></script>
	<!--&#91;if lt IE 7 &#93;>
	<script src="js/libs/dd_belatedpng.js"></script>
	<script> DD_belatedPNG.fix('img, .png_bg');</script>
	<!&#91;endif&#93;-->
</body>
</html>

テンプレートの修正箇所

ダウンロードしたファイル一式には「TODO.txt」が付属しており、修正すべき箇所が記載されています。以下は、それを意訳したものです。

  • 作成するページが英語ではない場合、htmlタグのlang属性を「en」から使用する言語に変更してください。
  • title, meta description, meta authorに適切なデータを記載してください。
  • ファビコンを変更してください。
  • index.htmlから、「TODO.txt」へのリンクを削除してください。
  • サーバーで404の設定をしているならば、404.htmlを用意してください。

sponsors

top of page

©2018 coliss