基本的なHTML5のレイアウトを作ってみた。
今後HTML5は必須ということで、基本的なHTML5のレイアウトを作ってみました。
これからHTMLを習得しようと言う方にどうぞ！
HTML5のデモはここから見れます
HTML5 デモのコードビュー
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=utf-8>
<!– simplified version; works on legacy browsers –>
<title>basic-html-5-layout</title>
<style>
body {
background-color:#f4f4f4;
color: black;
text-align:center;
}
header, footer, nav, section, article {
display:block;
}
header {
width:100%;
background-color:yellow;
border: 1px solid #F60;
}
nav {
width:35%;
background-color:orange;
float:left;
}
section {
width:65%;
background-color:lightGreen;
float:right;
}
article {
width:70%;
margin:2em 10%;
background-color:turquoise;
}
footer {
width:100%;
background-color:pink;
clear:both;
}
article article {border:1px red solid; background-color:white;}
</style>
<!–[if IE]>
<script>
document.createElement(“header”);
document.createElement(“footer”);
document.createElement(“nav”);
document.createElement(“article”);
document.createElement(“section”);
</script>
<![endif]–>
<body>
<header>
<h1>HTML5 Layout Demo, Example #1</h1>
</header>
<nav>
<p>nav領域</p>
<ul>Menu
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
<li>List 1</li>
</ul>
</nav>
<section>
<p>Section領域</p>
<article>
<header>
<h1>article Header, #1 Title</h1>
<p>Created on 2/9/2009</p>
</header>
<p>article 1</p>
<footer>article Footer</footer>
</article>
<article>
<header>
<h1>article Header, #2 Title</h1>
<p>Created on 3/9/2009</p>
</header>
<p>article 2</p>
<article>
<p>Comment 1</p>
</article>
<article>
<p>Comment 2</p>
</article>
<footer>article Footer</footer>
</article>
</section>
<footer>
<p>footer | HTML 5 example by <a href=”http://kruz-graphix.com”>KRUZ-GRAPHIX.com<a/></p>
</footer>
HTML5 Layout Demo
</body>
</html>
document.createElement(“header”);
document.createElement(“footer”);
document.createElement(“nav”);
document.createElement(“article”);
document.createElement(“section”);
は、IEにHTML5を読ませる為。
HTML5のレイアウトデモはこちらで確認できます。basic-html-5-layout
Facebook comments:
