レスポンシブWebデザインの面倒なところは同じような設定が散見されることではないでしょうか。上の方で幅の定義があるものの、実際のクラス定義はどの幅に対するものなのか分かりづらいことがあります。 そこで使ってみたいのがaltclassです。JavaScriptを使いますが、幅によってクラスを付け替えてくれる便利なライブラリです。

altclassの使い方

例えばこれは幅が大きい場合。

DOM構造。widget–lというクラスが定義されています。

幅を縮めるとwidget–mになりました。

さらに狭めるとwidget–sです。

文字もContainer is Mediumに変わっています。

ブレークポイントは設定を使って自由に指定できます。

<div data-altclass="[less than 320] 320 [at least 320 & up to 479] 480 [at least 480]">

altclassは幅の変化を見てクラスの付け替えを行っています。スタイルシート側は widget-* というクラスを使って表示/非表示を切り替えると言った具合です。JavaScriptが有効でないと使えない点は難点ですが、スタイルシートはこちらの方が分かりやすく書けるような気がします。

altclassはJavaScript製、Public Domainのオープンソース・ソフトウェアです。

chapmanu/altclass