• 続きを読む

今年夏に出版された書籍「マイクロフォーマット ～Webページをより便利にする最新マークアップテクニック～」を読み始めました。以前からセマンティックウェブや意味的なマークアップに興味があり、マイクロフォーマット(microformats)はそれを実現する手段の一つではないかと関心を持っていたところです。

• 続きを読む

優れたWebデザインを集めたサイトがないかと探してみたところ、「デザインリンクデータベース」というサイトを見つけました。

カラー、テイスト、コンテンツ内容でカテゴライズされており、自分がイメージしている感じと近いサイトを簡単に探すことが出来ますね。コメントなどもつけられており、とても参考になります。

デザインは苦手なので、いろいろなサイトを見て刺激を受けて、このサイトもパワーアップできたらと思います。今、右側のリンク部分が少し弱いなと感じていて、どうしたものかと考えているところです。

Web Directions Eastの内容をより自分のものにしたいということで、引き続き昨日の記事で紹介したA List Apartの記事「Progressive Enhancement with CSS」を読み進めました。

冒頭部分では「Style Sheet organization」と題し、プログレッシブエンハンスメント（progressive enhancement）の恩恵を受けるためのCSSの構成とリンク方法が、詳しく説明されています。

この記事を読み進めたことにより、CSSの構成方法とリンク方法次第で、

• IE5.5 for Mac等の古いブラウザや、CSSを完全にサポートしないブラウザにも最低限の体験を提供できる
• 印刷デバイスやモバイルなど、CSSをサポートするさまざまなブラウザにより高いユーザー体験を提供できる

という点が理解できたように思います（英語が苦手なので少し怪しいですが...）。

• 続きを読む

先日行われたWeb Directions Eastで耳にした「プログレッシブエンハンスメント（progressive enhancement）」と呼ばれる概念ですが、A List Apartの記事「Progressive Enhancement with CSS」において、分かりやすい例が紹介されていました。

ページ中程でフォームのラベルと入力エリアの間に入れられることがよくある「コロン（：）」を題材に取り上げ、ラベルとしては不必要なコロンを取り除いたマークアップと、after疑似要素でCSSに記述して画面上に表示させる方法が示されています。

そして、上記のような方法を取ることによって、

• 簡単なCSSの編集でコロン（：）のような装飾を取り除くことができること
• コロンが表示されない場合でも、フォームが無益なものにならないこと

から、プログレッシブエンハンスメントの好例と位置づけられています。

英語が苦手なので正しく理解できているかかなり不安ですが、原文を読むことでなんとなくでも概念がつかめるのではないでしょうか。

ちなみに、入力フォームがdl要素やtable要素ではなく、ol要素を使ってマークアップされていることも興味深いと感じました。