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

2,671 views
2,600 views

Published on

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,671
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. HTML5など勉強会 Vol. 22011/10/17 @ 某社System Management HeadquatersGeorge Harada
  2. 2. 提 供勉強会スタッフ(ボランティア)インフラ統括本部Web標準G
  3. 3. 今回は参加申込でDevQuiz を受けて頂きました
  4. 4. 早速ですが解答発表!
  5. 5. A BC DCSSの組み合わせ正しいものはどれ?Q129 32 0
  6. 6. body {background-color: white;color: black;}CSSの書き方どこで(セレクタ) {  なにを(プロパティ): どうする(値); }
  7. 7. AHTMLの「id属性」に関する説明で正しいものはどれ?Q226B 28C 28D 15id属性の目的は、要素を識別するための、固有の識別子を指定することである1つの文書内で、id属性の値が重複してはならない(一意でなければならない)CSSで、id属性を使って要素を指定する場合、id属性の値の前に #(ハッシュ)をつけて用いるid属性の値は、半角アルファベットの大文字・小文字が区別される
  8. 8. AHTMLの「class属性」に関する説明で正しいものはどれ?Q327B 33C 28D 16class属性の主な目的は、要素にスタイルを適用させるための、クラス名を指定することである1つの文書内で、同じclass属性の値を何度でも用いることができるCSSで、class属性を使って要素を指定する場合、class属性の値の前に .(ピリオド)をつけて用いるclass属性の値は、半角アルファベットの大文字・小文字が区別されるE 21class属性の値は、複数のクラス名を半角スペースで区切って列記することができる
  9. 9. AHTML5 で強化された「セマンティクス」の説明として、正しいものはどれ?Q42B 0C 11D 21ある製品を使ったときに得られる経験や満足検索エンジン最適化構文データの意味
  10. 10. データの意味, 意味規則つまり・・・セマンティクスHTML5では、文書が持つデータの意味をより明確に表すことが出来るようになる
  11. 11. AHTML5の「DOCTYPE宣言」として、正しいものはどれ?Q53B 31C 0D 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>
  12. 12. 皆さん、成績は如何でしたか?
  13. 13. Congratulations!!順不同
  14. 14. と、いうことでここからが本番
  15. 15. Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
  16. 16. HTML5
  17. 17. もっとセマンティックな文書をもっとリッチなWebアプリをもっと標準化された技術でもっと扱いやすく(互換性, 有用性, 相互運用性, ユニバーサル・アクセス)これらを実現するための仕様=
  18. 18. ・ブロック要素・インライン要素↓ ↓コンテンツ・モデル廃止HTML4との大きな違い
  19. 19. Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
  20. 20. どの要素にどんな内容(コンテンツ)を入れても良いか定義したもの・すべての要素に定義されている・多くの要素はカテゴリーによって定義される・カテゴリーは要素を目的に応じて�グループ化したもので、全8種類あるコンテンツ・モデル
  21. 21. コンテンツ・モデル: カテゴリーフローヘッディングセクショニングエンベッディッドフレージングインタラクティブメタデータセクショニング・ルート
  22. 22. 以降のコンテンツの表示や動作をセットする・自身と他のドキュメントとの関連性をセットする・他の "帯域外" の情報を伝達する・基本的に、ブラウザ上には直接表示されないメタデータ・コンテンツbase command link meta noscript script style title
  23. 23. ドキュメント内に現れるコンテンツ全般フロー・コンテンツa abbr address area (map要素の子孫の場合) article aside audiob bdi bdo blockquote br button canvas cite code commanddatalist del details dfn div dl em embed fieldset figure footer formh1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input inskbd keygen label map mark math menu meter nav noscriptobject ol output p pre progress q ruby s samp script sectionselect small span strong style (scoped属性が存在している場合)sub sup svg table textarea time u ul var video wbr テキスト
  24. 24. 見出しから、その内容までを含んだ範囲(セクション)を定義する・「章」や「節」といった概念に近い・要素は潜在的に見出しとアウトラインを持つセクショニング・コンテンツarticle aside nav section
  25. 25. セクションの見出しを表す・「アウトライン・アルゴリズム」と密接に関係するヘッディング・コンテンツh1 h2 h3 h4 h5 h6 hgroup
  26. 26. ドキュメントのテキスト・段落中にあるテキストの範囲を指し示す要素・HTML4におけるインライン要素に近い概念フレージング・コンテンツa (フレージング・コンテンツのみが入れられている場合) abbr area (map要素の子孫の場合) audiob bdi bdo br button canvas cite code command datalistdel (フレージング・コンテンツのみが入れられている場合) dfn em embed i iframe img inputins (フレージング・コンテンツのみが入れられている場合) kbd keygen label map (フレージング・コンテンツのみが入れられている場合)mark math meter noscript object output progress q rubys samp script select small span strong sub sup svgtextarea time u var video wbr テキスト
  27. 27. 外部のリソースをインポートする・画像, プラグイン, フレーム, ビデオ, Canvas などHTML以外の言語で表すもの・SVG, MathMLエンベッディッド・コンテンツaudio canvas embed iframe img math object svg video
  28. 28. ユーザが操作をすることができる・ハイパーリンク, クリックすることで・状態が変化するもの などa audio (controls属性が存在している場合) button details embed iframeimg (usemap属性が存在している場合) input (type属性がhidden状態でない場合) keygen labelmenu (type属性がtoolbar状態の場合) object (usemap属性が存在している場合) selecttextarea video (controls属性が存在している場合)インタラクティブ・コンテンツ
  29. 29. この要素内のコンテンツは、前後のコンテンツとは切り離されたものとして見なされるセクショニング・ルートblockquote body details fieldset figure td
  30. 30. Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
  31. 31. セクション?
  32. 32. フローヘッディングセクショニングエンベッディッドフレージングインタラクティブメタデータコンテンツ・モデル: カテゴリーセクショニング・ルート
  33. 33. 見出しから、その内容までを含んだ範囲(セクション)を定義する・「章」や「節」といった区分けの概念に近い・要素は潜在的に見出しとアウトラインを持つセクショニング・コンテンツarticle aside nav section
  34. 34. セクションの見出しを表す・「アウトライン・アルゴリズム」と密接に関係するヘッディング・コンテンツh1 h2 h3 h4 h5 h6 hgroup
  35. 35. セクショニング・コンテンツセクションを構成する要素(抜粋)article aside nav sectionヘッディング・コンテンツh1 h2 h3 h4 h5 h6 hgroupフロー・コンテンツheader footer div
  36. 36. それ自身が独立したコンテンツを表す■この要素が適しているかの判断基準・フィードとして配信する際、そのコンテンツが・1つのエントリーとしてふさわしいか?ex. ブログの投稿, ニュースサイトの記事, ブログ記事へのコメント, 掲示板の投稿article要素
  37. 37. 関連が薄いコンテンツを表す■この要素が適しているかの判断基準・仮に、そのコンテンツを削除しても、・ページが成り立つか?ex. 補足記事, サイドバー, 広告, プルクォートaside要素
  38. 38. 主要なナビゲーションを形成する範囲を表す■この要素が適しているかの判断基準・それは、本当に主要なナビゲーションか?ex. サイト全体のナビ, あるカテゴリー内のナビ, パンくずリスト誤った使い方: サイト内検索の入力欄, サイトマップの本文nav要素
  39. 39. その他の一般的なセクション■この要素が適しているかの判断基準・それは「章」や「節」といった単位で表すのに・ふさわしいコンテンツか?・他に、ふさわしい要素はないか?誤った使い方: 見出しがない, レイアウトだけのために使用するsection要素
  40. 40. セクションの見出しを表す■この要素が適しているかの判断基準・それは「章」や「節」といった単位の・見出しとしてふさわしいか?h1∼h6要素
  41. 41. 見出しと、それに付随する小見出し, 副題, キャッチフレーズなどをグループ化する■特徴・h1〜h6要素だけしか入れられないhgroup要素
  42. 42. セマンティクス上�特定の意味を持たない 一般的なコンテナ■この要素が適しているかの判断基準・他に、ふさわしい要素はないか?ex. 何かしら区別したい領域を囲む, グルーピングに使うdiv要素
  43. 43. セクションのヘッダー, フッターを表す■特徴・1ページの中で、何回使ってもよいex. ページ全体のヘッダー, ある記事のヘッダー, etc.header, footer要素
  44. 44. いきなりですが
  45. 45. 実際にやってみる-- 社内URL --Google Chrome / Safari で上記のURLにアクセスして、会社のメールアドレスを入力※Google Chromeの方が、キャッシュが残りにくいのでオススメ
  46. 46. 課題今日紹介した要素を使ってセマンティクスを意識したマークアップに変更する。制限時間: 5分
  47. 47. 解答例-- 社内URL --
  48. 48. Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
  49. 49. アウトライン?
  50. 50. コンテンツの階層構造のこと・書籍の目次をイメージすると分かり易い→ 本の「タイトル」がトップ階層→ 「タイトル」の下に「章」がある→ 「章」の下に「節」がある基本的には、Webページも同じはずアウトライン
  51. 51. これもアウトラインですね1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
  52. 52. アウトラインを判別するためのきまり・見出し要素だけで判別する方法→ 暗黙的なアウトライン・セクション要素を使って判別する方法→ 明示的なアウトラインアウトライン・アルゴリズム
  53. 53. セクショニング・コンテンツに属する要素がなければ、見出し要素が現れた時点で、新たなセクションが始まる・h1〜h6 要素の数字の大きさを基準に、・アウトライン・レベルを1段階ずつ上げ下げする■判別基準・h1〜h6要素末尾の数字が、以前のセクションの見出しより・大きいか、小さいか、同じか・要素末尾の数字が2つ以上大きく(小さく)なっても、・アウトライン・レベルが2段階下がる(上がる)わけではない暗黙的なアウトライン
  54. 54. セクショニング・コンテンツに属する要素が現れると、その1つ上のセクションからアウトライン・レベルが1つ下がる・その要素の中で最初に現れる見出し要素が、・そのセクションの見出しとなる■セクショニング・コンテンツ明示的なアウトラインarticle aside nav section
  55. 55. 実際に確かめてみるHTML 5 Outlinergoo.gl/dZ5haarticle aside nav sectionh1∼h6
  56. 56. アウトラインQ & A
  57. 57. このアルゴリズムはなぜ作られたの?Q.1
  58. 58. 「暗黙的なアウトライン」では、見出しの及ぶ範囲が分かりにくいから→ もっとセマンティックな文書をA.1
  59. 59. セマンティックな文書にする利点は?Q.2
  60. 60. ブラウザやクローラーに、文書構造を正確に理解させることができる→ 検索大手3社が共同で開発中 (schema.org)→ ユニバーサル・アクセス化→ その他にも、イロイロ出てくるはずA.2
  61. 61. Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
  62. 62. ■基本的な優先順位後から読み込んだスタイルが優先■個別性による優先順位より具体的に指定されたものが優先■ !important 宣言問答無用の最終兵器 (最重要規則)CSSの優先順位
  63. 63. div {color: red;}div {color: blue;}基本的な優先順位こちらが優先
  64. 64. ・より具体的に指定されたものが優先・以下の得点により優先順位を算出個別性による優先順位要素のstyle属性:idセレクタ:classセレクタ:要素セレクタ:1,000点0,100点0,010点0,001点
  65. 65. <div id=”id” class=”class”>ここで問題</div>#id {color: red;}#id.class {color: green;}個別性による優先順位div {color: blue;}.class {color: yellow;}A BC D有効になるのは、どのセレクタでしょうか?
  66. 66. 解答Cそれぞれの点数を計算してみよう
  67. 67. 最終兵器/* すべてのdiv要素の文字色を赤に */div {color: red !important;}!important 宣言
  68. 68. Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
  69. 69. height: 縦サイズwidth: 横サイズmargin: 外余白padding: 内余白border: 罫線(marginとpaddingを隔てる線)background-color: 背景色領域サイズ, 余白, 罫線, 背景色
  70. 70. インラインレベルの表示を制御text-align: right;text-align: center;text-align: left;文字等の左右寄せ, センタリング
  71. 71. 魔法の言葉margin: 0 auto;ブロックレベルのセンタリング左右のマージンを自動で最適化する上下のマージンは、0以外も指定できる
  72. 72. /* 標準配置 */position: static;/* 相対位置 */position: relative;/* 絶対位置 */position: absolute;/* 絶対位置でスクロールしても固定 */position: fixed;ボックスの配置方法(基準位置を指定)top:bottom:left:right:同時使用
  73. 73. position: relative;相対位置を指定して配置するposition: relative;top: 50px;left: 70px;ex. 本来表示されるはずだった位置(static)から、ex. 下に 50px, 右に 70px 移動した場所に配置
  74. 74. position: absolute;絶対位置を指定して配置するposition: absolute;top: 50px;left: 70px;! 親ボックスが position: static; の時・画面全体の左上が top: 0, left: 0 の基準! それ以外が指定されている時・親ボックスの左上が top: 0, left: 0 の基準
  75. 75. position: fixed;絶対位置でスクロールしても固定position: fixed;bottom: 0px;left: 0px;ex. 画面の最下部に配置※ iOS 5 未満の端末では、fixed が機能しない# 同等の表示がしたい時は、JavaScript で制御する
  76. 76. position: static; 以外が指定されたボックスの重なり順を指定position: relative;z-index: 10;ボックスの重なり順を指定数字が大きいほど上に配置
  77. 77. sample-- 社内URL --
  78. 78. Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
  79. 79. これまでのレイアウト
  80. 80. <table><tr><td rowspan="2">Book Photo</td><td>Book Title</td></tr><tr><td>Book Contents</td></tr></table>table要素を使ったレイアウト
  81. 81. <div style="overflow: hidden;"><img src="/html5.jpg" style="float: left;"><p>Book Title</p><p>Book Contents</p></div>floatプロパティを使ったレイアウト
  82. 82. ⃝table要素を使ったレイアウト・セマンティクスが正しくない・アクセシビリティを大きく損なう⃝floatプロパティを使ったレイアウト・柔軟な調整や配置が難しい・回り込みの解除が面倒これまでのレイアウトじゃダメ?
  83. 83. これからのレイアウト
  84. 84. フレキシブル・ボックスとは、その中に含まれるボックスのサイズ調整や配置を指定できる、柔軟なボックスのこと。これまでのpositionプロパティや、floatプロパティを使うボックスのレイアウトに比べて、より簡単に指定できる。フレキシブル・ボックス
  85. 85. <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>フレキシブル・ボックスを使ったレイアウト
  86. 86. #container_a {display: -webkit-box;}#container_b {display: -webkit-box;-webkit-box-orient: vertical; /* 縦並びにする */}フレキシブル・ボックスを使ったレイアウト
  87. 87. #box_1 {background-color: lightpink;}#box_2 {background-color: lightblue;}#box_3 {background-color: lightgreen;}フレキシブル・ボックスを使ったレイアウト
  88. 88. #box_1 {background-color: lightpink;}#box_2 {background-color: lightblue;-webkit-box-ordinal-group: 2; /* 表示順を2番に */}#box_3 {background-color: lightgreen;-webkit-box-ordinal-group: 1;/* 表示順を1番に */}フレキシブル・ボックスを使ったレイアウト
  89. 89. #container_b {display: -webkit-box;-webkit-box-orient: vertical;-webkit-box-ordinal-group: 1; /* 表示順を1番に */}#box_1 {background-color: lightpink;-webkit-box-ordinal-group: 2; /* 表示順を2番に */}フレキシブル・ボックスを使ったレイアウト
  90. 90. #container_b {display: -webkit-box;-webkit-box-orient: vertical;-webkit-box-ordinal-group: 1;-webkit-box-flex: 3.0; /* ページ余白の 3/4 をこのボックスに割り当て */}#box_1 {background-color: lightpink;-webkit-box-ordinal-group: 2;-webkit-box-flex: 1.0; /* ページ余白の 1/4 をこのボックスに割り当て */}フレキシブル・ボックスを使ったレイアウト
  91. 91. フレキシブル・ボックスとは、その中に含まれるボックスのサイズ調整や配置を指定できる、柔軟なボックスのこと。これまでのpositionプロパティや、floatプロパティを使うボックスのレイアウトに比べて、より簡単に指定できる。他のプロパティをいろいろ組み合わせて便利な使い方を見つけよう!フレキシブル・ボックス
  92. 92. 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: ボックスを寄せる位置を指定フレキシブル・ボックス
  93. 93. こんなグラフも簡単に作れるよ!<div id="container"><div id="box1">50</div><div id="box2">100</div><div id="box3">20</div><div id="box4">200</div><div id="box5">140</div></div>フレキシブル・ボックス
  94. 94. sample-- 社内URL --
  95. 95. Agenda1. HTML51-1. コンテンツ・モデル1-2. セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
  96. 96. 10talks in a 60minute slot60min.5min.5min.5min.5min.5min.5min.5min.5min.5min.5min.
  97. 97. 1人の持ち時間5分延長はありません質疑応答の時間もありません気になる事は本人を捕まえてLTのお約束ごと
  98. 98. LTセッションは以上で終了です
  99. 99. 登壇者の皆さんにもう一度拍手を!
  100. 100. これですべてのコンテンツ終了
  101. 101. 後日、アンケートにご協力下さい!!!
  102. 102. 勉強会スタッフ絶賛募集中です
  103. 103. このあと残ってイスとテーブルを一緒に片付けてくれると嬉しい
  104. 104. また次回お会いしましょう
  105. 105. tthhaannkkss !!
  106. 106. Special Thanks toOperationOperationOperationOperationSupportSupportSupportSupportOA Support 情報システム室順不同 敬称略
  107. 107. 参考文献等HTML5- http://html5.jp/- http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291Zen-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

×