html5など社内勉強会 vol.2 - html5, css3
DESCRIPTION
TRANSCRIPT
HTML5など 勉強会 Vol. 2
2011/10/17 @ 某社
System Management HeadquatersGeorge Harada
提 供
勉強会スタッフ（ボランティア）
インフラ統括本部Web標準G
今回は参加申込でDevQuiz を受けて頂きました
早速ですが解答発表！
A B
C D
CSSの組み合わせ正しいものはどれ？
Q1
29 3
2 0
body { background-color: white; color: black;}
CSSの書き方どこで（セレクタ） { なにを（プロパティ）: どうする（値）; }
A
HTMLの「id属性」に関する説明で正しいものはどれ？
Q2
26
B 28
C 28
D 15
id属性の目的は、要素を識別するための、固有の識別子を指定することである
1つの文書内で、id属性の値が重複してはならない（一意でなければならない）
CSSで、id属性を使って要素を指定する場合、id属性の値の前に #（ハッシュ）をつけて用いる
id属性の値は、半角アルファベットの大文字・小文字が区別される
A
HTMLの「class属性」に関する説明で正しいものはどれ？
Q3
27
B 33
C 28
D 16
class属性の主な目的は、要素にスタイルを適用させるための、クラス名を指定することである
1つの文書内で、同じclass属性の値を何度でも用いることができる
CSSで、class属性を使って要素を指定する場合、class属性の値の前に .（ピリオド）をつけて用いる
class属性の値は、半角アルファベットの大文字・小文字が区別される
E 21class属性の値は、複数のクラス名を半角スペースで区切って列記することができる
A
HTML5 で強化された「セマンティクス」の説明として、正しいものはどれ？
Q4
2
B 0
C 11
D 21
ある製品を使ったときに得られる経験や満足
検索エンジン最適化
構文
データの意味
データの意味, 意味規則
つまり・・・
セマンティクス
HTML5では、文書が持つデータの意味をより明確に表すことが出来るようになる
A
HTML5の「DOCTYPE宣言」として、正しいものはどれ？
Q5
3
B 31
C 0
D 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html><html lang="ja">
<?xml version="1.0" encoding="Shift_JIS"?><!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html>
皆さん、成績は如何でしたか？
Congratulations!!
順不同
と、いうことでここからが本番
Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
HTML5
もっとセマンティックな文書を
もっとリッチなWebアプリを
もっと標準化された技術で
もっと扱いやすく（互換性, 有用性, 相互運用性, ユニバーサル・アクセス）
これらを実現するための仕様
=
・ブロック要素・インライン要素
↓ ↓コンテンツ・モデル
廃止
HTML4との大きな違い
Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
どの要素にどんな内容（コンテンツ）を入れても良いか定義したもの
・すべての要素に定義されている・多くの要素はカテゴリーによって定義される・カテゴリーは要素を目的に応じて�グループ化したもので、全8種類ある
コンテンツ・モデル
コンテンツ・モデル: カテゴリー
フロー
ヘッディング
セクショニング
エンベッディッド
フレージングインタラクティブ
メタデータ
セクショニング・ルート
以降のコンテンツの表示や動作をセットする
・自身と他のドキュメントとの関連性をセットする
・他の "帯域外" の情報を伝達する
・基本的に、ブラウザ上には直接表示されない
メタデータ・コンテンツ
base command link meta noscript script style title
ドキュメント内に現れるコンテンツ全般
フロー・コンテンツ
a abbr address area (map要素の子孫の場合) article aside audio b bdi bdo blockquote br button canvas cite code command
datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript
object ol output p pre progress q ruby s samp script section select small span strong style (scoped属性が存在している場合)
sub sup svg table textarea time u ul var video wbr テキスト
見出しから、その内容までを含んだ範囲（セクション）を定義する
・「章」や「節」といった概念に近い
・要素は潜在的に見出しとアウトラインを持つ
セクショニング・コンテンツ
article aside nav section
セクションの見出しを表す
・「アウトライン・アルゴリズム」と密接に関係する
ヘッディング・コンテンツ
h1 h2 h3 h4 h5 h6 hgroup
ドキュメントのテキスト
・段落中にあるテキストの範囲を指し示す要素
・HTML4におけるインライン要素に近い概念
フレージング・コンテンツ
a (フレージング・コンテンツのみが入れられている場合) abbr area (map要素の子孫の場合) audio b bdi bdo br button canvas cite code command datalist
del (フレージング・コンテンツのみが入れられている場合) dfn em embed i iframe img input ins (フレージング・コンテンツのみが入れられている場合) kbd keygen label map (フレージング・コンテンツのみが入れられている場合)
mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg
textarea time u var video wbr テキスト
外部のリソースをインポートする・画像, プラグイン, フレーム, ビデオ, Canvas など
HTML以外の言語で表すもの・SVG, MathML
エンベッディッド・コンテンツ
audio canvas embed iframe img math object svg video
ユーザが操作をすることができる
・ハイパーリンク, クリックすることで
・状態が変化するもの など
a audio (controls属性が存在している場合) button details embed iframe img (usemap属性が存在している場合) input (type属性がhidden状態でない場合) keygen label
menu (type属性がtoolbar状態の場合) object (usemap属性が存在している場合) select textarea video (controls属性が存在している場合)
インタラクティブ・コンテンツ
この要素内のコンテンツは、前後のコンテンツとは切り離されたものとして見なされる
セクショニング・ルート
blockquote body details fieldset figure td
Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
セクション？
フロー
ヘッディング
セクショニング
エンベッディッド
フレージングインタラクティブ
メタデータ
コンテンツ・モデル: カテゴリー
セクショニング・ルート
見出しから、その内容までを含んだ範囲（セクション）を定義する
・「章」や「節」といった区分けの概念に近い
・要素は潜在的に見出しとアウトラインを持つ
セクショニング・コンテンツ
article aside nav section
セクションの見出しを表す
・「アウトライン・アルゴリズム」と密接に関係する
ヘッディング・コンテンツ
h1 h2 h3 h4 h5 h6 hgroup
セクショニング・コンテンツ
セクションを構成する要素（抜粋）
article aside nav section
ヘッディング・コンテンツ
h1 h2 h3 h4 h5 h6 hgroup
フロー・コンテンツ
header footer div
それ自身が独立したコンテンツを表す■この要素が適しているかの判断基準
・フィードとして配信する際、そのコンテンツが・1つのエントリーとしてふさわしいか？ex. ブログの投稿, ニュースサイトの記事, ブログ記事へのコメント, 掲示板の投稿
article要素
関連が薄いコンテンツを表す
■この要素が適しているかの判断基準
・仮に、そのコンテンツを削除しても、・ページが成り立つか？
ex. 補足記事, サイドバー, 広告, プルクォート
aside要素
主要なナビゲーションを形成する範囲を表す■この要素が適しているかの判断基準
・それは、本当に主要なナビゲーションか？
ex. サイト全体のナビ, あるカテゴリー内のナビ, パンくずリスト
誤った使い方: サイト内検索の入力欄, サイトマップの本文
nav要素
その他の一般的なセクション■この要素が適しているかの判断基準
・それは「章」や「節」といった単位で表すのに・ふさわしいコンテンツか？・他に、ふさわしい要素はないか？
誤った使い方: 見出しがない, レイアウトだけのために使用する
section要素
セクションの見出しを表す
■この要素が適しているかの判断基準
・それは「章」や「節」といった単位の・見出しとしてふさわしいか？
h1～h6要素
見出しと、それに付随する小見出し, 副題, キャッチフレーズなどをグループ化する■特徴
・h1〜h6要素だけしか入れられない
hgroup要素
セマンティクス上�特定の意味を持たない 一般的なコンテナ■この要素が適しているかの判断基準
・他に、ふさわしい要素はないか？
ex. 何かしら区別したい領域を囲む, グルーピングに使う
div要素
セクションのヘッダー, フッターを表す■特徴
・1ページの中で、何回使ってもよい
ex. ページ全体のヘッダー, ある記事のヘッダー, etc.
header, footer要素
いきなりですが
実際にやってみる-- 社内URL --
Google Chrome / Safari で上記のURLにアクセスして、
会社のメールアドレスを入力※Google Chromeの方が、キャッシュが残りにくいのでオススメ
課題今日紹介した要素を使ってセマンティクスを意識したマークアップに変更する。
制限時間: 5分
解答例-- 社内URL --
Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
アウトライン？
コンテンツの階層構造のこと
・書籍の目次をイメージすると分かり易い→ 本の「タイトル」がトップ階層→ 「タイトル」の下に「章」がある→ 「章」の下に「節」がある
基本的には、Webページも同じはず
アウトライン
これもアウトラインですね1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
アウトラインを判別するためのきまり
・見出し要素だけで判別する方法→ 暗黙的なアウトライン
・セクション要素を使って判別する方法→ 明示的なアウトライン
アウトライン・アルゴリズム
セクショニング・コンテンツに属する要素がなければ、見出し要素が現れた時点で、新たなセクションが始まる
・h1〜h6 要素の数字の大きさを基準に、・アウトライン・レベルを1段階ずつ上げ下げする
■判別基準・h1〜h6要素末尾の数字が、以前のセクションの見出しより・大きいか、小さいか、同じか
・要素末尾の数字が2つ以上大きく（小さく）なっても、・アウトライン・レベルが2段階下がる（上がる）わけではない
暗黙的なアウトライン
セクショニング・コンテンツに属する要素が現れると、その1つ上のセクションからアウトライン・レベルが1つ下がる
・その要素の中で最初に現れる見出し要素が、・そのセクションの見出しとなる
■セクショニング・コンテンツ
明示的なアウトライン
article aside nav section
実際に確かめてみるHTML 5 Outlinergoo.gl/dZ5haarticle aside nav section
h1～h6
アウトラインQ & A
このアルゴリズムはなぜ作られたの？
Q.1
「暗黙的なアウトライン」では、見出しの及ぶ範囲が分かりにくいから
→ もっとセマンティックな文書を
A.1
セマンティックな文書にする利点は？
Q.2
ブラウザやクローラーに、文書構造を正確に理解させることができる
→ 検索大手3社が共同で開発中 （schema.org）
→ ユニバーサル・アクセス化→ その他にも、イロイロ出てくるはず
A.2
Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
■基本的な優先順位後から読み込んだスタイルが優先
■個別性による優先順位より具体的に指定されたものが優先
■ !important 宣言問答無用の最終兵器 （最重要規則）
CSSの優先順位
div { color: red; }
div { color: blue; }
基本的な優先順位
こちらが優先
・より具体的に指定されたものが優先・以下の得点により優先順位を算出
個別性による優先順位
要素のstyle属性:idセレクタ:
classセレクタ:要素セレクタ:
1,000点0,100点0,010点0,001点
<div id=”id” class=”class”>ここで問題</div>
#id { color: red; }
#id.class { color: green; }
個別性による優先順位
div { color: blue;}
.class { color: yellow;}
A B
C D
有効になるのは、どのセレクタでしょうか？
解答C
それぞれの点数を計算してみよう
最終兵器
/* すべてのdiv要素の文字色を赤に */ div { color: red !important; }
!important 宣言
Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
height: 縦サイズ width: 横サイズ margin: 外余白padding: 内余白 border: 罫線（marginとpaddingを隔てる線）
background-color: 背景色
領域サイズ, 余白, 罫線, 背景色
インラインレベルの表示を制御text-align: right; text-align: center;text-align: left;
文字等の左右寄せ, センタリング
魔法の言葉margin: 0 auto;
ブロックレベルのセンタリング
左右のマージンを自動で最適化する
上下のマージンは、0以外も指定できる
/* 標準配置 */
position: static; /* 相対位置 */
position: relative;/* 絶対位置 */
position: absolute;/* 絶対位置でスクロールしても固定 */
position: fixed;
ボックスの配置方法（基準位置を指定）
top:bottom: left: right:
同時使用
position: relative;
相対位置を指定して配置するposition: relative; top: 50px; left: 70px;
ex. 本来表示されるはずだった位置（static）から、ex. 下に 50px, 右に 70px 移動した場所に配置
position: absolute;
絶対位置を指定して配置するposition: absolute; top: 50px; left: 70px;◊ 親ボックスが position: static; の時・画面全体の左上が top: 0, left: 0 の基準◊ それ以外が指定されている時・親ボックスの左上が top: 0, left: 0 の基準
position: fixed;
絶対位置でスクロールしても固定position: fixed; bottom: 0px; left: 0px;ex. 画面の最下部に配置
※ iOS 5 未満の端末では、fixed が機能しない# 同等の表示がしたい時は、JavaScript で制御する
position: static; 以外が指定されたボックスの重なり順を指定
position: relative;z-index: 10;
ボックスの重なり順を指定
数字が大きいほど上に配置
sample-- 社内URL --
Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
これまでのレイアウト
<table> <tr> <td rowspan="2">Book Photo</td> <td>Book Title</td> </tr> <tr> <td>Book Contents</td> </tr></table>
table要素を使ったレイアウト
<div style="overflow: hidden;">
<img src="/html5.jpg" style="float: left;">
<p>Book Title</p> <p>Book Contents</p></div>
floatプロパティを使ったレイアウト
◯table要素を使ったレイアウト・セマンティクスが正しくない・アクセシビリティを大きく損なう
◯floatプロパティを使ったレイアウト・柔軟な調整や配置が難しい・回り込みの解除が面倒
これまでのレイアウトじゃダメ？
これからのレイアウト
フレキシブル・ボックスとは、その中に含まれるボックスの
サイズ調整や配置を指定できる、柔軟なボックスのこと。
これまでのpositionプロパティや、floatプロパティを使う
ボックスのレイアウトに比べて、より簡単に指定できる。
フレキシブル・ボックス
<div id="container_a"> <div id="box_1">Book Photo</div> <div id="container_b"> <div id="box_2">Book Title</div> <div id="box_3">Book Contents</div> </div></div>
フレキシブル・ボックスを使ったレイアウト
#container_a { display: -webkit-box;}
#container_b { display: -webkit-box; -webkit-box-orient: vertical; /* 縦並びにする */
}
フレキシブル・ボックスを使ったレイアウト
#box_1 { background-color: lightpink;}
#box_2 { background-color: lightblue;}
#box_3 { background-color: lightgreen;}
フレキシブル・ボックスを使ったレイアウト
#box_1 { background-color: lightpink;}
#box_2 { background-color: lightblue; -webkit-box-ordinal-group: 2; /* 表示順を2番に */}
#box_3 { background-color: lightgreen; -webkit-box-ordinal-group: 1; /* 表示順を1番に */}
フレキシブル・ボックスを使ったレイアウト
#container_b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-ordinal-group: 1; /* 表示順を1番に */}
#box_1 { background-color: lightpink; -webkit-box-ordinal-group: 2; /* 表示順を2番に */}
フレキシブル・ボックスを使ったレイアウト
#container_b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-ordinal-group: 1; -webkit-box-flex: 3.0; /* ページ余白の 3/4 をこのボックスに割り当て */}
#box_1 { background-color: lightpink; -webkit-box-ordinal-group: 2; -webkit-box-flex: 1.0; /* ページ余白の 1/4 をこのボックスに割り当て */}
フレキシブル・ボックスを使ったレイアウト
フレキシブル・ボックスとは、その中に含まれるボックスの
サイズ調整や配置を指定できる、柔軟なボックスのこと。
これまでのpositionプロパティや、floatプロパティを使う
ボックスのレイアウトに比べて、より簡単に指定できる。
他のプロパティをいろいろ組み合わせて便利な使い方を見つけよう！
フレキシブル・ボックス
display: -webkit-box; or -webkit-inline-box;-webkit-box-orient: ボックスのレイアウト方向を指定
-webkit-box-direction: ボックスの並びを逆順に指定
-webkit-box-ordinal-group: ボックスの並び順を個別に指定-webkit-box-align: ボックスを揃える位置を指定-webkit-box-flex: 各ボックスに割り当てる余白の比率を指定
-webkit-box-pack: ボックスを寄せる位置を指定
フレキシブル・ボックス
こんなグラフも簡単に作れるよ！<div id="container"> <div id="box1">50</div> <div id="box2">100</div> <div id="box3">20</div> <div id="box4">200</div> <div id="box5">140</div></div>
フレキシブル・ボックス
sample-- 社内URL --
Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
10talks in a 60minute slot
60min.
５min.５min.５min.５min.５min.５min.５min.５min.５min.５min.
1人の持ち時間５分延長はありません質疑応答の時間もありません気になる事は本人を捕まえて
LTのお約束ごと
LTセッションは以上で終了です
登壇者の皆さんにもう一度拍手を！
これですべてのコンテンツ終了
後日、アンケートにご協力下さい！！！
勉強会スタッフ絶賛募集中です
このあと残ってイスとテーブルを一緒に片付けてくれると嬉しい
また次回お会いしましょう
tthhaannkkss !!
Special Thanks toOperationOperationOperationOperationSupportSupportSupportSupport
OA Support 情報システム室順不同 敬称略
参考文献等HTML5- http://html5.jp/- http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291
Zen-Coding- http://code.google.com/p/zen-coding/- http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn- http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn