html5

HTML5基本構造

  • より明確に文書構造を示すことができる
  • フォームの入力補助やチェック機能を属性で指定できる
  • 動画や音声データをHTMLからシンプルに扱える
  • APIの追加により、ウェブアプリケーションが構築しやすくなる
  • HTML5で追加される予定の要素(タグ)
  • HTML5で廃止される予定の要素(タグ)

HTML5の基礎組み立て

<!DOCTYPE html>
<html lang="ja">
	<[[head]]>
		<title>TAG Design</title>
		<!-- 文字コード -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 検索キーワード -->
		<meta name="keywords" content="keyword1,keyword2">
		<!-- サイト説明文 -->
		<meta name="description" content="This is test page !">
		<!-- 作者情報 -->
		<meta name="author" content="miyoshi">
		<!-- 著作権情報 -->
		<meta name="copyright" content="miyoshi">
        <!-- css外部参照 -->
	<link rel="stylesheet" type="text/css" href="../css/style.css">
		<!-- google api - jquery -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	</head>
	<body>
		<div id="wrapper">
			<[[header]]>
				<h1>TAG Design</h1>
				<h2>~ tag design ~</h2>
			</header>
			<div id="main">
				<ul>
					<li class="about">
						<a href="#">>> About Us</a>
					</li>
				</ul>
			</div>
			<footer>
				<li>
					<a href="#">個人情報の取り扱いについて</a>
				</li>
				<li>
					<a href="#">サイトマップ</a>
				</li>
				<p>
					Copyright &copy; 2012 TAG Design
				</p>
			</footer>
		</div>
	</body>
</html>

DOCTYPE 宣言(DOCTYPE スイッチ)

オンの状態 standards mode (標準準拠モード) 仕様に準拠した厳格な表示モード
オフの状態 quirks mode (後方 (過去) 互換モード) 仕様に準拠していない古いブラウザとの互換


css3フォーマット
@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great);

body, header, nav, article, aside, footer, div, ul, li, h1, h2, p {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
	line-height: 1.5;
	min-width: 800px;
	background-color: #f5f5f1;
	color: #666666;
	font-family: 'Fredericka the Great', cursive;
	font-size: 62.5%;
}
最終更新:2012年05月28日 19:37
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。