Flashを使わずにJavaScriptを使ってアニメーションなど様々な演出をしているサイトが増えてきましたが、たまにJavaScript（以下JS）がオフの時、何も表示されない、または崩れててコンテンツがよく分からないサイトに遭遇します。
そもそもJSオフにして見る人がいるのかという話もありますが、対処法を書いておこうと思います。
JSで使う動きに関するCSSはJSに書いておく
まずは動きに関するCSSの指定を全部JSの方で指定する方法です。JSがオフでも動きに関する指定はJS側なのできちんと表示できます。
ただ欠点としてはJSが読み込まれるまでの間、オフの時の表示が見えてしまうので、ちらつきが気になるかもしれません。2回目のアクセス以降はキャッシュであまり気にならなくなるかもしれませんが。
noscript内にオフ用のCSSを書く
<head>内にオフ用のCSSを書く方法です。
この場合は、さきほどの読み込み時のちらつきなども起きないので（指定方法や演出によるかもですが）表示はスムーズになると思います。
欠点としてはJSオフ用に別のCSSファイルを用意することでしょうか。
例：
<head>
<link rel="stylesheet" href="common.css">
<noscript>
<link rel="stylesheet" href="noscript.css">
</noscript>
</head>HTML4.01とXHTMLだとhead要素内にnoscriptは仕様的には配置不可でしたが、HTML5では大丈夫だそうです。
htmlタグにclassを付与・削除する
Modernizrを使う機会があってその際に知ったやり方なのですが、htmlタグにclass=”no-js”を指定しておき、JSが動くとそのclassを変えclass=”js”になるというやり方です。
この場合はJSが動く時に使うCSSのセレクタは普通に記述し（もしくは.jsから始める）、JSオフの時の指定は.no-jsから始めるように記述すれば表示がきちんとされます。
.hoge { display: none;}
.no-js .hoge { display: block;}参考サイト
このJSを使うといろいろ機能がありすぎるので、この機能だけ使いたい場合は独自に実装するのもよいかと思います。HTML4.01やXHTMLではhtmlタグにclassをつけるのが仕様的にはダメだそうですが動作はします。
2と3の説明は下記のサイトに詳しくのっているのでご覧下さい。
コメント