コーディング研修

早川 稔

HTMLについて

アジェンダ• HTMLとは

• HTMLの歴史

• HTMLのバージョン

• HTMLの基本形

• タグについて(要素と属性)

• HTMLの記述

• HTMLの文章構造

HTMLとは

Web上の文書を記述するための マークアップ言語

HTMLとは

ですが

その前に

HTMLとは

HTMLが作られた理由を ご存知でしょうか？

HTMLとは

Webが作られた理由を ご存知でしょうか？

HTMLとは

Webの歴史について簡単に…

本題に入る前に

HTMLとは

Web、HTMLの発明者

ティム バーナーズ・リー

http://www.w3.org/People/Berners-Lee/

Web、HTMLの作られた場所

CERN (欧州原子核研究機構)

1989年に誕生

in スイス・ジュネーブ

東京ドーム45個分 (210ヘクタール)

• 何千人という研究者が入れ替わり立ち替わりで研究をしている

➡研究状況の確認や研究の成果物（論文）が探しにくい

Web、HTMLがなぜ作られたか

CERNでの問題

研究状況の確認や論文などの資料や 必要な情報を効率よく閲覧できる環境が必要

World Wide Webの誕生

Webの誕生

研究者の成果物（論文）を共有できるように するためのシステムとして誕生

通信　⇒

ドキュメントの記述　⇒ ハイパーテキスト（HTML）

通信　⇒ HTTP

ウェブの閲覧　⇒ ウェブブラウザ

リソースの置き場所　⇒ウェブサーバー

リソースの参照　⇒ 　　URI

HTML

Web、HTMLがなぜ作られたか

Web上の文書(論文)を記述するために作られた言語

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がなぜ作られたか

HTMLの基本形

<h1 lang=“ja”>大見出し</h1>

HTMLの基本形

要素と属性(element) (attribute)

HTMLには要素と属性があります

要素と属性

<h1 lang=“ja”>大見出し</h1>

要素

属性

要素と属性

要素• 文書を構成するパーツのようなもの　

• 開始タグと終了タグを持つ

• 終了タグを持たない要素もあるが、終了タグを持たない要素のことを空要素という

要素と属性

例： <img> <meta> <br> など

開始タグ 終了タグ<h1 lang=“ja”>大見出し</h1>

例：<h1>、<p>、<ul>など

• 要素に情報を付加するもの

• 属性の種類には下記の2種類に分類される

➡すべてのHTML要素に付与できる属性

➡そのHTML要素のみに付与できる属性　

要素と属性

属性

例：class, id など

例：href, alt など

HTMLの記述

① DOCTYPE

② html要素

③ head要素

④ title要素

⑤ body要素

① DOCTYPE

• HTMLファイルの一行目に記述されているやつ

• DTD（Document Type Definition）文書型の定義

• どの仕様（バージョン）のHTMLなのかを明示する ➡HTMLは、バージョンごとに使用できる要素や属性が定義されている

DOCTYPE

もし、DOCTYPE宣言を指定しなかった場合

• 一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となる。

➡互換モードのブラウザではCSSの解釈が標準と異なるため、レイアウトが大きく崩れる場合がある。

DOCTYPEは必ず指定

② HTML要素

• ドキュメントのルート（基点）要素 ➡HTML や XHTML において、その文書のルート（基点）となる要素

• 他の全ての要素は、この要素の子孫として配置しなければならない

HTML要素

③ head要素

• ドキュメントのメタデータコンテナ

• HTML文書のメタデータ群を内包する要素

• 前後のページ等へのリンク、スクリプトやスタイルシートの定義などを内包する

head要素

④ title要素

• ページタイトル、ドキュメントタイトル

• 文書のタイトルを定義

title要素

⑤ body要素

• html文書のコンテンツを示す要素

• 文書中に一つだけ配置

body要素

コンテンツカテゴリ他のHTML要素

• メタデータコンテンツ

• セクショニングコンテンツ

• ヘディングコンテンツ

• フローコンテンツ

• フレージングコンテンツ

• エンベデッドコンテンツ

• インタラクティブコンテンツ

• フォームリレイテッドコンテンツ

<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> など

HTML要素

HTMLでの子孫 　　　　　⇒ 親子関係

html

head

title

body

h1 p ul

li

HTMLの文章構造

文章構造とは 文章同士の関係を明らかにすること

HTMLの文章構造

HTMLドキュメントでは、見出し、段落、リストなどのHTML要素を用いて文書の構造を規定する

基本的な文章構造• セクション

‣ 見出し

‣ 本文

‣ リスト

‣ (表)

‣ (画像)

HTMLの文章構造

セクション見出し

本文

リスト

HTMLの文章構造

なぜ構造化するのか？

HTMLの文章構造

どちらの文章が見易いでしょうか次に見せる文章Aと文章B

HTMLの文章構造

文章A 文章B

Webはドキュメント

HTMLの文章構造

ヒトにも読み易く

コンピュータにも読み易く

✓アクセシビリティの向上

✓ ユーザビリティの向上

✓ ファインダビリティの向上

ヒューマン リーダブル

マシン リーダブル

HTMLの文章構造（UXハニカム構造）

useful 役に立つ

desirable 好ましい

accessible アクセスしやすい

valuable 価値がある

credible 信頼できる

findable 見つけやすい

usable 使いやすい

利用できる Usable / Accessible / Findable

安心できる Useful / Credible

満足できる Desirable / Valuable

HTMLの文章構造（UXピラミッド）

