presen0830

HTML/CSSの現状とその後
文書型宣言(Doctype)のおさらい
■HTML4.01
・Strict DTD
非推奨要素の使用不可。フレームの使用不可。
タグの配置について厳密な決まりがある。
・ Transitional DTD
非推奨要素の使用可。
フレームの使用不可。
・ Frameset DTD
非推奨要素の使用可。
フレームの使用可。
文書型宣言(Doctype)のおさらい
■XHTML1.0
・Strict DTD
非推奨要素の使用不可。フレームの使用不可。
タグの配置について厳密な決まりがある。
・ Transitional DTD
非推奨要素の使用可。
フレームの使用不可。
・ Frameset DTD
非推奨要素の使用可。
フレームの使用可。
HTML4.01とXHTML1.0の主な違い
終了タグが必要
タグ・属性は小文字表記
属性の省略禁止
name属性から id属性へ
最近のコーディング環境
Windows
IE6・7(8)、FireFox2以上
Mac
Safari3以上、FireFox2以上
CSSHACK
■IE6以下
* html #hack{color:#000000;}
#hack{_color:#000000;}
■IE7/IE6
#hack{/color:#000000;}
■IE7
*+html body #hack{color:#000000;}
■IE7以下
*+html body #hack,* html body #hack{color:#000000;}
CSSHACK
■IE7とモダンブラウザ（IE6以下を除外）
html>body #hack{color:#000000;}
■Safari3用
body:first-of-type #hack{color:#000000;}
■Safari2用
/* hogehoge \*/
html:\66irst-child #hack {color:#000000;}
CSSHACK
■全てのIEに適用

■IE7のみ適用

■IE7以下適用

■IE7よりも下（IE6～）

■IE6よりも上(IE7・IE8)

HTML5とCSS3
HTML5
HTML4.01のバージョンアップ
(実質XHTML5の後継?)
CSS3
現在の最新はCSS2.1で
10年くらい変わっていない
正式勧告はどちらも2010年予定
HTML5対応OS
IE8
Firefox3.0～
Safari3.1～
Opera9.6～
Google Chrome
CSS3対応OS
Firefox3.0～
Safari3.1～
Opera9.6～
Google Chrome
CSS3は
擬似要素・プロパティが増加
CSS2対応レベルの擬似要素
p:before {color:#FFF;}
p:after {content:“xxx";}
CSS3 擬似要素
p::selection {color:#fff;}
div p:last-child {color:#fff;}
div p:nth-child(3) {color:#fff;}
div p:nth-child(odd) {color:#fff;}
div p:nth-child(even) {color:#fff;}
CSS3 擬似要素
(n=0から始まるカウント)
div p:nth-child(2n+1) /* 奇数 */
div p:nth-child(2n+0) /* 偶数 */
div p:nth-child(3n+1) { color:#000;}
div p:nth-child(3n+2) { color:#fff;}
div p:nth-child(3n+3) { color:ff9900;}
CSS3 プロパティ(Multi Column)
p{
column-count: 2;
column-width: 50%;
column-gap: 20px;
}
CSS3 プロパティ(テキストに影をつける)
p{
text-shadow : 4px 4px 4px #222;
}
CSS3 プロパティ(font-face)
@font-face{
font-family:BASEFONT;
src: url('font.otf') format("opentype");
}
※OpenTypeやTrueTypeが指定可能
ただしフォントのライセンス(再配布可のみ)必須
body {font-family:BASEFONT;}
HTML5 主な新機能
■動画<video>・オーディオ<audio>機能
<video controls src="video.ogg"></video>
<audio src="audio.mp3"></audio>
※再生・停止も可能
HTML5 主な新機能
■2D描画<canvas>
線や円といった図形を描いたり、
色を塗ったりスクリプトを組み合わせればできます。
HTML5 主な新機能
■ローカルデータベース搭載
■バックグラウンドで動作するJavaScriptスレッド
■ドラッグ&ドロップ機能
HTML5 主な新機能
■<input>のtype属性の強化
number(数値)、date/time/datetime/datetime-local(日時)、month(月)、week(週)、
color(色)、search(検索エンジン)、
tel(電話番号)、url(URL)、email(メールアドレス)
autofocusカーソルをフォーカス <input autofocus>
required必須入力項目のチェック <input required>
HTML5 廃止タグ
font〔フォント装飾（色・サイズ・種類）〕
basefont〔ページの基準フォントサイズ〕
big〔フォントを大きく表示〕
center〔要素の左右中央揃え〕
s〔テキストに取消線を引く〕
u〔テキストに下線を引く〕
frame〔フレームの定義〕
frameset〔フレーム（frame要素）の構成〕
noframes〔フレーム未対応ユーザー向けの代替テキスト〕
Isindex、dir 、 applet 、 acronym 、strike 、 tt 、 etc…
HTML5 文書型宣言・meta
■文書型宣言
<!DOCTYPE html>
■metaタグサンプル
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>PHP & JavaScript Room</title>
<script type="text/javascript" src="common.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
HTML5 コーディングサンプル
ヘッダー
ナビ
記事
セクション
サイド
セクション
フッター
HTML5 コーディングサンプル
header
navi
article
section
side
section
footer
HTML5 コーディングサンプル
<div id=“header”>
<div id=“navi”>
<div id=“article”>
<div class=“section”>
<div id=“side”>
<div class=“section”>
<div id=“footer”>
HTML5 コーディングサンプル
<header>
<nav>
<article>
<section>
<aside>
<section>
<footer>
HTML5 コーディングサンプル
<header>
<h1>ページタイトル</h1>
<ul><li><a href="sample.html">サイトマップ</a></li></ul>
</header>
<nav>
<ul><li><a href="sample.html">カテゴリ1</a></li></ul>
</nav>
<article>
<section>
<h2>見出し見出し見出し</h2>
<p>本文本文本文本文本文本文</p>
</section>
<section>
<h2>見出し見出し見出し</h2>
<p>本文本文本文本文本文本文</p>
</section>
</article>
<aside>
<h2>関連記事</h2>
<dl><dt>2009/09/10</dt><dd>記事内容記事内容記事内容記事内容記事内容記事内容</dd></dl>
</aside>
<footer>
<p>Copyright(c)2009 h9 Inc. All Rights Reserved.</p>
<ul><li><a href="about.html">このサイトについて</a></li></ul>
</footer>
HTML5 その他新規追加タグ
■会話やインタビューなど
<dialog>
<dt>高校野球を観ることはありますか。</dt>
<dd>実は毎年けっこう観てますね。なので自分の曲がテー…</dd>
<dt>サウンドつくりにもこだわりはあったんですか？</dt>
<dd>そうですね。アコギで乾いたサウンドをつく…</dd>
</dialog>
■文脈から切り離したエリア（画像+キャプションなど）
<figure>
<img src="banner.jpg" width="103" height="63" alt="カラーチャートマップ" />
<legend>WCAG2.0におけるカラー…</legend>
</figure>
■追加の補足的情報(注釈として使うのは良くないらしい。。)
<details>
<legend>用語</legend>
<p>用語解説用語解説用語解説用語解説用語解説用語解説</p>
</details>
■日付・時間を定義
そういえば<time datetime=“2008-02-14”>昨日</time>のことなんだけど…

Download Report