続・よくある3つのデザインから考える、マークアップの最適解
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
jmblog.jp - ソースコードを表示させるのに使うべきHTMLタグは？
ソースコードをWebページで表示させるために、どんなHTMLを書いてますか？私はこれまで、<pre>…</pre> を使っていました。<code>…</code> というタグは知っていましたが、これだと半角スペースや改行がうまく反映されていない、という理由で使っていなかったのです。 が、Web標準の教科書という本を読んで、目からうろこが落ちました。 （pre要素の解説で） pre要素は、code要素と組み合わせてスクリプト言語やプログラミング言語のソースコードを示すのに使うのが一般的である。 （code要素、var要素、samp要素、kbd要素の解説で） コンピュータに特有のテキストを定義するには、次の4つの要素を使用する。 （略） これらはインライン要素であり、インライン要素やテキストを含むことができる。 そうだったのかー！code要素はインライン要素なので、半角スペースや改行が反映
(x)html css ガイドライン beta
バージョン情報(ナンバー,日付,編集者,編集したドキュメント) ver0.4.1 2008/10/9 azuma Add Cardinal rule。 ver0.4 2008/8/11 azuma default.cssをreset.cssに名称変更。 ver0.4 2008/8/11 azuma Templateを廃止。DesignModuleに統一。 ver0.4 2008/8/11 azuma cssの設計を変更(common.cssとpages_layout.cssをskin.cssに統合) ver0.4 2008/8/11 azuma Add Microformats reference(Micorformatsの記述に合わせてid class名を大文字区切りから“-”区切りに変更) ver0.3 2008/5/2 azuma Add XSLT reference ver0.2.
hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
論理構造を文脈に読み換えながら class 名を考える - 我的春秋
POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. posh - Microformatsより 基本的にはより論理構造を意識した class名をつけることが、今日のお話の目的なんですが、semantic-class-names のリンク先にない新味は、論理構造を文脈に読み換えながら class 名を考えるという点。（ただし、普段から意識的に文書全体の構造に照らして class名をつけている方には、それほど新味はないかも。） 例によって
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
