More Related Content More from Atsushi Tadokoro More from Atsushi Tadokoro (20) 14. ‣
body body
div id="header" header
div div id="content" nav section
id="sidebar"
div class="article" article
div class="article" article
div id="footer" footer
HTML4 HTML5
38. ‣
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5 CSS3 </title>
! </head>
! <body>
! ! <h1>HTML5 + CSS3, Layout Sample</h1>
! ! <h2>Media Literacy 2011, Tama Art University</h2>
! ! <ul>
! ! ! <li><a href="#">Home</a></li>
! ! ! <li><a href="#">Menu 1</a></li>
! ! ! <li><a href="#">Menu 2</a></li>
! ! ! <li><a href="#">Menu 3</a></li>
! ! </ul>
! ! <h2> </h2>
! ! <p> …</p>
! ! <h3>HTML5 CSS3 </h3>
! ! <p> …</p>
! ! <h2> </h2>
! ! <p> …</p>
39. ‣
! ! <h2>Navigation</h2>
! ! <ul>
! ! ! <li><a href="#">example 1 </a></li>
! ! ! <li><a href="#">example 2 </a></li>
! ! ! <li><a href="#">example 3 </a></li>
! ! ! <li><a href="#">example 4 </a></li>
! ! ! <li><a href="#">example 5 </a></li>
! ! ! <li><a href="#">example 6 </a></li>
! ! ! <li><a href="#">example 7 </a></li>
! ! ! <li><a href="#">example 8 </a></li>
! ! </ul>
! ! <p>This site is licensed under a Creative Commons License.</p>
! </body>
</html>
40. ‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
43. ‣
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5 CSS3 </title>
! ! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
! </head>
! <body>
! ! <header>
! ! ! <hgroup>
! ! ! ! <h1>HTML5 + CSS3, Layout Sample</h1>
! ! ! ! <h2>Media Literacy 2011, Tama Art University</h2>
! ! ! </hgroup>
! ! ! <ul>
! ! ! ! <li><a href="#">Home</a></li>
! ! ! ! <li><a href="#">Menu 1</a></li>
! ! ! ! <li><a href="#">Menu 2</a></li>
! ! ! ! <li><a href="#">Menu 3</a></li>
! ! ! </ul>
! ! </header>
! ! <div id="main">
! ! ! <article>
! ! ! ! <h1> </h1>
! ! ! ! <p> …</p>
! ! ! ! <h2>HTML5 CSS3 </h2>
! ! ! ! <p> …</p>
44. ‣
! ! ! </article>
! ! ! <article>
! ! ! ! <h1> </h1>
! ! ! ! <p> …</p>
! ! ! </article>
! ! </div>
! ! <nav>
! ! ! <h1>Navigation</h1>
! ! ! <ul>
! ! ! ! <li><a href="#">example 1 </a></li>
! ! ! ! <li><a href="#">example 2 </a></li>
! ! ! ! <li><a href="#">example 3 </a></li>
! ! ! ! <li><a href="#">example 4 </a></li>
! ! ! ! <li><a href="#">example 5 </a></li>
! ! ! ! <li><a href="#">example 6 </a></li>
! ! ! ! <li><a href="#">example 7 </a></li>
! ! ! ! <li><a href="#">example 8 </a></li>
! ! ! </ul>
! ! </nav>
! ! <footer>
! ! ! <p>This site is licensed under a Creative Commons License</p>
! ! </footer>
! </body>
</html>
47. ‣
<!DOCTYPE html>
<html lang="ja">
! <head>
! ! <meta charset="utf-8" />
! ! <title>HTML5 CSS3 </title>
! ! <!--[if lt IE 9]>
! ! <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
! ! <![endif]-->
! ! <link rel="stylesheet" href="style.css" />
! ! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
! ! ! </head>
! <!-- -->
48. ‣
body {
width:960px;
margin:20px auto;
}
header, nav, footer, #main {
display:block;
border:1px solid #ccc;
margin:5px;
padding:20px;
}
header {
text-align:center;
padding:30px;
}
header ul, header li {
list-style-type:none;
display:inline;
}
nav {
float:right;
width:236px;
}
49. ‣
#main {
float:right;
width:620px;
}
footer {
clear:both !important;
text-align: center;
}
53. ‣
body {
background:#aaa;
font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
color:#000;
margin:20px auto;
text-align:center;
line-height:1.5em;
width:960px;
}
h1, h2, h3, h4, h5, h6 {
font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
font-weight:lighter;
}
a:link, a:visited {
color:#c00;
text-decoration:none;
}
a:hover {
color:#0cc;
}
header, nav, #main, footer {
display:block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 4px #666;
54. ‣
-moz-box-shadow: 0px 0px 4px #666;
box-shadow: 0px 0px 4px #666;
border: 1px solid #d3d3d3;
background-color: #fff;
margin:5px;
padding: 0 20px 10px 20px;
font-size: 12pt;
color: #000;
text-align: left;
}
header {
text-align:center;
padding:30px;
background-image: -moz-linear-gradient(top, #888, #333);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.0, #888), color-stop(1.0, #333));
background-color: #444;
border:none;
color:#fff;
text-shadow: 0px 0px 4px #000000;
}
header h1, header h2, header h3, header h4, header h5, header h6, header
li, header p {
font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;
}
55. ‣
header h1 {
font-size:2.3em;
text-transform:none;
letter-spacing:0em;
}
header h2 {
margin:-10px 0px 20px;
font-size:1.3em;
}
header ul {
padding:0px;
list-style-type:none;
display:inline;
}
header li {
margin:0px 10px;
padding:0px;
list-style-type:none;
display:inline;
}
header a:link, nav a:visited {
font-weight:normal;
}
56. ‣
nav {
float:right;
width:200px;
}
nav h1 {
font-size:1.4em;
}
#main {
float:right;
width:656px;
text-align:left;
margin-bottom:10px;
}
#main h1, nav h1 {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color:#444;
color:#fff;
padding:10px;
margin:10px -10px;
text-shadow:1px 1px 5px #000;
}
57. ‣
#main ul {
padding:0px;
list-style:none;
border-top:1px solid #e7e2d7;
margin:14px 0px;
}
#main li {
margin:0px;
padding:0px;
list-style:none;
}
#main li a:link, #main li a:visited {
float:left;
width:96%;
padding:3px 1%;
border-bottom:1px solid #e7e2d7;
}
#main li a:hover {
background:#f2f1ec;
}
#main p {
font-size:0.9em;
}
article {
margin:0 0 30px 0;
}
58. ‣
footer {
clear:both !important;
padding:10px;
background-color: #444;
border:none;
color:#fff;
font-size:0.8em;
text-align:center;
}
footer a {
margin:0px 5px;
}
