ウェブネタ

jQuery

CSSをjQueryで変更する方法を調べたので、サンプルソースと共に忘れないようにメモしておきます。

CSSの変更がページ移動後も反映されるようにする為には、Cookieを使用するのが一般的だと思います。ただ、プログラムを得意としない人(僕)にとって、Cookieの操作ってちょっとややこしそう。そんな人でもCookieを簡単に利用できるようにするのがjquery.cookie.jsプラグインです。

jQueryとjquery.cookie.jsを使用したら、結構簡単に実現できました。

The only script in your <HEAD>(head要素内の唯一のスクリプト)

このキャッチコピーが印象的なHead JSがすごく便利なんです。

クロスブラウザを実現したり、jQueryのプラグインを利用するためにhead要素内がscript要素だらけになっているサイトって結構多いですよね。

そんなJavaScriptバリバリなサイトのhead要素内をすっきりしてくれるのがHead JSです。すっきりさせてくれるだけでなく、ものすごく多機能です。

IE6はCSSプロパティのmax-widthに対応していません。

min-widthならIE6の独自仕様である「ボックスの拡張(内包要素が親要素の横幅を拡張)」を利用すれば比較的簡単に実現できますが、max-widthは色々工夫しないとできません。

以下はコリスさんの記事。

ただ、応用しづらいというのが本音です。そこで、jQueryのお世話になります。

スマートフォンの利用者が多くなってきましたが、ウェブサイトのスマートフォンへの対応、みんなどうしているのかな?と思う今日この頃。

スマートフォンへの対応策の一つにCSS3のMedia Queriesを利用するというのがあります。簡単に説明すると、端末毎の表示可能領域の違いを利用してCSSを振り分けるって方法です。

正確には、ディスプレイやウィンドウのサイズに合わせたデザインを提供して、結果的にスマートフォンでも見やすい状態にするってことなんですけどね。

だから、スマートフォンに限らず全てのブラウザで利用できる技術なんですが、策定中のCSS3なので、当然、古いブラウザは対応していません。

そこで、Media QueriesをjQueryで代替する、言わばMedia jQueries的なものを紹介します。