http://blog.iaspectrum.net/2013/06/25/ux_honeycomb/

アクセスできる Accessible

安心できる Useful / Credible

満足できる Desirable / Valuable

HTMLの文章構造（UXピラミッド）

利用できる Usable / Findable

http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

HTMLの文章構造（UXピラミッド）

閲覧者の年齢や身体的特性に関わらず あらゆる人々が、ウェブサイトにアクセスし、 情報収集などの「ウェブを体験できる」ことを意味する

アクセスできる(accessible)

アクセスできないと、 体験としては最悪

HTMLの文章構造

アクセシブルであることはUXの土台

構造化されていると 何が良いのかという例

1. 見出し

HTMLの文章構造（例）

<h3>

<h3>

<h3>

<h3>

</h3>

</h3>

</h3>

</h3>

検索結果<h2> </h2>

デ モ

VoiceOverを使ったデモ

スクリーンリーダー

• 画面に表示されているコンテンツを読み上げるソフト

• 日本で有名なスクリーンリーダー ‣ PC-Talker ‣ JAWS ‣ NVDA ‣ VoiceOver

音声を発した正体

• 見出しナビゲーション

• リスト項目数の読み上げ

• ランドマークナビゲーション

• フォームの読み上げ

スクリーンリーダーが持つ主な機能

音声を発した正体

見出しの重要性• 文書構造を明確にする

• SEOに有効である、と昔はよく言われた （生きる都市伝説）

• セクションの頭に見出しを配置することで見出しナビゲーション操作ができる（右図参照）

HTMLの文章構造

①

②

③

④

⑤

見出し

2. リスト

HTMLの文章構造

グローバルナビゲーション

リストでマークアップされることが多い

HTMLの文章構造

•グローバルナビゲーションはそのページの目次の役割とする説 •「リンクリストの集合だから」とする説 •SEOに有効であるという説

なぜ多いのか

HTMLの文章構造

リストでマークアップする利点

デ モ

VoiceOverを使ったデモ

ナビゲーションをul要素（リスト）でマークアップした例

HTMLの文章構造

HTMLの文章構造

リストの項目数を知ることができる

• 項目数が分かることによって、情報量の目安がつく • しかる箇所ではリストは非常に有効

※VoiceOverでリストの読み上げ時のキャプチャ

3. フォームー　フォームで注意したい構造　ー

（1）必須項目の示し方

HTMLの文章構造

HTMLの文章構造

赤で示されている項目は必須項目です。

お名前

色のみでの提供

デ モ

HTMLの文章構造

HTMLの文章構造

P型、D型の人の見え方 A型の人の見え方

C型：一般色覚 P型：赤 D型：緑 T型：青 A型：全色盲

C型の人の見え方

HTMLの文章構造

色弱者の割合

320万人以上

男性：20人に1人女性：500人に1人

赤（必須）で示されている項目は必須項目です。

お名前（必須）

テキストでの手がかりを提供

HTMLの文章構造

HTMLの文章構造

P型とD型のシミュレーションができる

Photoshop

表示 > 構成設定

*で示されている項目は必須項目です。

お名前*

アスタリスクの使用は良いか？

HTMLの文章構造

HTMLの文章構造

•読上げられないことがある

•デフォルトの文字サイズよりも小さいサイズで表示されるため、気付かれない場合がある

アスタリスクの使用

アスタリスクを使う場合の注意点•アスタリスクの文字サイズを大きくする •アスタリスクが用いられていることをテキストで示す ➡「必須」でいいんじゃね

赤（必須）で示されている項目は必須項目です。

（必須）

HTMLの文章構造

必須の手がかりの位置

携帯番号

赤（必須）で示されている項目は必須項目です。

携帯番号 （必須）

HTMLの文章構造

①

② ③ ④

HTMLの記述順から順番に読み上げられる•必須項目なのかどうか入力後に気付く可能性がある

（2）入力例の位置

HTMLの文章構造

電話番号

※半角数字 例：09012345678

HTMLの文章構造

入力フォームの上に持ってくるほうがよい

HTMLの文章構造

(3)ラベルの無いフォーム

ラベルの無いフォームの例

メールアドレス

お名前

ログイン

メールアドレス

お名前

ログイン

placeholder属性をラベル目的で 表示しているようなフォーム

ラベルの無いフォームの例

デ モ

VoiceOverを使ったデモ

ラベルの無いフォームの例

メールアドレス

お名前

ボタン

placeholderで示した部分が 読み上げられずに 何を入力したら良いか分からない

ラベルの無いフォームの例

aaa@aaaa.co.jp

山田太郎

ボタン

お名前

メールアドレス

ラベルの無いフォームの例

デ モ

VoiceOverを使ったデモ

ラベルの無いフォームの例

•placeholderは入力例を示すために使う

•入力項目が何を入力をすれば良いかを分かりやすくするためにラベルは必ず必要

•見栄えのために、ラベルを消すことは不都合を生む要因

ラベルの無いフォームの例

まとめ

• Webはもともと論文を共有するために作られた

• HTMLはいくつかバージョンはあるが、HTML5が今は主流

• 文章構造で考える • セクション/見出し/本文 という関係で考える • 文章構造を明確にすることで誰かがアクセスしやすく、探しやすく、使いやすく感じる

• ユーザーに入力をさせる場合は、何を入力させるか明確にさせるためにラベルが必要

• Webは唯一のユニバーサルアクセスを可能とする

まとめ