MaMoTaKu流HTML5テンプレート

カテゴリー:HTML

MaMoTaKu流HTML5のテンプレートを作ったから自分のためにめもします笑

MaMoTaKuテンプレート 2015.06.28 修正

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="ja"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="ja"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="ja"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ja"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>テンプレート</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/res/css/base.css">
<link rel="stylesheet" href="/res/css/common.css">
<link rel="stylesheet" href="/res/css/mobile.css">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- #wrapper start -->
<div id="wrapper">
	<!-- header start -->
	<header id="header">
	</header>
	<!-- header  end  -->

	<!-- content start -->
	<section id="content">
		<main id="main">
		</main>
	</section>
	<!-- content  end  -->

	<!-- footer start -->
	<footer id="footer">
	</footer>
	<!-- footer  end  -->
</div>
<!-- #wrapper  end  -->

<!-- javascript start -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/res/js/tm.lib.js"></script>
<script src="/res/js/common.js"></script>
<!-- javascript  end  -->
</body>
</html>

テンプレート一式はこちら
追記 2015.06.28
今回は主に
・cssをimport.cssから読み込むのをやめる
・各CSSを改修
・tm.lib.jsの改修
・index.htmlを改修

javascriptをbody末尾に配置する理由と注意

>>JavaScriptで新しいマークアップをページに書き込む場合に備えて、ブラウザーでは、ファイルの残りの部分を解析する前に、HTML マークアップのスクリプト ファイルを取得、解析、および実行する必要があります。スクリプトを末尾に配置すると、スクリプトの完了前でも、通常はブラウザーでページをレンダリングできるので、ユーザーにとってのページの読み込み体感速度が速くなります。( by Dave Methvin, Rey Bango)
そうなんです。JavaScriptファイルへの参照を“末尾に記載するのは、もはやHTML5の常識となっているのです。

>>この方法を採用した場合には以下に注意が必要です。
●インラインのJavaScriptコードは避ける
特に上記例のようにjQueryを使う場合、インラインでjQueryオブジェクト $(‘#element’) を操作することはできません 。ピュアなJavaScriptであれば問題はないと思いますが、保守性の観点から、JavaScriptはBODY末尾か外部

●ファイルに書いた方がいいでしょう。
JavaScriptに依存するCSSを使うときはheadに配置しなければならない
比較的複雑なCSSを使用していて、イニシャルのレンダリングがJavaScriptコードに依存する場合は、このテクニックが使えません。個人的にはそのようなCSSの利用はあまりお薦めできません。

引用(HTML5研究室-HTML5ベストプラクティス: JavaScriptファイルはBODY末尾で参照する
ありがとうございます。

14.04.07 追記

その他HTML5から追加されたタグで主に使いそうなやつ
section一つのセクションであることを示す
navナビゲーションであることを示す
article記事であることを示す
address連絡先・問合せ先を表す
input type=”search”検索テキストの入力欄を作成する
input type=”tel”電話番号の入力欄を作成する
input type=”url”URLの入力欄を作成する
input type=”email”メールアドレスの入力欄を作成する
input type=”date”日付の入力欄を作成する
input type=”month”月の入力欄を作成する
input type=”week”週の入力欄を作成する
input type=”time”時間の入力欄を作成する
input type=”number”数値の入力欄を作成する
input type=”color”色の入力欄を作成する

引用(クイックリファレンス:HTML5リファレンス
ありがとうございます。
他にもタグを知りたいときは上記のリンクより確認できます!