HTML5 で試しに Web ページを組んでみた

このエントリは、「HTML5 で試しに Web ページを組んでみた (改訂版)」の記事によって加筆されています。あわせてご覧ください。

このエントリは、「CSSロールオーバーのアクセシビリティを少し考えてみた」や「CSSでボックス要素を画面中央に表示させてみる」に続く試しにやってみたシリーズです。

先日、WCAN mini Markupの第8回がありました。前回の「デザインを(X)HTML化しました」に続いて、今回は「CSS ココにこだわってみました」というテーマで前回組んだHTMLを(一部でもいいので)CSSで装飾してみよう、ということをしたのですが、フツーにXHTML+CSSで組むのもつまらないなーと思って最近話題になりつつあるHTML5でページを組んでみました。主に以下のサイトを参考にしました。

HTML5で書かれた典型的なブログ記事のマークアップ例などはありますが、今回使用したサンプルのような企業サイトのマークアップ例を見つけることができませんでした。ですので上で挙げた仕様書や記事のサンプルを見つつ手探りで書いています。これをみて、そこはおかしいよ!などのご指摘ぜひお待ちしてます!

“HTML5 で試しに Web ページを組んでみた” の続きを読む

今年も CSS Naked Day なわけですが

画像 : CSS Naked Day '08 ロゴ

今年もWebサイトが世界同時にすっ裸になる日がやってまいりました!!

去年は4月5日にあったのですが今年のCSS Naked Dayは4月9日だそうです[1]

このイベントの趣旨はカンタン。「あなたのWebサイトからCSSをすべて外して丸裸にしてしまおう」というものです。
目的は、正しい(X)HTMLの記述やセマンティックで構造的なマークアップなどのWeb標準のプロモーションです。逆に考えればCSSデザインの可能性を示すよい機会であると考えることもできます。どんなかっこよくて複雑なデザインを持っているサイトも、CSSを外せばこんなにシンプルに書かれているんだよって[2]

ちなみにこのサイトはWordPressで構築されているので、こちらのプラグインを使って自動でCSSをはずすようになっています。便利です:-)

ただ、あるお方こっちのお方がつぶやいていてハッと気づいたのですが、CSS外しちゃうとVicuna CMSを使用しているサイトの見た目はみんな同じになるわけです。つまり、Vicunaユーザは見た目がみんな同じで没個性な日だったりします。

たまには素のHTMLをじっくりみてみると思いつかなかった発見や新しいデザインが生まれるかもしれません。

  1. 去年も前のサイトで参加してました。 [back]
  2. ま、HTMLの中身はdivdivしてるかもしれないけど;-P [back]

DOASでCSSの概要を記述する

バージョン0.91のDOASに対応しました。

CSSを書くときに、そのそれが何の役割をするのか(どこをスタイリングするのか)という概要をどう書いたらよいのか迷うことがあります。

特に大人数で作業している場合は形式を決めておきますが、他人が書いたものだとどうも区切り線[1]や改行のタイミングが気に入らなかったりします。僕はというと、3ping.orgさんの「CSSのコメントの書き方コレアレ」という記事を参考に、import.cssに各CSSの概要をまとめて書いていました。

何か自分を納得できるような形式がないか探していて、DOASを見つけました。これはかなりよいのではないかと思って早4ヶ月[2]、やっとエントリ書けました:-<

“DOASでCSSの概要を記述する” の続きを読む

  1. 例 : ハイフン"-"とかイコール"="とかシャープ"#"とかアスタリスク"*"とか [back]
  2. 当時のブックマーク [back]

CSSでボックス要素を画面中央に表示させてみる

少し前に出た話題だけど、CSS(だけ)でブラウザのウィンドウの中央にボックスを表示させてみようと試みました。元ネタは以下の記事より。

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

“CSSでボックス要素を画面中央に表示させてみる” の続きを読む

CSS ロールオーバーのアクセシビリティを少し考えてみた

グラフィカルなメニューなどでhover時に違った画像に変化させる際に、text-indent: -9999px; でテキストを飛ばして画像を置換する方法が過去のもの[1] になっているようです。このような場合はテキストではなく普通にimg要素を配置する方がよいと思います。

画像をそのまま配置した場合、昔のように(もっとコードは洗練されていますが) JavaScriptを使って画像置換する方法が復活していますね。でもそれはなるべくCSSでやりたいなぁと思った自分はアクセシビリティをなるべく確保するようにした画像置換方法がないか考えてみました。

画像はCSS Nite LP3の課題のものを利用させていただいています。

“CSS ロールオーバーのアクセシビリティを少し考えてみた” の続きを読む

  1. 画像OFF時に何も見えなくなりアクセシビリティ的にかなりよくない [back]