[B! HTML] nm49のブックマーク

続・よくある3つのデザインから考える、マークアップの最適解

マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度最初

nm49 2013/11/11

HTML

リンク

全日本＜label＞要素マークアップ検定

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-t

nm49 2013/08/17

HTML

リンク

[HTML5 入門]HTML5の略された49タグの語源全てを調べた

タグ名がそのままタグの意味になっているものは抜いてあります。ここにあるのは108つあるHTML5タグのうち49個。付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。それでもどうしても分かりにくそうなものは熟語として加えてあります。一応分かりにくいものだけ補足 hrタグについてよく昔hairline(細い線)と説明されているのを見かけましたが、正しくは水平方向の罫線と言う意味です。 dlタグ、dtタグ、ddタグについて dlはdescription listです。HTML4まで、dlは定義リスト、つまりdefinition listという意味でした。しかしHTML5からしれっとdescription list、つまり記述リストと言う意味に変わっており、用途も単に定義の言葉とその対応を示すもの、というものからターム(専門語と言うよ

nm49 2012/10/15

HTML

リンク

link 要素 - ドキュメントのメタデータ - HTML要素 - HTML5 タグリファレンス - HTML5.JP

4.2.4 link 要素カテゴリー: メタデータ・コンテントこの要素を使うことができるコンテキスト: メタデータ・コンテントが期待される場所。 head 要素の子となる noscript 要素の中。コンテントモデル: 空コンテント属性: グローバル属性 href — ハイパーリンクのアドレス crossorigin — この要素がクロスオリジン・リクエストを扱う方法 rel — ハイパーリンクを含むドキュメントと、そのリンク先のリソースとの間の関係性 media — 受け入れ可能なメディア hreflang — リンク先のリソースの言語 type — 参照リソースのタイプに関するヒント sizes — アイコンのサイズ (rel="icon" の場合) title 属性は、この要素では特別なセマンティクスを持ちます。リンクのタイトルや代替スタイルシートのセット名になります。 te

nm49 2012/06/28