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

ウェブサービス

Post on:2011年2月14日

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>