スタイルシートスイッチstyleswitchソース

(2007年4月27日 19:24) | 個別ページ | コメント(0) | トラックバック(0)

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

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

ユーザーのクリックイベントでのスタイルシート切り替え

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets: http://alistapart.com/stories/alternate/

kelvinluck.com: Switch stylesheets with jQuery: http://www.kelvinluck.com/article/switch-stylesheets-with-jquery; jQueryプラグイン。ユーザーが任意で好きなスタイルに変更できるスイッチ

Stefan’s Blog ≫ Blog Archive ≫ JQuery FontSizer Plugin: http://monkeysoft.com.au/blog/?p=3; jQueryプラグイン。テキストサイズを変更するスタイルシートスイッチ

First Go With The DOM - Changing Font Sizes :: Unintentionally Blank: http://www.unintentionallyblank.co.uk/2006/08/02/fontsizing/; テキストサイズを変更するスタイルシートスイッチ。今は実装されていませんが、ボタン表示でデフォルトから変更できるスクリプトが紹介されています。バージョンアップされたものも配布されています。How To Size Your Font Based On Your Reader’s Screen Resolution :: Unintentionally Blank

ユーザーのブラウザ情報からのスタイル切り替え

A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique: http://www.alistapart.com/articles/switchymclayout/; ユーザーのブラウザ表示幅を検知して、レイアウトを変更するスイッチ。240ピクセルから1280px以上までの間で7段階に表示パターンが切り替わるので面白いテクニックです。CSSの参考にもなります。

The Man in Blue > Experiments > Resolution Dependent Layout: http://www.themaninblue.com/experiment/ResolutionLayout/

CSS Drop Column Layout | Muffin Research Labs by Stuart Colville: http://muffinresearch.co.uk/archives/2006/02/07/css-drop-column-layout/; ユーザーのブラウザ表示幅を検知して、レイアウトを2コラムから4コラムまで切り替えれる。若干ボックス指定の部分で制限があります。

イベントからのスタイル切り替え

A List Apart: Articles: Text-Resize Detection: http://alistapart.com/articles/fontresizing; ページを閲覧しているユーザーの任意に指定するフォントサイズを検知して、合わせて各要素のクラス指定を操作できるというもの。詳細はtextresizedetector-ユーザーのテキストサイズを検知するjavascriptのポストで紹介しています。

スタイルシートスイッチを導入しているサイト

ちょとまねしてみたいスタイルシートスイッチ導入サイト

/with Imagination: Dustin Diaz: http://www.dustindiaz.com/

Yahoo!: http://www.yahoo.com/

トラックバック(0)

このブログ記事を参照しているブログ一覧: スタイルシートスイッチstyleswitchソース

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/248

コメントする

次の記事:Twitter ブログパーツ（Badgesカスタマイズ）と素材
前の記事:jQueryすぐに使える役立つプラグイン-javascript

ff-logo-big: firefoxロゴ
fmtube_image: ｆmtubesキャッチイメージ
mock.jpg: fm+tubesのモックページ（デザインレイアウト）。最終的にはこのスタイルでマルチブログで展開してみる構想。
mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。
mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです
caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する
tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。
psdtuts: http://psdtuts.com/のイメージ画像
designflavor.: http://www.designflavr.com/のイメージ
entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト（アーカイブテンプレート）、検索結果（システムテンプレート）の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このページは、スカイが2007年4月27日 19:24に書いたブログ記事です。

ひとつ前のブログ記事は「jQueryすぐに使える役立つプラグイン-javascript」です。

次のブログ記事は「Twitter ブログパーツ（Badgesカスタマイズ）と素材」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。