css,スタイルシートの最近のブログ記事

自分の好きなサイトMicrosoft Windows ホーム ページのメニューを真似して作ってみました。CSS難しいですね。スマートじゃないですが、形になっていると思うのでデータ共に公開します。

CSSでWindowsVista風のナビゲーションバーを作成するサンプル:phpspot開発日誌と『Dezinerfolio流』自動的に横幅を調節してくれるCSSタブメニューの作り方*ホームページを作る人のネタ帳のエントリーにつられてエントリーアップすることにしました。

こんな感じのメニューです。マイクロソフトのWEBサイトみないなMENU（別窓表示）

以下XHTMLとCSSとサンプルページと同じファイルとメニュー元画像Photoshopデータおいておきます。よろしかったら使ってみてください。
※尚、データを別々に作成したため、hoverのマージンが異なりますので、若干CSSのマージンが違います。

javascriptを使ってのスタイルシートスイッチソース元を紹介。

スタイルシートの切り替え・文字サイズの切り替え・ブラウザの表示幅を検知して表示を変更するものなどいろんなものがあります。スクリプトの参考に。ついでに個人的にスタイルシートの切り替えを導入しているサイトを少し紹介。

CSS TABLES GALLERY-TABLEのCSS設定パターンを共有できるサイト。

Design Nameをクリックすると実際にCSSパターンでTABLE表示されるので便利。DownloadでCSSを入手することができます。自分でもオリジナルのCSSを投稿できるので、これからもいろんなパターンが増えてくる。おススメブックマークサイト

Data Tables and Cascading Style Sheets Gallery

http://icant.co.uk/csstablegallery/index.php

アクセシビリティを考慮したWEBページを作成するときに役立つのがA List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsが紹介しているstyleswitcher.js。

アクセシビリティガイドラインにも「ガイドライン2.　色だけに依存しない」という項目があり、

2.1　色によって表現されている全ての情報は、その色を再現できない環境でも得られるようにしておく（たとえば、前後関係やタグ付けなどによって）。 [優先度1] (チェックポイント2.1)

2.2　前景色と背景色の組み合わせは、色の識別が困難な人やモノクロ画面を使用している人などに対しても十分なコントラストを与えるようなものにする。 [対画像：優先度2 、対テキスト：優先度3] (チェックポイント2.2)

（引用：ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書:http://www.zspc.com/documents/wcag10-tech/index.html）

ページコンテンツをハイコントラスト表示で提供する場合などにスタイルシートの切り替えを使うことや、見易いページを提供するときなどにも使われています。

456 Berea Streetは、ページ上部に"Switch to high contrast layout"リンク表示をして切り替えができるようにしています。

Going My Wayさんは、このscriptを使ってオリジナルのCSSデザインが切り替え表示できるようにしています。

ブラウザの表示幅を取得して、そこからスタイルシートを置き換えるjavascriptです。800ピクセル以上で4コラムのレイアウトで表示されますが、表示幅が800ピクセル未満になると1コラムレイアウトに代わります。アクセシビリティには、とてもいい手法だと思います。

今後こういったアクセシビリティを考えての、javascriptを使ったスタイルシートの置き換え手法は増えてくるのかも。DOMの属性を変えることで実現しているようです。（只今勉強中）

興味のある方は、一度覗いてみてください。