Download to read offline
Recommended
![HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fhtml5etc005s2-130606051334-phpapp02-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
Similar to HTML5など社内勉強会 Vol.2 - HTML5, CSS3
More from George Harada
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
- 1.HTML5など勉強会 Vol. 22011/10/17@ 某社System Management HeadquatersGeorge Harada
- 2.
- 3.
- 4.
- 5.
- 6.body {background-color: white;color:black;}CSSの書き方どこで（セレクタ） { なにを（プロパティ）: どうする（値）; }
- 7.AHTMLの「id属性」に関する説明で正しいものはどれ？Q226B 28C 28D15id属性の目的は、要素を識別するための、固有の識別子を指定することである1つの文書内で、id属性の値が重複してはならない（一意でなければならない）CSSで、id属性を使って要素を指定する場合、id属性の値の前に #（ハッシュ）をつけて用いるid属性の値は、半角アルファベットの大文字・小文字が区別される
- 8.AHTMLの「class属性」に関する説明で正しいものはどれ？Q327B 33C 28D16class属性の主な目的は、要素にスタイルを適用させるための、クラス名を指定することである1つの文書内で、同じclass属性の値を何度でも用いることができるCSSで、class属性を使って要素を指定する場合、class属性の値の前に .（ピリオド）をつけて用いるclass属性の値は、半角アルファベットの大文字・小文字が区別されるE 21class属性の値は、複数のクラス名を半角スペースで区切って列記することができる
- 9.AHTML5 で強化された「セマンティクス」の説明として、正しいものはどれ？Q42B 0C11D 21ある製品を使ったときに得られる経験や満足検索エンジン最適化構文データの意味
- 10.
- 11.AHTML5の「DOCTYPE宣言」として、正しいものはどれ？Q53B 31C 0D0<!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.
- 13.
- 14.
- 15.Agenda1. HTML51-1. コンテンツ・モデル1-2.セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
- 16.
- 17.もっとセマンティックな文書をもっとリッチなWebアプリをもっと標準化された技術でもっと扱いやすく（互換性, 有用性, 相互運用性,ユニバーサル・アクセス）これらを実現するための仕様=
- 18.
- 19.Agenda1. HTML51-1. コンテンツ・モデル1-2.セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
- 20.
- 21.
- 22.以降のコンテンツの表示や動作をセットする・自身と他のドキュメントとの関連性をセットする・他の "帯域外" の情報を伝達する・基本的に、ブラウザ上には直接表示されないメタデータ・コンテンツbasecommand link meta noscript script style title
- 23.ドキュメント内に現れるコンテンツ全般フロー・コンテンツa abbr addressarea (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.
- 25.セクションの見出しを表す・「アウトライン・アルゴリズム」と密接に関係するヘッディング・コンテンツh1 h2 h3h4 h5 h6 hgroup
- 26.ドキュメントのテキスト・段落中にあるテキストの範囲を指し示す要素・HTML4におけるインライン要素に近い概念フレージング・コンテンツa (フレージング・コンテンツのみが入れられている場合) abbrarea (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.外部のリソースをインポートする・画像, プラグイン, フレーム,ビデオ, Canvas などHTML以外の言語で表すもの・SVG, MathMLエンベッディッド・コンテンツaudio canvas embed iframe img math object svg video
- 28.ユーザが操作をすることができる・ハイパーリンク, クリックすることで・状態が変化するもの などaaudio (controls属性が存在している場合) button details embed iframeimg (usemap属性が存在している場合) input (type属性がhidden状態でない場合) keygen labelmenu (type属性がtoolbar状態の場合) object (usemap属性が存在している場合) selecttextarea video (controls属性が存在している場合)インタラクティブ・コンテンツ
- 29.
- 30.Agenda1. HTML51-1. コンテンツ・モデル1-2.セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
- 31.
- 32.
- 33.
- 34.セクションの見出しを表す・「アウトライン・アルゴリズム」と密接に関係するヘッディング・コンテンツh1 h2 h3h4 h5 h6 hgroup
- 35.セクショニング・コンテンツセクションを構成する要素（抜粋）article aside navsectionヘッディング・コンテンツh1 h2 h3 h4 h5 h6 hgroupフロー・コンテンツheader footer div
- 36.それ自身が独立したコンテンツを表す■この要素が適しているかの判断基準・フィードとして配信する際、そのコンテンツが・1つのエントリーとしてふさわしいか？ex. ブログの投稿, ニュースサイトの記事,ブログ記事へのコメント, 掲示板の投稿article要素
- 37.
- 38.主要なナビゲーションを形成する範囲を表す■この要素が適しているかの判断基準・それは、本当に主要なナビゲーションか？ex. サイト全体のナビ, あるカテゴリー内のナビ,パンくずリスト誤った使い方: サイト内検索の入力欄, サイトマップの本文nav要素
- 39.
- 40.
- 41.
- 42.
- 43.セクションのヘッダー, フッターを表す■特徴・1ページの中で、何回使ってもよいex. ページ全体のヘッダー,ある記事のヘッダー, etc.header, footer要素
- 44.
- 45.実際にやってみる-- 社内URL --GoogleChrome / Safari で上記のURLにアクセスして、会社のメールアドレスを入力※Google Chromeの方が、キャッシュが残りにくいのでオススメ
- 46.
- 48.
- 49.Agenda1. HTML51-1. コンテンツ・モデル1-2.セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
- 50.
- 51.コンテンツの階層構造のこと・書籍の目次をイメージすると分かり易い→ 本の「タイトル」がトップ階層→ 「タイトル」の下に「章」がある→「章」の下に「節」がある基本的には、Webページも同じはずアウトライン
- 52.これもアウトラインですね1. HTML51-1. コンテンツ・モデル1-2.セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
- 53.
- 54.
- 55.
- 56.実際に確かめてみるHTML 5 Outlinergoo.gl/dZ5haarticleaside nav sectionh1∼h6
- 57.
- 58.
- 59.
- 60.
- 61.ブラウザやクローラーに、文書構造を正確に理解させることができる→ 検索大手3社が共同で開発中 （schema.org）→ユニバーサル・アクセス化→ その他にも、イロイロ出てくるはずA.2
- 62.Agenda1. HTML51-1. コンテンツ・モデル1-2.セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
- 63.
- 64.div {color: red;}div{color: blue;}基本的な優先順位こちらが優先
- 65.
- 66.<div id=”id” class=”class”>ここで問題</div>#id{color: red;}#id.class {color: green;}個別性による優先順位div {color: blue;}.class {color: yellow;}A BC D有効になるのは、どのセレクタでしょうか？
- 67.
- 68.最終兵器/* すべてのdiv要素の文字色を赤に */div{color: red !important;}!important 宣言
- 69.Agenda1. HTML51-1. コンテンツ・モデル1-2.セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
- 70.height: 縦サイズwidth: 横サイズmargin:外余白padding: 内余白border: 罫線（marginとpaddingを隔てる線）background-color: 背景色領域サイズ, 余白, 罫線, 背景色
- 71.インラインレベルの表示を制御text-align: right;text-align: center;text-align:left;文字等の左右寄せ, センタリング
- 72.
- 73./* 標準配置 */position:static;/* 相対位置 */position: relative;/* 絶対位置 */position: absolute;/* 絶対位置でスクロールしても固定 */position: fixed;ボックスの配置方法（基準位置を指定）top:bottom:left:right:同時使用
- 74.position: relative;相対位置を指定して配置するposition: relative;top:50px;left: 70px;ex. 本来表示されるはずだった位置（static）から、ex. 下に 50px, 右に 70px 移動した場所に配置
- 75.position: absolute;絶対位置を指定して配置するposition: absolute;top:50px;left: 70px;! 親ボックスが position: static; の時・画面全体の左上が top: 0, left: 0 の基準! それ以外が指定されている時・親ボックスの左上が top: 0, left: 0 の基準
- 76.position: fixed;絶対位置でスクロールしても固定position: fixed;bottom:0px;left: 0px;ex. 画面の最下部に配置※ iOS 5 未満の端末では、fixed が機能しない# 同等の表示がしたい時は、JavaScript で制御する
- 77.position: static; 以外が指定されたボックスの重なり順を指定position:relative;z-index: 10;ボックスの重なり順を指定数字が大きいほど上に配置
- 78.
- 79.Agenda1. HTML51-1. コンテンツ・モデル1-2.セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
- 80.
- 81.<table><tr><td rowspan="2">Book Photo</td><td>BookTitle</td></tr><tr><td>Book Contents</td></tr></table>table要素を使ったレイアウト
- 82.<div style="overflow: hidden;"><imgsrc="/html5.jpg" style="float: left;"><p>Book Title</p><p>Book Contents</p></div>floatプロパティを使ったレイアウト
- 83.
- 84.
- 85.
- 86.<div id="container_a"><div id="box_1">BookPhoto</div><div id="container_b"><div id="box_2">Book Title</div><div id="box_3">Book Contents</div></div></div>フレキシブル・ボックスを使ったレイアウト
- 87.#container_a {display: -webkit-box;}#container_b{display: -webkit-box;-webkit-box-orient: vertical; /* 縦並びにする */}フレキシブル・ボックスを使ったレイアウト
- 88.#box_1 {background-color: lightpink;}#box_2{background-color: lightblue;}#box_3 {background-color: lightgreen;}フレキシブル・ボックスを使ったレイアウト
- 89.#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番に */}フレキシブル・ボックスを使ったレイアウト
- 90.#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番に */}フレキシブル・ボックスを使ったレイアウト
- 91.#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 をこのボックスに割り当て */}フレキシブル・ボックスを使ったレイアウト
- 92.
- 93.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: ボックスを寄せる位置を指定フレキシブル・ボックス
- 94.こんなグラフも簡単に作れるよ！<div id="container"><div id="box1">50</div><divid="box2">100</div><div id="box3">20</div><div id="box4">200</div><div id="box5">140</div></div>フレキシブル・ボックス
- 95.
- 96.Agenda1. HTML51-1. コンテンツ・モデル1-2.セクションを構成する要素1-3. アウトライン2. CSS2-1. セレクタの優先順位2-2. 厳選プロパティ【レイアウト編】2-3. さようなら、table要素 / floatプロパティ3. ライトニングトーク
- 98.10talks in a60minute slot60min.５min.５min.５min.５min.５min.５min.５min.５min.５min.５min.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.Special Thanks toOperationOperationOperationOperationSupportSupportSupportSupportOASupport 情報システム室順不同 敬称略
- 109.参考文献等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