Contenu connexe Similaire à 情報編集(Web) HTML5とは何か? HTML5、はじめの一歩 Similaire à 情報編集(Web) HTML5とは何か? HTML5、はじめの一歩 (20) Plus de Atsushi Tadokoro (20) 5. HTML5とは何か?
‣ HTMLのテクノロジの変遷
‣ 1991 - HTML
‣ 1994 - HTML2
‣ 1996 - CSS1 + JavaScript
‣ 1997 - HTML4
‣ 1998 - CSS2
‣ 2000 - XHTML1
‣ 2005 - Ajax (Asynchronous JavaScript + XML)
‣ 2009 - HTML5
13. HTML5の主な機能
‣ (広義の) HTML5の主な機能
‣ http://www.w3.org/html/logo/#the-technology
‣ セマンティクス
‣ オフラン、ストレージ
‣ デバイスアクセス
‣ コネクティビティー
‣ マルチメディア
‣ グラフィクス、エフェクト
‣ パフォーマンス、インテグレーション
‣ CSS3
14. ‣ セマンティクス(意味)によるマークアップ
‣ 様々な新要素の追加
‣ <section>, <header>, <footer>, <nav>, <article>,
<aside>, <figure>, <mark>, <time>, <video>, <audio>
etc...
セマンティクス
16. オフライン & ストレージ
‣ PCだけでなくタブレットやモバイル端末が重要となった今、
常にネットワークに接続されているとは限らない
‣ ネットワークがオフラインでもページを閲覧できる仕組み
‣ ブラウザ側にデータを蓄積する
‣ オフラインでも使用可能なWebアプリを構築可能
20. ‣ ファイルアクセス - Drag & Dropでファイルを追加するなど
‣ http://studio.html5rocks.com/#Photos
デバイスアクセス
29. ‣ Magic dust http://mrdoob.com/144/magic_dust
3D、グラフィクス、エフェクト
39. HTML5 はじめの一歩
‣ HTML5以前 (HTML4、XHTML1) でのやりかた
‣ div要素を使用して、ページを構造の単位ごとに分割
‣ それぞれのdiv要素にid属性、またはclass属性を付与
‣ 属性の名前から、CSSからそれぞれの要素へアクセス
‣ CSSでレイアウトや個別のデザインを記述
40. HTML5 はじめの一歩
‣ HTML5以降では、意味(セマンティクス)によるマークアップ
が可能となる
‣ HTML5のページの構造を指定する要素
‣ section: 本の一部あるいは章、章のセクション、あるいは
基本的に HTML 4 で独自の見出しを持つすべてのもの
‣ header: ページに表示されるページ・ヘッダー、head 要
素とは全く意味合いが違うので注意
‣ footer: 細かい文字での説明が入るページ・フッター、
Email・メッセージの署名などが入る
‣ nav: 他のページへのリンクの集まり
‣ article: ブログや Web マガジン、一覧記事などに掲載さ
れている個々のエントリー
43. HTML5 はじめの一歩
‣ 実際にHTML5を記述するための雛形を用意する
<!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>
44. HTML5 はじめの一歩
‣ 実際にHTML5を記述するための雛形を用意する (つづき)
! ! <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>
45. HTML5 はじめの一歩
‣ このページの構造
‣ ヘッダー
‣ 大見出し h1
‣ 中見出し h2
‣ ヘッダーメニュー ul, li
‣ セクション
‣ 記事
‣ 大見出し h1
‣ 段落 p
‣ 中見出し h2
‣ 段落 p
‣ 記事
‣ 大見出し h1
‣ 段落 p
‣ ナビゲーション
‣ 大見出し h1
‣ ナビゲーションメニュー ul, li
‣ フッター
‣ 段落
48. HTML5 はじめの一歩
‣ HTML5で構造化したサンプル
<!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>
49. HTML5 はじめの一歩
‣ HTML5で構造化したサンプル (つづき)
! ! ! </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>
51. HTML5 はじめの一歩
‣ CSSを適用するためhead要素に追加
‣ CSSへのリンクを記述：style.css
‣ Internet Explorer対策
‣ IEのHTML5対応はあまり良くない…
‣ IE対策のために、html5shimというIEをHTML 5に対応させ
るためのJavaScript (html5.js) を利用
‣ http://code.google.com/p/html5shim/
52. HTML5 はじめの一歩
‣ head要素は以下のようになる
<!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>
! <!-- 以下省略 -->
53. HTML5 はじめの一歩
‣ ページのレイアウトをCSSで記述
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;
}
58. HTML5 はじめの一歩
‣ CSS3を活用してみる (1 / 6)
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;
59. HTML5 はじめの一歩
‣ CSS3を活用してみる (2 / 6)
-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;
}
60. HTML5 はじめの一歩
‣ CSS3を活用してみる (3 / 6)
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;
}
61. HTML5 はじめの一歩
‣ CSS3を活用してみる (4 / 6)
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;
}
62. HTML5 はじめの一歩
‣ CSS3を活用してみる (5 / 6)
#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;
}
63. HTML5 はじめの一歩
‣ CSS3を活用してみる (5 / 6)
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;
}
65. HTML5 はじめの一歩
‣ まとめ
‣ 今回の授業、HTML5とCSS3の導入
‣ 構造化のための新要素を利用
‣ HTMLに意味要素を与え、それを利用してCSS3でレイアウト
やデザインを行う方法
‣ しかし、HTML5 で可能となったことはより広範囲に渡る
‣ 次回はより動的な表現についてとりあげいきたい
