Enviar pesquisa
Carregar
全日本<label>要素マークアップ検定
•
89 gostaram
•
61,503 visualizações
Hiroshi Kawada
Seguir
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたw
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 66
Baixar agora
Baixar para ler offline
Recomendados
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
Takateru Yamagishi
第8回Language and Robotics研究会20221010_AkiraTaniguchi
第8回Language and Robotics研究会20221010_AkiraTaniguchi
Akira Taniguchi
磯野ー!関数型言語やろうぜー!
磯野ー!関数型言語やろうぜー!
Ra Zon
画像処理の高性能計算
画像処理の高性能計算
Norishige Fukushima
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
shigeki_ohtsu
SMO徹底入門 - SVMをちゃんと実装する
SMO徹底入門 - SVMをちゃんと実装する
sleepy_yoshi
PRML 6.1章 カーネル法と双対表現
PRML 6.1章 カーネル法と双対表現
hagino 3000
はじめてのパターン認識 第5章 k最近傍法(k_nn法)
はじめてのパターン認識 第5章 k最近傍法(k_nn法)
Motoya Wakiyama
Recomendados
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
CUDAのアセンブリ言語基礎のまとめ PTXとSASSの概説
Takateru Yamagishi
第8回Language and Robotics研究会20221010_AkiraTaniguchi
第8回Language and Robotics研究会20221010_AkiraTaniguchi
Akira Taniguchi
磯野ー!関数型言語やろうぜー!
磯野ー!関数型言語やろうぜー!
Ra Zon
画像処理の高性能計算
画像処理の高性能計算
Norishige Fukushima
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
そうだったのか! よくわかる process.nextTick() node.jsのイベントループを理解する
shigeki_ohtsu
SMO徹底入門 - SVMをちゃんと実装する
SMO徹底入門 - SVMをちゃんと実装する
sleepy_yoshi
PRML 6.1章 カーネル法と双対表現
PRML 6.1章 カーネル法と双対表現
hagino 3000
はじめてのパターン認識 第5章 k最近傍法(k_nn法)
はじめてのパターン認識 第5章 k最近傍法(k_nn法)
Motoya Wakiyama
AlphaGoのしくみ
AlphaGoのしくみ
Hiroyuki Yoshida
何となく勉強した気分になれるパーサ入門
何となく勉強した気分になれるパーサ入門
masayoshi takahashi
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
Mikiya Okuno
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Yuya Unno
Anaconda navigatorのアップデートが終わらないときの対処方法メモ
Anaconda navigatorのアップデートが終わらないときの対処方法メモ
ayohe
証明プログラミング超入門
証明プログラミング超入門
Kyoko Kadowaki
「はじめてでもわかる RandomForest 入門-集団学習による分類・予測 -」 -第7回データマイニング+WEB勉強会@東京
「はじめてでもわかる RandomForest 入門-集団学習による分類・予測 -」 -第7回データマイニング+WEB勉強会@東京
Koichi Hamada
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
純粋関数型アルゴリズム入門
純粋関数型アルゴリズム入門
Kimikazu Kato
CuPy解説
CuPy解説
Ryosuke Okuta
01 ROS2 実用化に関するサーベイ ROS2勉強合宿 @別府温泉
01 ROS2 実用化に関するサーベイ ROS2勉強合宿 @別府温泉
Mori Ken
TLS, HTTP/2演習
TLS, HTTP/2演習
shigeki_ohtsu
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開
Yahoo!デベロッパーネットワーク
私にとってのテスト
私にとってのテスト
Takuto Wada
マルチコアを用いた画像処理
マルチコアを用いた画像処理
Norishige Fukushima
【メタサーベイ】基盤モデル / Foundation Models
【メタサーベイ】基盤モデル / Foundation Models
cvpaper. challenge
SAT/SMTソルバの仕組み
SAT/SMTソルバの仕組み
Masahiro Sakai
動的計画法の基礎と応用 ~色々使える大局的最適化法
動的計画法の基礎と応用 ~色々使える大局的最適化法
Seiichi Uchida
Java EEを補完する仕様 MicroProfile
Java EEを補完する仕様 MicroProfile
Norito Agetsuma
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Yuya Takahashi
Mais conteúdo relacionado
Mais procurados
AlphaGoのしくみ
AlphaGoのしくみ
Hiroyuki Yoshida
何となく勉強した気分になれるパーサ入門
何となく勉強した気分になれるパーサ入門
masayoshi takahashi
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
Mikiya Okuno
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Yuya Unno
Anaconda navigatorのアップデートが終わらないときの対処方法メモ
Anaconda navigatorのアップデートが終わらないときの対処方法メモ
ayohe
証明プログラミング超入門
証明プログラミング超入門
Kyoko Kadowaki
「はじめてでもわかる RandomForest 入門-集団学習による分類・予測 -」 -第7回データマイニング+WEB勉強会@東京
「はじめてでもわかる RandomForest 入門-集団学習による分類・予測 -」 -第7回データマイニング+WEB勉強会@東京
Koichi Hamada
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
清水 正行
純粋関数型アルゴリズム入門
純粋関数型アルゴリズム入門
Kimikazu Kato
CuPy解説
CuPy解説
Ryosuke Okuta
01 ROS2 実用化に関するサーベイ ROS2勉強合宿 @別府温泉
01 ROS2 実用化に関するサーベイ ROS2勉強合宿 @別府温泉
Mori Ken
TLS, HTTP/2演習
TLS, HTTP/2演習
shigeki_ohtsu
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開
Yahoo!デベロッパーネットワーク
私にとってのテスト
私にとってのテスト
Takuto Wada
マルチコアを用いた画像処理
マルチコアを用いた画像処理
Norishige Fukushima
【メタサーベイ】基盤モデル / Foundation Models
【メタサーベイ】基盤モデル / Foundation Models
cvpaper. challenge
SAT/SMTソルバの仕組み
SAT/SMTソルバの仕組み
Masahiro Sakai
動的計画法の基礎と応用 ~色々使える大局的最適化法
動的計画法の基礎と応用 ~色々使える大局的最適化法
Seiichi Uchida
Java EEを補完する仕様 MicroProfile
Java EEを補完する仕様 MicroProfile
Norito Agetsuma
Mais procurados
(20)
AlphaGoのしくみ
AlphaGoのしくみ
何となく勉強した気分になれるパーサ入門
何となく勉強した気分になれるパーサ入門
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
なぜ、いま リレーショナルモデルなのか(理論から学ぶデータベース実践入門読書会スペシャル)
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Jubatusのリアルタイム分散レコメンデーション@TokyoNLP#9
Anaconda navigatorのアップデートが終わらないときの対処方法メモ
Anaconda navigatorのアップデートが終わらないときの対処方法メモ
証明プログラミング超入門
証明プログラミング超入門
「はじめてでもわかる RandomForest 入門-集団学習による分類・予測 -」 -第7回データマイニング+WEB勉強会@東京
「はじめてでもわかる RandomForest 入門-集団学習による分類・予測 -」 -第7回データマイニング+WEB勉強会@東京
細かすぎて伝わらないD3 ver.4の話
細かすぎて伝わらないD3 ver.4の話
純粋関数型アルゴリズム入門
純粋関数型アルゴリズム入門
CuPy解説
CuPy解説
01 ROS2 実用化に関するサーベイ ROS2勉強合宿 @別府温泉
01 ROS2 実用化に関するサーベイ ROS2勉強合宿 @別府温泉
TLS, HTTP/2演習
TLS, HTTP/2演習
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
ヤフー社内でやってるMySQLチューニングセミナー大公開
ヤフー社内でやってるMySQLチューニングセミナー大公開
私にとってのテスト
私にとってのテスト
マルチコアを用いた画像処理
マルチコアを用いた画像処理
【メタサーベイ】基盤モデル / Foundation Models
【メタサーベイ】基盤モデル / Foundation Models
SAT/SMTソルバの仕組み
SAT/SMTソルバの仕組み
動的計画法の基礎と応用 ~色々使える大局的最適化法
動的計画法の基礎と応用 ~色々使える大局的最適化法
Java EEを補完する仕様 MicroProfile
Java EEを補完する仕様 MicroProfile
Destaque
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Yuya Takahashi
Cmujp21_node-webkit
Cmujp21_node-webkit
Sugawara Ryousuke
kintoneの検索高速化への取り組み
kintoneの検索高速化への取り組み
Ryo Mitoma
とある色の決め方
とある色の決め方
Yumi uniq Ishizaki
Kubernetes in 30 minutes (2017/03/10)
Kubernetes in 30 minutes (2017/03/10)
lestrrat
Grids are Good (right?)
Grids are Good (right?)
huer1278ft
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
Destaque
(10)
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Cmujp21_node-webkit
Cmujp21_node-webkit
kintoneの検索高速化への取り組み
kintoneの検索高速化への取り組み
とある色の決め方
とある色の決め方
Kubernetes in 30 minutes (2017/03/10)
Kubernetes in 30 minutes (2017/03/10)
Grids are Good (right?)
Grids are Good (right?)
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Semelhante a 全日本<label>要素マークアップ検定
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
ThinReports
少しずつ手厚くして不具合や仕様漏れを防ぐために
少しずつ手厚くして不具合や仕様漏れを防ぐために
Fumiya Sakai
IDEALIZE YOU
IDEALIZE YOU
佑介 九岡
HTML5: New capabilities, new markup
HTML5: New capabilities, new markup
ourmaninjapan
Agile 459 | 11/17 資料
Agile 459 | 11/17 資料
智治 長沢
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
Masahito Zembutsu
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Rakuten Group, Inc.
楽天トラベルとSpring(Spring Day 2016)
楽天トラベルとSpring(Spring Day 2016)
Rakuten Group, Inc.
Titanium実装最初の一歩.
Titanium実装最初の一歩.
Yasuhiro Matsubayashi
SIG-Audio準備会#2 オーディオツールの作り方 超入門編
SIG-Audio準備会#2 オーディオツールの作り方 超入門編
Takafumi Inamori
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
Yahoo!デベロッパーネットワーク
Example using LattePanda
Example using LattePanda
Hirokazu Egashira
HTML5 in Firefox4
HTML5 in Firefox4
dynamis
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Atsushi Kambara
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
Staffnet_Inc
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03
Daiki Maekawa
Sendai.html5#2
Sendai.html5#2
Reoto Wakabayashi
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
Semelhante a 全日本<label>要素マークアップ検定
(20)
マークアップ講座 01b HTML
マークアップ講座 01b HTML
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
少しずつ手厚くして不具合や仕様漏れを防ぐために
少しずつ手厚くして不具合や仕様漏れを防ぐために
IDEALIZE YOU
IDEALIZE YOU
HTML5: New capabilities, new markup
HTML5: New capabilities, new markup
Agile 459 | 11/17 資料
Agile 459 | 11/17 資料
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
楽天トラベルとSpring(Spring Day 2016)
楽天トラベルとSpring(Spring Day 2016)
Titanium実装最初の一歩.
Titanium実装最初の一歩.
SIG-Audio準備会#2 オーディオツールの作り方 超入門編
SIG-Audio準備会#2 オーディオツールの作り方 超入門編
Thing.jsについて
Thing.jsについて
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
Example using LattePanda
Example using LattePanda
HTML5 in Firefox4
HTML5 in Firefox4
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD Pattern
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03
Sendai.html5#2
Sendai.html5#2
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
Mais de Hiroshi Kawada
ブラウザのPerformance APIの話
ブラウザのPerformance APIの話
Hiroshi Kawada
SIMD.js(ECMAScript 7)
SIMD.js(ECMAScript 7)
Hiroshi Kawada
いまさらだけど、マイクロソフトのウワサのブラウザ「Edge」についてまとめてみた
いまさらだけど、マイクロソフトのウワサのブラウザ「Edge」についてまとめてみた
Hiroshi Kawada
完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)
Hiroshi Kawada
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
Hiroshi Kawada
Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告
Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告
Hiroshi Kawada
Mais de Hiroshi Kawada
(6)
ブラウザのPerformance APIの話
ブラウザのPerformance APIの話
SIMD.js(ECMAScript 7)
SIMD.js(ECMAScript 7)
いまさらだけど、マイクロソフトのウワサのブラウザ「Edge」についてまとめてみた
いまさらだけど、マイクロソフトのウワサのブラウザ「Edge」についてまとめてみた
完全負け組なモバイルWebが、これから復活する(多分)
完全負け組なモバイルWebが、これから復活する(多分)
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告
Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告
全日本<label>要素マークアップ検定
1.
全日本<LABEL>要素 マークアップ検定 2013年8月9日 LLM-UI/UX ライトニングトーク 問題に答えるだけで、 あなたも一流のラベリストになれる!
2.
川田 寛 Kawada
Hiroshi Web技術者コミュニティ html5jえんぷら部 部長 仕事:業務システム案件の技 術支援とか 入出力(UI)・グラフィクス系 Web技術がお気に入りです twitter.com/kawada_hiroshi1 facebook.com/kawada.hiroshi.758 発表者プロフィール
3.
みなさんは当然 <label>を活用してますよね?
4.
Google 勿論、使っている!
5.
facebook 勿論、使っている!
6.
twitter 勿論、使っている!
7.
yahoo! 勿論、使っている!
8.
DMM 勿論、使っている!
9.
mixi 勿論、使っている!
10.
うわっ…<label>要素の利用率 高すぎ…? なんてこと思った方
11.
今更、わからないなんて とてもじゃないけと言えません! ・・・ということで
12.
<label>に不安を感じる 日本全国のラベリストたちへ送る! 始めました! 主催:日本ラベル要素ユーザグループ(JLEUG) 全日本<label>要素 マークアップ検定
13.
第1問 ラベルの最適な配置場所 - 初級 人間工学デザイン編
-
14.
ユーザが最もストレスを感じない ラベルの配置場所はどこか? (A). Left-Aligned Labels(左寄せ) 名前 ふりがな
15.
(B). Right-Aligned Labels(右寄せ) 名前 ふりがな ユーザが最もストレスを感じない ラベルの配置場所はどこか?
16.
(C). Top-Aligned Labels(上寄せ) 名前 ふりがな ユーザが最もストレスを感じない ラベルの配置場所はどこか?
17.
正解は・・・ (B) or (C)
18.
ラベルを左に寄せると・・・ 左右に移動し過ぎて、網膜が殺られる ラベルで造る、”視覚の導線”の工学 !?
19.
Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned
Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ
20.
人間工学的観点では、視点の動きが重要 - Path To
Completion - 視点の導線は一本に。 http://www.slideshare.net/lorielue/form-design-best-practices-to-improve-conversions Single Path : Fast Path : 視点の導線は最小に。 ✕ ⃝XXX XXXXXX X XX XXX XXXXXX X XX XXX XXXXXX X XX
21.
第2問 ラベルの最適なビジュアルデザイン - 初級 人間工学デザイン編
-
22.
ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ? (A). Plain Text
Labels (そのまま) name furigana
23.
(B). Bold Labels
(太字) ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ? name furigana
24.
(C). Italic Labels
(斜体) ユーザが最もストレスを感じない ラベルのフォントスタイルはどれ? name furigana
25.
正解は・・・ (A)
26.
愛され系ラベルはスリム! 太字は愛されない系。 太いとあまりに読みにくいため ユーザがストレスで痩せてしまう name furigana !?
27.
Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php Plain Text
Labels (そのまま) Bold Labels (太字)✕ ⃝
28.
“斜体”の日本語と英語圏の文化的差異の問題 1. “意味付け”の違い 英語圏では”引用”の意味合いを強く含む 2. “相互運用性”の問題 WinNT6.0(Vista)以降は日本語メイリオが斜体に非対応 font-weight
: bold; font-style : italic;
29.
ラベルの周りに枠等を入れるのも ユーザストレスが高い 名前 ふりがな 年齢 名前 : ふりがな : 年齢
: 名前 ふりがな 年齢
30.
第3問 Label要素のHTML記述仕様 - 初級 Web標準仕様編
-
31.
<label>要素とは HTMLドキュメント上で 入力フォームの名前を定義する記法ですが… <label>場所</label> <label>ビデオ通話</label> <label>カレンダー</label> <label>説明</label> HTMLドキュメント上の記述 Webページ上での表示
32.
<label>要素の 正しいマークアップはどれ? (A). <label> ラベル名 <input type=”text” name=”name”
/> </label>
33.
<label for=”hoge”>ラベル名</label> <input type=”text”
id=”hoge” name=”fuga” /> (B). <label>要素の 正しいマークアップはどれ?
34.
<label id=”hoge”>ラベル名</label> <input type=”text”
id=”hoge” name=”fuga” /> (C). <label>要素の 正しいマークアップはどれ?
35.
<label name=”fuga”>ラベル名</label> <input type=”text”
id=”hoge” name=”fuga” /> (D). <label>要素の 正しいマークアップはどれ?
36.
正解は・・・ (A), (B)
37.
HTML5 - A
vocabulary and associated APIs for HTML and XHTML では・・・ http://www.w3.org/TR/html5/forms.html#the-label-element
38.
Label要素が他の要素と紐づく時、Labelは”form-owner”と呼ぶこと がある。form-associated要素のサブクラスに相当するから。 Label要素と紐付けできる要素を、”Labelable要素”と呼ぶ。 Label要素と紐付けされたLabelable要素を、Label要素側から は、”Labeled Control”と呼ばれる。 Label要素の構造・用語を以下と定義する <<interface>> Labelable要素Label要素 0..n 0..1 -
Labeled Control (- form-owner ) 【クラス図】Label要素の構造 input要素 button要素 などなど 実質的に同じ form-associated要素 <<implements>>
39.
<label for=”name”>名前 </label> <input
type=”text” id=”name” … /> forが有る場合は、forで指定されたIDと一致する 最初のノードをLabeled Controlとして扱い、Label 要素で囲まれたノードは全てform-ownerとなる <label for=”name”><img src=”./img/name.png”></label> <input type=”text” id=”name” … />
40.
<label> ラベル名 <input type=”text” …
/> </label> <label> <input type=”checkbox” … /> <img src=”img/alert.png” /> 保存しない </label> forが無い場合は、label要素内のツリーオーダで 最初のLabelable ElementsがLabeled Controlとし て扱われ、それ以外はform-ownerとなる テキストノードを form-ownerとして扱う img要素とテキストノー ドをform-ownerとする
41.
別の名前空間(form要素)を参照するには form属性を利用する <label form=”form2” for=”input1” >名前</label> <form id=”form2”…> <input
id=”input1” … /> <input id=”input2” … /> <input id=”input3” … /> </form> <form id=”form1”…> <input id=”input1” … /> <input id=”input2” … /> <input id=”input3” … /> </form>
42.
Label要素は、以下のカテゴリに属す <<interface>> Label要素 Flow Content Phrasing Content Intractive
Content Reasociatable form-associated Content Palpable Content <<implements>> body要素以下に配置されるコンテンツ フレーズ(あまり長くない文字列)を囲むコンテンツ クリックなどのイベントにより処理が走るコンテンツ フォームと関連付けられたコンテンツ 最低一つのノードを持たなくてはいけないコンテンツ
43.
第4問 Label要素のJavaScriptAPI仕様 - 初級 Web標準仕様編
-
44.
Labelable要素からform-onwerな Label要素の一覧を取得するAPIは? var labelNodes; //
NodeList labelNodes = element.[ ? ] ;
45.
正解は・・・ labels
46.
Label要素とLabelable要素の2箇所で Label要素固有のDOM-APIが使える interface HTMLLabelElement :
HTMLElement { readonly attribute HTMLFormElement? form; attribute DOMString htmlFor; readonly attribute HTMLElement? control; }; interface HTMLInputElement : HTMLElement { readonly attribute NodeList labels; // NodeList<HTMLLabelElement> };
47.
readonly attribute HTMLFormElement?
form; attribute DOMString htmlFor; readonly attribute HTMLElement? control; ! Labeled Controlの存在するフォームのDOM要素 ! for属性の値(文字列) ! Labeled ControlのDOM要素 HTMLLabelElement (Label要素) HTMLInputElement (Labelable要素) readonly attribute NodeList labels; ! Form-OwnerのDOM要素のリスト
48.
第5問 IEのバージョン対応 - 初級 Webプラットフォーム実装編
-
49.
次のHTMLドキュメントが 動作するIEのバージョンは? <label for=”name” >ラベル名</label> <input
type=”text” id=”name” name=”name” />
50.
正解は・・・ IE4+
51.
古くからある要素だが 一部、追加されたのは最近 <label for=”name” form=”form” >label</label> → HTML4にあった → HTML5から追加 ※2013年8月現在「勧告候補」
52.
for属性無しはIE7以上でないと 動作しない <label for=”name” >ラベル</label> <input
type=”text” id=”name” name=”name” /> <label>ラベル <input type=”text” name=”name” /></label> 4+ 7+ しかし、利用率が高い使い方
53.
第6問 Labelable要素の振る舞い - 初級 Webプラットフォーム実装編
-
54.
input要素(type=checkbox)に対して Label要素を指定した場合の動作は?
55.
正解は・・・ 不明 ※ただし、デファクトスタンダードがあり
56.
Label要素クリック時の動作は Web標準では未定義 ”Interactive context”に属し clickイベント応答できる要素として分類される http://www.w3.org/TR/html5/dom.html#interactive-content-0 HTML5による定義で 現在は”勧告候補”
57.
Label要素クリック時の挙動は Labeled Controlの種類よって異なる Label要素クリック時の発火イベントも Labeled Controlの種類よって異なる 環境依存
58.
input要素(type=”text”) input要素(type=”tel”) : 公式非対応 テキストボックス・ベース input要素(type=”url”)
: 公式非対応 input要素(type=”email”) : 公式非対応 input要素(type=”password”) 挙動 フォーカスが当たる onclick → onfocusイベント onfocus → onclick
59.
ボタン・ベース button要素 input要素(type=”reset”) input要素(type=”submit”) input要素(type=”file”) 挙動 クリックの動作(※要注意) input要素(type=”image”) onclick → onfocusイベント onfocus
→ onclick
60.
セレクトボックス・ベース input要素(type=”date”) input要素(type=”week”) input要素(type=”number”) input要素(type=”month”) input要素(type=”time”) input要素(type=”datetime-local”) keygen要素 select要素 input要素(type=”datetime”) 挙動 フォーカスが当たる onclick → onfocusイベント onfocus
→ onclick
61.
ブーリアン・ベース input要素(type=”checkbox”) input要素(type=”radio”) 挙動 クリックの動作 onclick → onfocus イベント onfocus
→ onclick onclick
62.
input要素(type=”color”) onclickイベント 挙動 クリック時の動作 onclickイベント 挙動 何も起きない 特殊系 meter要素 progress要素10+
63.
input要素(type=”range”) onclickイベント 挙動 フォーカスが当たってはいるが何もできない 特殊系 フォーカスが当たり、操作が可能 onclick →
onfocus 10+
64.
何問正解できましたか?
65.
全問正解のあなたは、ななな、なんと! “初級ラベリスト”と名乗る権利が与えられます <label>要素の普及に貢献して下さいね!
66.
Thank You !! @kawada_hiroshi1 …お騒がせしましたm(_
_)m
Baixar agora