2014/06/09111 Shares

HTML5テンプレートが一瞬で作れるジェネレーター3選+おまけ2つ

html5

レスポンシブデザインのWordPressオリジナルテーマを作りはじめました。

使える時間が限られているので少しずつですが、便利なツールがたくさんあるので作業時間をかなり短縮できます。今回はHTML+CSSでベースを作るときに便利なジェネレーターを3つご紹介します。

特に意識しなくても取り組めるHTML5

今後主流になるHTML5ですが、現在のバージョンであるHTML4.01を何となく理解しているならスムーズに移行できます。

廃止タグや追加タグもありますが、その都度調べていけば問題ありません。けっこう適当で雑な書き方でも、ブラウザはきちんと表示してくれます。
※WEB屋さんになりたい方はきちんと勉強しましょう

<header>や<footer>、<section>、<nav>、<article>、<aside>という新たに追加されたタグを使って明確な文書構造を示すことができるのが大きなメリットです。詳しくは下記のサイトをご覧ください。

どのような構造でも、最終目標はお客様が見やすいサイトを作ることにあります。

簡単に基本構造を吐き出すジェネレーター

これからHTML5に取り組んで新しいサイトを作ろう、という僕のような素人にはHTML5ジェネレーターがおすすめです。基本を理解している必要はありますが、一瞬でテンプレートができます。

最もシンプルな「HTML5テンプレートジェネレーター」

日本語に対応しており、最も基本的でシンプル。

[追記-2014年2月4日]
アクセスできなくなったのでリンクを解除しました。

コードを初期値のままで生成すると、たった11行のテンプレートができあがります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
</body>
</html>

CSSや<body>内の構造は自分で書いていかなければなりません。

新しい要素を確認したい時に「SwitchToHTML5」

こちらもシンプルですが、要素をいくつか追加できます。

英語ですが、必要な箇所にチェックを入れてボタンを押せばこのようなテンプレートができます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>none</title>
<link rel="stylesheet" href="style.css" />
<meta name="generator" content="http://switchtohtml5.com">
</head>
<body>
<section>
	<header>
		<nav>
		</nav>
	</header>
</section>
	<article>
</article> 
	<aside>
	</aside>
<footer>
</footer>
</body>
</html>

レスポンシブデザインも可能な「Initializr」

最後にご紹介するのは、サンプルテキストとCSSも一緒に生成してくれるジェネレーター。レスポンシブデザインにも対応しているので、かなり便利です。

生成されたテンプレートをダウンロードしてブラウザで表示させると、このようになります。

initializr サンプル

ブラウザの幅に合わせてレイアウトが変わります。

おまけ:レスポンシブジェネレーター

レスポンシブデザインに特化したジェネレーターもあるので、2つご紹介します。

Responsify

グリッド付きで見やすく、ブラウザで確認しながらコードを生成できます。

ダウンロードファイルにはHTMLとCSSに加え、LESSとSCSSも同梱されています(素人な僕らにはあまり関係ありません)。

Responsive Web CSS

基本的なブレイクポイント(どの幅で表示を変えるか)とiPhoneやiPadのサイズを取得できます。

全部選択すると、このようなCSSサンプルに。

.box { float: left; }
#root { max-width: 1200px; margin: 0 auto; }

#box1 { width: 100%; }
#box2 { width: 70%; }
#box3 { width: 30%; }
#box4 { width: 100%; }


/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* iPad 3 & 4 Landscape */
@media only screen and (width: 481px) and (width: 1024px) and (orientation: landscape) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* iPad 3 & 4 Portrait */
@media only screen and (width: 481px) and (width: 1024px) and (orientation: portrait) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* iPhone 2G-3GS Landscape */
@media only screen and (width: 481px) and (width: 480px) and (orientation: landscape) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* iPhone 2G-3Gs Portrait */
@media only screen and (width: 481px) and (width: 480px) and (orientation: portrait) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* iPhone 4/4S Landscape */
@media only screen and (width: 569px) and (width: 480px) and (orientation: landscape) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* iPhone 4/4S Portrait */
@media only screen and (width: 569px) and (width: 480px) and (orientation: portrait) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* iPhone 5 Landscape */
@media only screen and (width: px) and (width: 568px) and (orientation: landscape) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

/* iPhone 5 Portrait */
@media only screen and (width: px) and (width: 568px) and (orientation: portrait) {
	#box1 { width: 100%; }
	#box2 { width: 100%; }
	#box3 { width: 100%; }
	#box4 { width: 100%; }
}

レスポンシブは、どこまできっちり対応するかが難しいですね。

まとめ

長くなってしまいましたが、簡単に作るならInitializrだけで十分だと思います。

あとはこちらの記事を参考にしながらレイアウト作成。

枠組みが決まったら今度は色を決めていきます。僕はセンスがないので、これまたジェネレーターのお世話になろうと思います。