Basic HTML Introduction

435 views

Published on

This is Basic HTML Introduction for Designers, Coders.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
435
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Basic HTML Introduction

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

×