Page 1
コーディング研修
早川 稔
HTMLについて
Page 2
アジェンダ• HTMLとは
• HTMLの歴史
• HTMLのバージョン
• HTMLの基本形
• タグについて(要素と属性)
• HTMLの記述
• HTMLの文章構造
Page 4
Web上の文書を記述するための マークアップ言語
HTMLとは
Page 6
HTMLが作られた理由を ご存知でしょうか?
HTMLとは
Page 7
Webが作られた理由を ご存知でしょうか?
HTMLとは
Page 8
Webの歴史について簡単に…
本題に入る前に
HTMLとは
Page 9
Web、HTMLの発明者
ティム バーナーズ・リー
http://www.w3.org/People/Berners-Lee/
Page 10
Web、HTMLの作られた場所
CERN (欧州原子核研究機構)
1989年に誕生
in スイス・ジュネーブ
東京ドーム45個分 (210ヘクタール)
Page 11
• 何千人という研究者が入れ替わり立ち替わりで研究をしている
➡研究状況の確認や研究の成果物(論文)が探しにくい
Web、HTMLがなぜ作られたか
CERNでの問題
研究状況の確認や論文などの資料や 必要な情報を効率よく閲覧できる環境が必要
Page 12
World Wide Webの誕生
Webの誕生
研究者の成果物(論文)を共有できるように するためのシステムとして誕生
通信 ⇒
ドキュメントの記述 ⇒ ハイパーテキスト(HTML)
通信 ⇒ HTTP
ウェブの閲覧 ⇒ ウェブブラウザ
リソースの置き場所 ⇒ウェブサーバー
リソースの参照 ⇒ URI
Page 13
HTML
Web、HTMLがなぜ作られたか
Web上の文書(論文)を記述するために作られた言語
Page 14
HTMLのバージョンの推移• HTML 1.0(1993) • HTML 2.0(1995) • HTML 3.0(1997)策定途中で破棄 • HTML 3.2(1997) • HTML 4.0、HTML 4.01(1997) • XHTML 1.0(2000) • XHTML 1.1(2001) • XHTML 2.0(2009)策定の打ち切り • HTML 5(2008)
Web、HTMLがなぜ作られたか
Page 16
<h1 lang=“ja”>大見出し</h1>
HTMLの基本形
Page 17
要素と属性(element) (attribute)
HTMLには要素と属性があります
要素と属性
Page 18
<h1 lang=“ja”>大見出し</h1>
要素
属性
要素と属性
Page 19
要素• 文書を構成するパーツのようなもの
• 開始タグと終了タグを持つ
• 終了タグを持たない要素もあるが、終了タグを持たない要素のことを空要素という
要素と属性
例: <img> <meta> <br> など
開始タグ 終了タグ<h1 lang=“ja”>大見出し</h1>
例:<h1>、<p>、<ul>など
Page 20
• 要素に情報を付加するもの
• 属性の種類には下記の2種類に分類される
➡すべてのHTML要素に付与できる属性
➡そのHTML要素のみに付与できる属性
要素と属性
属性
例:class, id など
例:href, alt など
Page 22
① DOCTYPE
② html要素
③ head要素
④ title要素
⑤ body要素
Page 24
• HTMLファイルの一行目に記述されているやつ
• DTD(Document Type Definition)文書型の定義
• どの仕様(バージョン)のHTMLなのかを明示する ➡HTMLは、バージョンごとに使用できる要素や属性が定義されている
DOCTYPE
Page 25
もし、DOCTYPE宣言を指定しなかった場合
Page 26
• 一般的なブラウザではレンダリングモードが互換モード(Quirks mode)となる。
➡互換モードのブラウザではCSSの解釈が標準と異なるため、レイアウトが大きく崩れる場合がある。
DOCTYPEは必ず指定
Page 28
• ドキュメントのルート(基点)要素 ➡HTML や XHTML において、その文書のルート(基点)となる要素
• 他の全ての要素は、この要素の子孫として配置しなければならない
HTML要素
Page 30
• ドキュメントのメタデータコンテナ
• HTML文書のメタデータ群を内包する要素
• 前後のページ等へのリンク、スクリプトやスタイルシートの定義などを内包する
head要素
Page 32
• ページタイトル、ドキュメントタイトル
• 文書のタイトルを定義
title要素
Page 34
• html文書のコンテンツを示す要素
• 文書中に一つだけ配置
body要素
Page 35
コンテンツカテゴリ他のHTML要素
Page 36
• メタデータコンテンツ
• セクショニングコンテンツ
• ヘディングコンテンツ
• フローコンテンツ
• フレージングコンテンツ
• エンベデッドコンテンツ
• インタラクティブコンテンツ
• フォームリレイテッドコンテンツ
<link>、<meta>、<style>、<title> など
<header>、<footer>、<article>、 <nav>、 <section> など
<h1> ~ <h6>、<hgroup>
<a>、<p>、<ul>、<ol> など
<em>、<i>、<img>、<span> など
<audio>、<iframe>、<svg>、<video> など
<button>、<input>、<a> など
<select>、<textarea>、<input>、<progress> など
Page 37
HTML要素
HTMLでの子孫 ⇒ 親子関係
html
head
title
body
h1 p ul
li
Page 39
文章構造とは 文章同士の関係を明らかにすること
HTMLの文章構造
HTMLドキュメントでは、見出し、段落、リストなどのHTML要素を用いて文書の構造を規定する
Page 40
基本的な文章構造• セクション
‣ 見出し
‣ 本文
‣ リスト
‣ (表)
‣ (画像)
HTMLの文章構造
セクション見出し
本文
リスト
Page 41
HTMLの文章構造
なぜ構造化するのか?
Page 42
HTMLの文章構造
どちらの文章が見易いでしょうか次に見せる文章Aと文章B
Page 43
HTMLの文章構造
文章A 文章B
Page 44
Webはドキュメント
HTMLの文章構造
ヒトにも読み易く
コンピュータにも読み易く
Page 45
✓アクセシビリティの向上
✓ ユーザビリティの向上
✓ ファインダビリティの向上
ヒューマン リーダブル
マシン リーダブル
Page 46
HTMLの文章構造(UXハニカム構造)
useful 役に立つ
desirable 好ましい
accessible アクセスしやすい
valuable 価値がある
credible 信頼できる
findable 見つけやすい
usable 使いやすい
Page 47
利用できる Usable / Accessible / Findable
安心できる Useful / Credible
満足できる Desirable / Valuable
HTMLの文章構造(UXピラミッド)
http://blog.iaspectrum.net/2013/06/25/ux_honeycomb/
Page 48
アクセスできる Accessible
安心できる Useful / Credible
満足できる Desirable / Valuable
HTMLの文章構造(UXピラミッド)
利用できる Usable / Findable
http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
Page 49
HTMLの文章構造(UXピラミッド)
閲覧者の年齢や身体的特性に関わらず あらゆる人々が、ウェブサイトにアクセスし、 情報収集などの「ウェブを体験できる」ことを意味する
アクセスできる(accessible)
Page 50
アクセスできないと、 体験としては最悪
HTMLの文章構造
アクセシブルであることはUXの土台
Page 51
構造化されていると 何が良いのかという例
Page 53
HTMLの文章構造(例)
<h3>
<h3>
<h3>
<h3>
</h3>
</h3>
</h3>
</h3>
検索結果<h2> </h2>
Page 54
デ モ
VoiceOverを使ったデモ
Page 55
スクリーンリーダー
• 画面に表示されているコンテンツを読み上げるソフト
• 日本で有名なスクリーンリーダー ‣ PC-Talker ‣ JAWS ‣ NVDA ‣ VoiceOver
音声を発した正体
Page 56
• 見出しナビゲーション
• リスト項目数の読み上げ
• ランドマークナビゲーション
• フォームの読み上げ
スクリーンリーダーが持つ主な機能
音声を発した正体
Page 57
見出しの重要性• 文書構造を明確にする
• SEOに有効である、と昔はよく言われた (生きる都市伝説)
• セクションの頭に見出しを配置することで見出しナビゲーション操作ができる(右図参照)
HTMLの文章構造
①
②
③
④
⑤
見出し
Page 59
HTMLの文章構造
グローバルナビゲーション
リストでマークアップされることが多い
Page 60
HTMLの文章構造
•グローバルナビゲーションはそのページの目次の役割とする説 •「リンクリストの集合だから」とする説 •SEOに有効であるという説
なぜ多いのか
Page 61
HTMLの文章構造
リストでマークアップする利点
Page 62
デ モ
VoiceOverを使ったデモ
Page 63
ナビゲーションをul要素(リスト)でマークアップした例
HTMLの文章構造
Page 64
HTMLの文章構造
リストの項目数を知ることができる
• 項目数が分かることによって、情報量の目安がつく • しかる箇所ではリストは非常に有効
※VoiceOverでリストの読み上げ時のキャプチャ
Page 65
3. フォームー フォームで注意したい構造 ー
Page 66
(1)必須項目の示し方
HTMLの文章構造
Page 67
HTMLの文章構造
赤で示されている項目は必須項目です。
お名前
色のみでの提供
Page 69
HTMLの文章構造
P型、D型の人の見え方 A型の人の見え方
C型:一般色覚 P型:赤 D型:緑 T型:青 A型:全色盲
C型の人の見え方
Page 70
HTMLの文章構造
色弱者の割合
320万人以上
男性:20人に1人女性:500人に1人
Page 71
赤(必須)で示されている項目は必須項目です。
お名前(必須)
テキストでの手がかりを提供
HTMLの文章構造
Page 72
HTMLの文章構造
P型とD型のシミュレーションができる
Photoshop
表示 > 構成設定
Page 73
*で示されている項目は必須項目です。
お名前*
アスタリスクの使用は良いか?
HTMLの文章構造
Page 74
HTMLの文章構造
•読上げられないことがある
•デフォルトの文字サイズよりも小さいサイズで表示されるため、気付かれない場合がある
アスタリスクの使用
アスタリスクを使う場合の注意点•アスタリスクの文字サイズを大きくする •アスタリスクが用いられていることをテキストで示す ➡「必須」でいいんじゃね
Page 75
赤(必須)で示されている項目は必須項目です。
(必須)
HTMLの文章構造
必須の手がかりの位置
携帯番号
Page 76
赤(必須)で示されている項目は必須項目です。
携帯番号 (必須)
HTMLの文章構造
①
② ③ ④
HTMLの記述順から順番に読み上げられる•必須項目なのかどうか入力後に気付く可能性がある
Page 77
(2)入力例の位置
HTMLの文章構造
Page 78
電話番号
※半角数字 例:09012345678
HTMLの文章構造
入力フォームの上に持ってくるほうがよい
Page 79
HTMLの文章構造
(3)ラベルの無いフォーム
Page 80
ラベルの無いフォームの例
メールアドレス
お名前
ログイン
Page 81
メールアドレス
お名前
ログイン
placeholder属性をラベル目的で 表示しているようなフォーム
ラベルの無いフォームの例
Page 82
デ モ
VoiceOverを使ったデモ
ラベルの無いフォームの例
Page 83
メールアドレス
お名前
ボタン
placeholderで示した部分が 読み上げられずに 何を入力したら良いか分からない
ラベルの無いフォームの例
Page 84
[email protected]
山田太郎
ボタン
お名前
メールアドレス
ラベルの無いフォームの例
Page 85
デ モ
VoiceOverを使ったデモ
ラベルの無いフォームの例
Page 86
•placeholderは入力例を示すために使う
•入力項目が何を入力をすれば良いかを分かりやすくするためにラベルは必ず必要
•見栄えのために、ラベルを消すことは不都合を生む要因
ラベルの無いフォームの例
Page 88
• Webはもともと論文を共有するために作られた
• HTMLはいくつかバージョンはあるが、HTML5が今は主流
• 文章構造で考える • セクション/見出し/本文 という関係で考える • 文章構造を明確にすることで誰かがアクセスしやすく、探しやすく、使いやすく感じる
• ユーザーに入力をさせる場合は、何を入力させるか明確にさせるためにラベルが必要
• Webは唯一のユニバーサルアクセスを可能とする
まとめ