HTML5など社内勉強会 Vol.2 - HTML5, CSS3

HTML5など
勉強会 Vol. 2
2011/10/17 @ 某社
System Management Headquaters
George 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 21
class属性の値は、複数のクラス名を
半角スペースで区切って列記することができる

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>

皆さん、成績は
如何でしたか？

と、いうことで
ここからが本番

Agenda
1. HTML5
1-1. コンテンツ・モデル
1-2. セクションを構成する要素
1-3. アウトライン
2. CSS
2-1. セレクタの優先順位
2-2. 厳選プロパティ【レイアウト編】
2-3. さようなら、table要素 / ﬂoatプロパティ
3. ライトニングトーク

もっとセマンティックな文書を
もっとリッチなWebアプリを
もっと標準化された技術で
もっと扱いやすく
（互換性, 有用性, 相互運用性, ユニバーサル・アクセス）
これらを実現するための仕様
=

・ブロック要素
・インライン要素
↓ ↓
コンテンツ・モデル
廃止
HTML4との大きな違い

どの要素にどんな内容（コンテンツ）を
入れても良いか定義したもの
・すべての要素に定義されている
・多くの要素はカテゴリーによって定義される
・カテゴリーは要素を目的に応じて
�グループ化したもので、全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

フロー
ヘッディング
セクショニング
エンベッディッド
フレージング
インタラクティブ
メタデータ
コンテンツ・モデル: カテゴリー

見出しから、その内容までを含んだ
範囲（セクション）を定義する
・「章」や「節」といった区分けの概念に近い
・要素は潜在的に見出しとアウトラインを持つ

セクションを構成する要素（抜粋）
ヘッディング・コンテンツ
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分

コンテンツの階層構造のこと
・書籍の目次をイメージすると分かり易い
→ 本の「タイトル」がトップ階層
→ 「タイトル」の下に「章」がある
→ 「章」の下に「節」がある
基本的には、Webページも同じはず
アウトライン

これもアウトラインですね
1. HTML5
1-1. コンテンツ・モデル
1-2. セクションを構成する要素
1-3. アウトライン
2. CSS
2-1. セレクタの優先順位
2-2. 厳選プロパティ【レイアウト編】
2-3. さようなら、table要素 / ﬂoatプロパティ
3. ライトニングトーク

アウトラインを判別するためのきまり
・見出し要素だけで判別する方法
→ 暗黙的なアウトライン
・セクション要素を使って判別する方法
→ 明示的なアウトライン
アウトライン・アルゴリズム

セクショニング・コンテンツに属する要素がなければ、
見出し要素が現れた時点で、新たなセクションが始まる
・h1〜h6 要素の数字の大きさを基準に、
・アウトライン・レベルを1段階ずつ上げ下げする
■判別基準
・h1〜h6要素末尾の数字が、以前のセクションの見出しより
・大きいか、小さいか、同じか
・要素末尾の数字が2つ以上大きく（小さく）なっても、
・アウトライン・レベルが2段階下がる（上がる）わけではない
暗黙的なアウトライン

セクショニング・コンテンツに属する要素が現れると、
その1つ上のセクションからアウトライン・レベルが1つ下がる
・その要素の中で最初に現れる見出し要素が、
・そのセクションの見出しとなる
■セクショニング・コンテンツ
明示的なアウトライン

実際に確かめてみる
HTML 5 Outliner
goo.gl/dZ5ha
h1∼h6

このアルゴリズムは
なぜ作られたの？
Q.1

「暗黙的なアウトライン」では、
見出しの及ぶ範囲が分かりにくいから
→ もっとセマンティックな文書を
A.1

セマンティックな
文書にする利点は？
Q.2

ブラウザやクローラーに、文書構造を
正確に理解させることができる
→ 検索大手3社が共同で開発中（schema.org）
→ ユニバーサル・アクセス化
→ その他にも、イロイロ出てくるはず
A.2

■基本的な優先順位
後から読み込んだスタイルが優先
■個別性による優先順位
より具体的に指定されたものが優先
■ !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 宣言

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;
ボックスの重なり順を指定
数字が大きいほど上に配置

これまでの
レイアウト

<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>
ﬂoatプロパティを使ったレイアウト

⃝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 {
-webkit-box-orient: vertical; /* 縦並びにする */
}

#box_1 {
background-color: lightpink;
}
#box_2 {
background-color: lightblue;
}
#box_3 {
background-color: lightgreen;
}

#box_1 {
}
#box_2 {
background-color: lightblue;
-webkit-box-ordinal-group: 2; /* 表示順を2番に */
}
#box_3 {
background-color: lightgreen;
-webkit-box-ordinal-group: 1;
/* 表示順を1番に */
}

#container_b {
-webkit-box-orient: vertical;
}
#box_1 {
}

#container_b {
-webkit-box-orient: vertical;
-webkit-box-flex: 3.0; /* ページ余白の 3/4 をこのボックスに割り当て */
}
#box_1 {
-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>

10talks in a 60minute slot
60min.
５min.
５min.
５min.
５min.
５min.
５min.
５min.
５min.
５min.
５min.

1人の持ち時間５分
延長はありません
質疑応答の時間もありません
気になる事は本人を捕まえて
LTのお約束ごと

LTセッションは
以上で終了です

登壇者の皆さんに
もう一度拍手を！

これですべての
コンテンツ終了

後日、アンケートに
ご協力下さい！！！

勉強会スタッフ
絶賛募集中です

このあと残って
イスとテーブルを
一緒に片付けて
くれると嬉しい

また次回
お会いしましょう

Special Thanks to
Operation
Operation
Operation
Operation
Support
Support
Support
Support
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

HTML5など社内勉強会 Vol.2 - HTML5, CSS3

More Related Content

Similar to HTML5など社内勉強会 Vol.2 - HTML5, CSS3

More from George Harada

HTML5など社内勉強会 Vol.2 - HTML5, CSS3