Upload
minoru-hayakawa
View
61
Download
4
Embed Size (px)
Citation preview
Web、HTMLの発明者
ティム バーナーズ・リー
http://www.w3.org/People/Berners-Lee/
• 何千人という研究者が入れ替わり立ち替わりで研究をしている
➡研究状況の確認や研究の成果物(論文)が探しにくい
Web、HTMLがなぜ作られたか
CERNでの問題
研究状況の確認や論文などの資料や 必要な情報を効率よく閲覧できる環境が必要
World Wide Webの誕生
Webの誕生
研究者の成果物(論文)を共有できるように するためのシステムとして誕生
通信 ⇒
ドキュメントの記述 ⇒ ハイパーテキスト(HTML)
通信 ⇒ HTTP
ウェブの閲覧 ⇒ ウェブブラウザ
リソースの置き場所 ⇒ウェブサーバー
リソースの参照 ⇒ URI
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がなぜ作られたか
要素• 文書を構成するパーツのようなもの
• 開始タグと終了タグを持つ
• 終了タグを持たない要素もあるが、終了タグを持たない要素のことを空要素という
要素と属性
例: <img> <meta> <br> など
開始タグ 終了タグ<h1 lang=“ja”>大見出し</h1>
例:<h1>、<p>、<ul>など
• 要素に情報を付加するもの
• 属性の種類には下記の2種類に分類される
➡すべてのHTML要素に付与できる属性
➡そのHTML要素のみに付与できる属性
要素と属性
属性
例:class, id など
例:href, alt など
• HTMLファイルの一行目に記述されているやつ
• DTD(Document Type Definition)文書型の定義
• どの仕様(バージョン)のHTMLなのかを明示する ➡HTMLは、バージョンごとに使用できる要素や属性が定義されている
DOCTYPE
• 一般的なブラウザではレンダリングモードが互換モード(Quirks mode)となる。
➡互換モードのブラウザではCSSの解釈が標準と異なるため、レイアウトが大きく崩れる場合がある。
DOCTYPEは必ず指定
• メタデータコンテンツ
• セクショニングコンテンツ
• ヘディングコンテンツ
• フローコンテンツ
• フレージングコンテンツ
• エンベデッドコンテンツ
• インタラクティブコンテンツ
• フォームリレイテッドコンテンツ
<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の文章構造(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)
スクリーンリーダー
• 画面に表示されているコンテンツを読み上げるソフト
• 日本で有名なスクリーンリーダー ‣ PC-Talker ‣ JAWS ‣ NVDA ‣ VoiceOver
音声を発した正体
見出しの重要性• 文書構造を明確にする
• SEOに有効である、と昔はよく言われた (生きる都市伝説)
• セクションの頭に見出しを配置することで見出しナビゲーション操作ができる(右図参照)
HTMLの文章構造
①
②
③
④
⑤
見出し
HTMLの文章構造
•読上げられないことがある
•デフォルトの文字サイズよりも小さいサイズで表示されるため、気付かれない場合がある
アスタリスクの使用
アスタリスクを使う場合の注意点•アスタリスクの文字サイズを大きくする •アスタリスクが用いられていることをテキストで示す ➡「必須」でいいんじゃね
•placeholderは入力例を示すために使う
•入力項目が何を入力をすれば良いかを分かりやすくするためにラベルは必ず必要
•見栄えのために、ラベルを消すことは不都合を生む要因
ラベルの無いフォームの例
• Webはもともと論文を共有するために作られた
• HTMLはいくつかバージョンはあるが、HTML5が今は主流
• 文章構造で考える • セクション/見出し/本文 という関係で考える • 文章構造を明確にすることで誰かがアクセスしやすく、探しやすく、使いやすく感じる
• ユーザーに入力をさせる場合は、何を入力させるか明確にさせるためにラベルが必要
• Webは唯一のユニバーサルアクセスを可能とする
まとめ