HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft
アップル http://www.apple.com/jp/
ローソン http://www.lawson.co.jp/
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>...</title>... <img> <img />
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>...</title>...
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>...</title>... charset
<meta http-equiv="content-type"... /> <meta http-equiv="content-style-type"... /> <meta http-equiv="content-script-type"... /> <link rel="stylesheet" type="text/css"... /> <script type="text/javascript"... ></script> head
<div id="header"> <header id="page-header"> <div id="footer"> <div id="utility-nav"> <footer id="page-footer"> <nav id="utility-nav"> <div id="news"> <section class="news"> id class
div div div div div div
header nav section aside section footer
section, nav, article, aside, hgroup, header, footer, figure, figcaption, summary { display: block; }
/* */ #header { height: 80px; } #header h1 { width: 960px; margin: 0 auto; padding: 20px 0 0 20px; } /* */ #page-header { height: 80px; } #page-header h1 { width: 960px; margin: 0 auto; padding: 20px 0 0 20px; } id class
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/ svn/trunk/html5.js"></script> <![endif]-->
IE 6/7 IE 8 Windows XP IE 8 IE 9 Windows Vista/7 Internet Explorer ブログ 日本語版 http://blogs.msdn.com/b/ie_jp/archive/2012/03/27/10287454.aspx
死ぬ IE 6 が まで おっ The Internet Explorer 6 Countdown http://necolas.github.com/normalize.css/
section nav article aside hgroup h1 h2 header footer figure figcaption time mark ruby rt rp wbr bdi
canvas embed track math svg datalist keygen video audio source output progress meter details summary command
address hr strong small i u b menu
section nav article aside hgroup h1 h2 header footer figure figcaption time mark ruby rt rp wbr bdi
header nav といった感じで おおざっぱに考えれば OK
header nav コンテナの背景画像として設定 または もう少しテキスト情報を充実させて section に section nav section
section section section
footer section
h1 header form p ul nav コンテナの背景画像として設定 または もう少しテキスト情報を充実させて section に h2 h3 p section h2 ul nav section ul
ul section h2 dl section section
h2 section dl まあ div あたりで よいのでは small footer p
contenteditable contextmenu draggable hidden spellchack translate data-* * role aria-* * itemscope input textarea select autocomplete input textarea select list datalist input textarea select required input textarea select pattern input textarea select step input textarea select placeholder input textarea select autofocus input textarea select form form
type="search" type="tel" type="url" type="email" type="datetime" type="date" input type="month" type="week" type="time" type="datetime-local" type="number" type="range" type="color" html manifest
<input... x-autocompletetype="surname" /> <input... x-autocompletetype="given-name" /> <input... x-autocompletetype="email" /> : : <input... x-autocompletetype="state" /> <input... x-autocompletetype="city" /> <input... x-autocompletetype="address-line1" /> <input... x-autocompletetype="address-line2" /> x-autocompletetype
async defer <script async defer src="..."></script> async defer async defer
scoped <section> <style scoped> p { color: black; } </style> <h1> </h1> <p> </p> <!-- --> </section> <p> </p> <!-- -->
@global <section> <style scoped> @global p { color: black; } </style> <h1> </h1> <p> </p> <!-- --> </section> <p> </p> <!-- --> scoped
data-* <a data-url="..." data-title="..."> </a> <img src="..." alt=" " />
role aria-* <section id="main" role="main"> <li role="treeitem" aria-expanded="true">
itemscope itemtype itemprop <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name"> </h1> <span> <span itemprop="director"> </span> 1954 8 15 </span> <span itemprop="genre"> </span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"> </a> </div>
<h1> <h6> <hgroup> <section> <article> <aside> <nav> <body> <blockquote> <details> <fieldset> <figure> <dt>
<header> <h1> </h1> <h2> </h2> </header> <h3> </h3> <p> </p>... <header> <hgroup> <h1> </h1> <h2> </h2> </hgroup> </header> <h3> </h3> <p> </p> <h1> <h6>... <hgroup>
<h1> </h1> <p> </p> <h2> </h2> <p> </p> <h3> </h3> <p> </p>... <h1> </h1> <p> </p> <article> <h1> </h1> <p> </p> <h2> </h2> <p> </p> </article>...
<h1> </h1> <p> </p> <h2> </h2> <p> </p> <h3> </h3> <p> </p>... <h1> </h1> <p> </p> <blockquote> <h2> </h2> <p> </p> </blockquote> <h3> </h3> <p> </p>...
<section> <h1> </h1> <section> <h2> </h2> <section> <h3> </h3> </section> </section> </section> <section> <h1> </h1> <section> <h1> </h1> <section> <h1> </h1> </section> </section> </section> <h1> </h1> <h2> </h2> <h3> </h3>
ありがとうございました mashiko@cybergarden.net Twitter: @takahiromashiko Facebook: 815549671