27
SEPTEMBER
ウェブTUESDAY 2016 / 9 / 27
ブラウザのJavaScriptが有効／無効の場合で、CSSを条件分けしたい
Text by Hiroyuki Matsumoto
「日常系の話と技術系の話ではギャップがありすぎる！」
とブログが微妙に不評の松本です。
もう技術系の話を書くときはペンネーム（例：ゴンザレス松本）で書こうかなぁ、とか考えてしまいます。
ちなみに島根県出身の天才プログラマーに まつもとゆきひろ という方がいるのですが、
ぼくは名前が まつもとひろゆき なので、有名人詐欺をしているようで大変いたたまれません。
以下本題。
ブラウザには JavaScript というプログラム言語が内蔵されています。
大変便利な機能で、例えば Google Maps がグリグリ軽快に動くのもこのプログラム言語のおかげなのですが、セキュリティ上の問題が見つかることもあるため、ユーザー側で設定を無効にしてしまっている場合もあります。
ところで通常は CSS でサイトデザインを決めているのですが、
スライドショー機能（bxSlider や Slick など）を付けると JavaScript がデザインを変えてしまうので、
JavaScriptが使えない場合は CSS を変更しないといけないこともあります。
そんなときの対処法はいろいろとありますが、とりあえず簡単な対処法として、<head>要素内に下記スクリプトを挿入する方法が便利です。
<script>
(function(){
var html = document.getElementsByTagName('html')||[];
html[0].classList.add('enable-javascript');
})();
</script>
すると、JavaScriptが有効な場合にのみ html要素に enable-javascript クラスが付与されます。
たったこれだけですが色々便利になります。
例えば、JavaScript が有効な場合に非表示にしたい要素には hide-enable-js というクラスを付与し、
JavaScript が無効な場合に非表示にしたい要素には hide-disable-js というクラスを付与してHTMLを作成しておきます。
あとはスタイルシートに下記を記述するだけです。
/* JavaScript が有効な場合に非表示 */
html.enable-javascript .hide-enable-js{
display: none;
}
/* JavaScript が無効な場合に非表示 */
html:not(.enable-javascript) .hide-disable-js{
display: none;
}
実は他にも色々応用が効くのですが、それはまた追々触れたいと思います。
TEXT by
松本 博之（まつもとひろゆき）
1978年、鳥取県米子市生まれ。
株式会社マジックワード WEBシステムの開発・運用を担当。
WordPressの実績多数。表面的な使用方法を把握するだけでなく、WordPressのソースコードを読み解いて対応できます。
国家資格の応用情報処理技術者をなんとなくとりました。
