javascriptでスタイルシートを置き換える手法を使ってレイアウトを変更するサイトの紹介です。ブラウザの表示幅を取得し、その値からレイアウトコラムを変更しています。
ブラウザの表示幅を取得して、そこからスタイルシートを置き換えるjavascriptです。800ピクセル以上で4コラムのレイアウトで表示されますが、表示幅が800ピクセル未満になると1コラムレイアウトに代わります。アクセシビリティには、とてもいい手法だと思います。
今後こういったアクセシビリティを考えての、javascriptを使ったスタイルシートの置き換え手法は増えてくるのかも。DOMの属性を変えることで実現しているようです。（只今勉強中）
興味のある方は、一度覗いてみてください。
画像をクリックすると拡大画像をご覧いただけます。
- Resolution dependent layout
- http://www.themaninblue.com/experiment/ResolutionLayout/
使っているメソッド？（あまり詳しくないので何て呼べばいいかわかりません。）は"setStylesheet"。国内でもこのことについて情報を発信しているひとがあまりいないみたいです。
海外でこの"setStylesheet"を使ったスタイルシートの置き換えを紹介しているエントリーがありましたので紹介しておきます。 もし、javascriptについて精通している方で詳しく説明してくれる方がいましたら、ぜひ教えてください。大変興味があります。コメント・トラックバックお待ちしています。
以下が参考になるエントリーです。
- The DOM again - A Style Sheet Switcher :: Unintentionally Blank
- http://www.unintentionallyblank.co.uk/2006/08/17/the-dom-again-a-style-sheet-switcher/
コメントする