Movatterモバイル変換

‣‣ http://www.20thingsilearned.com/ja-JP

‣‣‣ http://www.publickey1.jp/blog/10/html5_9.html

‣‣ http://www.w3.org/html/logo/#the-technology‣‣‣‣‣‣‣‣

‣body bodydiv id="header" headerdiv div id="content" nav sectionid="sidebar" div class="article" article div class="article" articlediv id="footer" footer HTML4 HTML5

‣‣ http://html5demos.com/geo

‣‣‣ http://www.youtube.com/watch?v=64TcBiqmVko&feature=fvsr

‣‣ http://www.apple.com/html5/showcase/video/

‣‣ http://yoppa.org/blog/2683.html

‣‣ http://www.chromeexperiments.com/

‣‣ http://css3.mikeplate.com/

‣‣ ‣ ‣ ‣ ‣ ‣

‣<!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>

‣! ! <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>

‣‣ ‣ ‣ ‣‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣‣ ‣ ‣‣ ‣

‣<!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>

‣! ! ! </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>

‣‣‣‣‣‣ http://code.google.com/p/html5shim/

‣<!DOCTYPE html><html lang="ja">! <head>! ! <meta charset="utf-8" />! ! <title>HTML5 CSS3 </title>! ! ! ! <link rel="stylesheet" href="style.css" />! ! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">! ! ! </head>!

‣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;}

‣#main { float:right; width:620px;}footer { clear:both !important; text-align: center;}

‣‣ CSS3‣‣ HTML Rocks - CSS3

‣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;

‣ -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, headerli, header p { font-family: Georgia, 'Hiragino Mincho Pro', Meiryo, serif;}

‣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;}

‣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;}

‣#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;}

‣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;}

Movatterモバイル変換

Change Language

HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1

Embed presentation

Recommended

More Related Content

What's hot

More from Atsushi Tadokoro

Recently uploaded

HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1