Drawer|web制作に関するネタの引き出しサイトweb制作に関するネタの引き出しサイトTwitterFacebookRSS登録TOPページに戻るJavascriptあれ何も見えない?を防ぐ、JavaScriptがオフでもきちんと表示させる方法あれ何も見えない?を防ぐ、JavaScriptがオフでもきちんと表示させる方法2013年09月18日JavascriptFlashを使わずにJavaScriptを使ってアニメーションなど様々な演出をしているサイトが増えてきましたが、たまにJavaScript(以下JS)がオフの時、何も表示されない、または崩れててコンテンツがよく分からないサイトに遭遇します。そもそもJSオフにして見る人がいるのかという話もありますが、対処法を書いておこうと思います。JSで使う動きに関するCSSはJSに書いておくまずは動きに関するCSSの指定を全部JSの方で指定する方法です。JSがオフでも動きに関する指定はJS側なのできちんと表示できます。欠点としてはJSが読み込まれるまでの間、オフの時の表示が見えてしまうので、ちらつきが気になるかもしれません。2回目のアクセス以降はキャッシュであまり気にならなくなるかもしれませんが。noscript内にオフ用のCSSを書く<head>内にオフ用のCSSを書く方法です。この場合は、さきほどの読み込み時のちらつきなども起きないので(指定方法や演出によるかもですが)表示はスムーズになると思います。欠点としてはJSオフ用に別のCSSファイルを用意することでしょうか。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から始めるように記述すれば表示がきちんとされます。NoteこのJSを使うといろいろ機能がありすぎるので、この機能だけ使いたい場合は独自に実装するのもよいかと思います。HTML4.01やXHTMLではhtmlタグにclassをつけるのが仕様的にはダメだそうですが動作はします。2と3の説明は下記のサイトに詳しくのっているのでご覧下さい。Drawerこのサイトについてホームページ制作のマークアップエンジニアをしています。このブログはWebに関する記事を扱っています。自分で作ったものや試したもの調べたものを紹介しています。webdrawer.netページTOPへ戻る。