【HTML5リファレンス】HTML5・ページ作成の基本

【Labs】コンテンツがスライドするレスポンシブデザインドロワーナビ【HTML5リファレンス】HTML5・要素と属性

【HTML5リファレンス】HTML5・ページ作成の基本

Posted on 2013-04-25
Last updated on 2017-06-04

こんにちは（・∀・）

HTML5でWebページを作るときの基本です。DOCTYPE宣言文、言語コード指定、文字コード宣言など参考にしてください^^。

HTML5でページを作るときの基本

DOCTYPE宣言文


<!DOCTYPE html>

DOCTYPE宣言文は従来のに比べてかなり短くなりました。

言語コードの指定


<html lang="ja">

言語コードの指定は日本語ならjaです。

文字コードの宣言


<meta charset="utf-8">

文字コードの宣言も短くなりました。utf-8推奨です。

スタイルシートの指定


<link rel="stylesheet" href="sample.css">

type="text/css"は省略して短くできます。

スクリプトの指定


<script src="sample.js"></script>

こちらもtype="text/javascript"を省略できるので短くなります。

IE8以下の対応

IE8以下はHTML5に対応していませんが~~Google Codeで公開されている~~html5shiv.jsを利用すればIE8以下でもHTML5のページを表示することが可能になります。

こちらのhttps://github.com/scottjehl/Respondからダウンロードしたhtml5shiv.jsをhead要素内に読み込ませてください。

html5shiv.jsとhtml5shiv-printshiv.jsがあります。html5shiv.jsは通常用で、html5shiv-printshiv.jsは印刷対応版です。html5shiv-printshiv.min.jsを記述しておけば良いと思います。

head要素内に次の内容を記述します。JavaScriptをオフにしている環境では適用されませんのでIE8以下では表示が崩れるおそれがあります。


<!--[if lt IE 9]>
<script src="/js/html5shiv-printshiv.min.js"></script>
<![endif]-->

IE8以下でCSSのメディアクエリを対応させるには次のコードを記述します。


<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

HTML5の新要素でブロック要素としてレンダリングさせる要素に対してプロパティdisplayに値blockを指定します。


article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
  display: block;
}

参考

HTML5 differences from HTML4

HTML5レイアウトサンプル

新規でWebページを作成する際にご利用ください^^


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="sample.js"></script>
</head>
<body>
<header>ヘッダー</header>
<nav>ナビ</nav>
<article>
<h1>タイトル</h1>
<section>
<h2>セクションタイトル</h2>
<p>コンテント</p>
</section>
</article>
<aside>その他セクション</aside>
<footer>フッター</footer>
</body>
</html>