Soumettre la recherche
Mettre en ligne
全日本<label>要素マークアップ検定
•
89 j'aime
•
61,529 vues
Hiroshi Kawada
Suivre
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたw
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 66
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
流行りの分散表現を用いた文書分類について Netadashi Meetup 7
流行りの分散表現を用いた文書分類について Netadashi Meetup 7
Teruyuki Sakaue
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
三次元表現まとめ(深層学習を中心に)
三次元表現まとめ(深層学習を中心に)
Tomohiro Motoda
Attentionの基礎からTransformerの入門まで
Attentionの基礎からTransformerの入門まで
AGIRobots
リクルート式 自然言語処理技術の適応事例紹介
リクルート式 自然言語処理技術の適応事例紹介
Recruit Technologies
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
機械学習モデルのハイパパラメータ最適化
機械学習モデルのハイパパラメータ最適化
gree_tech
Recommandé
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
流行りの分散表現を用いた文書分類について Netadashi Meetup 7
流行りの分散表現を用いた文書分類について Netadashi Meetup 7
Teruyuki Sakaue
Python 3.9からの新定番zoneinfoを使いこなそう
Python 3.9からの新定番zoneinfoを使いこなそう
Ryuji Tsutsui
三次元表現まとめ(深層学習を中心に)
三次元表現まとめ(深層学習を中心に)
Tomohiro Motoda
Attentionの基礎からTransformerの入門まで
Attentionの基礎からTransformerの入門まで
AGIRobots
リクルート式 自然言語処理技術の適応事例紹介
リクルート式 自然言語処理技術の適応事例紹介
Recruit Technologies
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
機械学習モデルのハイパパラメータ最適化
機械学習モデルのハイパパラメータ最適化
gree_tech
全力解説!Transformer
全力解説!Transformer
Arithmer Inc.
BERT分類ワークショップ.pptx
BERT分類ワークショップ.pptx
Kouta Nakayama
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
Yoshiki Hayama
基礎線形代数講座
基礎線形代数講座
SEGADevTech
最近のKaggleに学ぶテーブルデータの特徴量エンジニアリング
最近のKaggleに学ぶテーブルデータの特徴量エンジニアリング
mlm_kansai
マッチングサービスにおけるKPIの話
マッチングサービスにおけるKPIの話
cyberagent
なぜコンピュータを学ばなければならないのか 21世紀の君主論
なぜコンピュータを学ばなければならないのか 21世紀の君主論
Tokoroten Nakayama
時系列予測にTransformerを使うのは有効か?
時系列予測にTransformerを使うのは有効か?
Fumihiko Takahashi
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Kenji Hiranabe
Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
ベイジアンネットとレコメンデーション -第5回データマイニング+WEB勉強会@東京
ベイジアンネットとレコメンデーション -第5回データマイニング+WEB勉強会@東京
Koichi Hamada
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
Masahito Zembutsu
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
研究分野をサーベイする
研究分野をサーベイする
Takayuki Itoh
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
ブラックボックス最適化とその応用
ブラックボックス最適化とその応用
gree_tech
東北大学 先端技術の基礎と実践_深層学習による画像認識とデータの話_菊池悠太
東北大学 先端技術の基礎と実践_深層学習による画像認識とデータの話_菊池悠太
Preferred Networks
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
Ken'ichi Matsui
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
これくらいはやってほしいWebデザイン
これくらいはやってほしいWebデザイン
Yuya Takahashi
Contenu connexe
Tendances
全力解説!Transformer
全力解説!Transformer
Arithmer Inc.
BERT分類ワークショップ.pptx
BERT分類ワークショップ.pptx
Kouta Nakayama
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
Yoshiki Hayama
基礎線形代数講座
基礎線形代数講座
SEGADevTech
最近のKaggleに学ぶテーブルデータの特徴量エンジニアリング
最近のKaggleに学ぶテーブルデータの特徴量エンジニアリング
mlm_kansai
マッチングサービスにおけるKPIの話
マッチングサービスにおけるKPIの話
cyberagent
なぜコンピュータを学ばなければならないのか 21世紀の君主論
なぜコンピュータを学ばなければならないのか 21世紀の君主論
Tokoroten Nakayama
時系列予測にTransformerを使うのは有効か?
時系列予測にTransformerを使うのは有効か?
Fumihiko Takahashi
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Kenji Hiranabe
Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
ベイジアンネットとレコメンデーション -第5回データマイニング+WEB勉強会@東京
ベイジアンネットとレコメンデーション -第5回データマイニング+WEB勉強会@東京
Koichi Hamada
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
Masahito Zembutsu
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
研究分野をサーベイする
研究分野をサーベイする
Takayuki Itoh
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
ブラックボックス最適化とその応用
ブラックボックス最適化とその応用
gree_tech
東北大学 先端技術の基礎と実践_深層学習による画像認識とデータの話_菊池悠太
東北大学 先端技術の基礎と実践_深層学習による画像認識とデータの話_菊池悠太
Preferred Networks
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
Ken'ichi Matsui
Tendances
(20)
全力解説!Transformer
全力解説!Transformer
BERT分類ワークショップ.pptx
BERT分類ワークショップ.pptx
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
基礎線形代数講座
基礎線形代数講座
最近のKaggleに学ぶテーブルデータの特徴量エンジニアリング
最近のKaggleに学ぶテーブルデータの特徴量エンジニアリング
マッチングサービスにおけるKPIの話
マッチングサービスにおけるKPIの話
なぜコンピュータを学ばなければならないのか 21世紀の君主論
なぜコンピュータを学ばなければならないのか 21世紀の君主論
時系列予測にTransformerを使うのは有効か?
時系列予測にTransformerを使うのは有効か?
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Pythonによる黒魔術入門
Pythonによる黒魔術入門
ベイジアンネットとレコメンデーション -第5回データマイニング+WEB勉強会@東京
ベイジアンネットとレコメンデーション -第5回データマイニング+WEB勉強会@東京
IT系エンジニアのためのプレゼンテーション入門
IT系エンジニアのためのプレゼンテーション入門
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
研究分野をサーベイする
研究分野をサーベイする
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
ブラックボックス最適化とその応用
ブラックボックス最適化とその応用
東北大学 先端技術の基礎と実践_深層学習による画像認識とデータの話_菊池悠太
東北大学 先端技術の基礎と実践_深層学習による画像認識とデータの話_菊池悠太
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
数学カフェ 確率・統計・機械学習回 「速習 確率・統計」
En vedette
サルでもできる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
En vedette
(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デザインのセオリーを学ぼう
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Similaire à 全日本<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
Similaire à 全日本<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
Plus 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
Plus 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特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告
Dernier
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Dernier
(11)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
全日本<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
Télécharger maintenant