Submit Search
Upload
全日本<label>要素マークアップ検定
•
89 likes
•
61,499 views
Hiroshi Kawada
Follow
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたw
Read less
Read more
Technology
Report
Share
Report
Share
1 of 66
Download now
Download to read offline
Recommended
競技プログラミングにおけるコードの書き方とその利便性
競技プログラミングにおけるコードの書き方とその利便性
Hibiki Yamashiro
TRICK 2022 Results
TRICK 2022 Results
mametter
メタプログラミングって何だろう
メタプログラミングって何だろう
Kota Mizushima
マーブル図で怖くないRxJS
マーブル図で怖くないRxJS
bitbank, Inc. Tokyo, Japan
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
Ken'ichi Matsui
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみた
MITSUNARI Shigeo
Union find(素集合データ構造)
Union find(素集合データ構造)
AtCoder Inc.
様々な全域木問題
様々な全域木問題
tmaehara
Recommended
競技プログラミングにおけるコードの書き方とその利便性
競技プログラミングにおけるコードの書き方とその利便性
Hibiki Yamashiro
TRICK 2022 Results
TRICK 2022 Results
mametter
メタプログラミングって何だろう
メタプログラミングって何だろう
Kota Mizushima
マーブル図で怖くないRxJS
マーブル図で怖くないRxJS
bitbank, Inc. Tokyo, Japan
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
Ken'ichi Matsui
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみた
MITSUNARI Shigeo
Union find(素集合データ構造)
Union find(素集合データ構造)
AtCoder Inc.
様々な全域木問題
様々な全域木問題
tmaehara
競プロは社会の役に立たない+ベンチャー企業の話 (NPCA夏合宿OB講演).pdf
競プロは社会の役に立たない+ベンチャー企業の話 (NPCA夏合宿OB講演).pdf
catupper
Re永続データ構造が分からない人のためのスライド
Re永続データ構造が分からない人のためのスライド
Masaki Hara
線形計画法入門
線形計画法入門
Shunji Umetani
純粋関数型アルゴリズム入門
純粋関数型アルゴリズム入門
Kimikazu Kato
RSA暗号運用でやってはいけない n のこと #ssmjp
RSA暗号運用でやってはいけない n のこと #ssmjp
sonickun
π計算
π計算
Yuuki Takano
ラムダ計算入門
ラムダ計算入門
Eita Sugimoto
Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
kyon mm
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
Yoshitaka Kawashima
指数時間アルゴリズム入門
指数時間アルゴリズム入門
Yoichi Iwata
初心者向けCTFのWeb分野の強化法
初心者向けCTFのWeb分野の強化法
kazkiti
Rolling Hashを殺す話
Rolling Hashを殺す話
Nagisa Eto
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
泰 増田
企業システムにアジャイルは必要か
企業システムにアジャイルは必要か
Hiromasa Oka
AtCoder Beginner Contest 023 解説
AtCoder Beginner Contest 023 解説
AtCoder Inc.
楽しい研究のために今からできること 〜新しく研究を始める皆さんへ〜
楽しい研究のために今からできること 〜新しく研究を始める皆さんへ〜
諒介 荒木
直前合宿 講義スライド
直前合宿 講義スライド
tozan gezan
Oss貢献超入門
Oss貢献超入門
Michihito Shigemura
Rcppのすすめ
Rcppのすすめ
Masaki Tsuda
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Yuya Takahashi
More Related Content
What's hot
競プロは社会の役に立たない+ベンチャー企業の話 (NPCA夏合宿OB講演).pdf
競プロは社会の役に立たない+ベンチャー企業の話 (NPCA夏合宿OB講演).pdf
catupper
Re永続データ構造が分からない人のためのスライド
Re永続データ構造が分からない人のためのスライド
Masaki Hara
線形計画法入門
線形計画法入門
Shunji Umetani
純粋関数型アルゴリズム入門
純粋関数型アルゴリズム入門
Kimikazu Kato
RSA暗号運用でやってはいけない n のこと #ssmjp
RSA暗号運用でやってはいけない n のこと #ssmjp
sonickun
π計算
π計算
Yuuki Takano
ラムダ計算入門
ラムダ計算入門
Eita Sugimoto
Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
kyon mm
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
Yoshitaka Kawashima
指数時間アルゴリズム入門
指数時間アルゴリズム入門
Yoichi Iwata
初心者向けCTFのWeb分野の強化法
初心者向けCTFのWeb分野の強化法
kazkiti
Rolling Hashを殺す話
Rolling Hashを殺す話
Nagisa Eto
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
泰 増田
企業システムにアジャイルは必要か
企業システムにアジャイルは必要か
Hiromasa Oka
AtCoder Beginner Contest 023 解説
AtCoder Beginner Contest 023 解説
AtCoder Inc.
楽しい研究のために今からできること 〜新しく研究を始める皆さんへ〜
楽しい研究のために今からできること 〜新しく研究を始める皆さんへ〜
諒介 荒木
直前合宿 講義スライド
直前合宿 講義スライド
tozan gezan
Oss貢献超入門
Oss貢献超入門
Michihito Shigemura
Rcppのすすめ
Rcppのすすめ
Masaki Tsuda
What's hot
(20)
競プロは社会の役に立たない+ベンチャー企業の話 (NPCA夏合宿OB講演).pdf
競プロは社会の役に立たない+ベンチャー企業の話 (NPCA夏合宿OB講演).pdf
Re永続データ構造が分からない人のためのスライド
Re永続データ構造が分からない人のためのスライド
線形計画法入門
線形計画法入門
純粋関数型アルゴリズム入門
純粋関数型アルゴリズム入門
RSA暗号運用でやってはいけない n のこと #ssmjp
RSA暗号運用でやってはいけない n のこと #ssmjp
π計算
π計算
ラムダ計算入門
ラムダ計算入門
Pythonによる黒魔術入門
Pythonによる黒魔術入門
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
指数時間アルゴリズム入門
指数時間アルゴリズム入門
初心者向けCTFのWeb分野の強化法
初心者向けCTFのWeb分野の強化法
Rolling Hashを殺す話
Rolling Hashを殺す話
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
企業システムにアジャイルは必要か
企業システムにアジャイルは必要か
AtCoder Beginner Contest 023 解説
AtCoder Beginner Contest 023 解説
楽しい研究のために今からできること 〜新しく研究を始める皆さんへ〜
楽しい研究のために今からできること 〜新しく研究を始める皆さんへ〜
直前合宿 講義スライド
直前合宿 講義スライド
Oss貢献超入門
Oss貢献超入門
Rcppのすすめ
Rcppのすすめ
Viewers also liked
サルでもできる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
Viewers also liked
(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デザインのセオリーを学ぼう
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Similar to 全日本<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
Similar to 全日本<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
More from 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
More from 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特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告
Recently uploaded
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Recently uploaded
(8)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
全日本<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
Download now