menu
menu

キーワード検索

 

最近の投稿

HTML5・ページ作成の基本

  • HTML

HTML5

こんにちは(・∀・)

HTML5でページを作るときの基本です。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スクリプトを利用すればIE8以下でもHTML5のページを表示することが可能になります。

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


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

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


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

HTML5・要素と属性 新しい要素と属性、廃止予定の要素と属性

参考

HTML5 differences from HTML4

HTML5レイアウトサンプル

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


<!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>
関連リンク

HTML5でレイアウトしたサンプルです。
HTML5で1カラムレイアウト
HTML5で2カラムレイアウト
HTML5で3カラムレイアウト

HTML5でレスポンシブ2カラムレイアウト
HTML5でレスポンシブ3カラムレイアウト

HTML5でスマホサイトを作る場合はこちらへ
スマホサイトの作成・基本編

  • カテゴリー:HTML