何らかの理由でJavaScriptが無効化されている環境でウェブページを表示させるとき、JavaScriptが無効になっているとき限定のCSSを読み込む方法を紹介します。

JavaScriptを利用する方法

先に仕組みをすると、あらかじめHTMLに<html class="no-js">を指定しておき、JavaScriptが効いている環境では「class="no-js"」を除去、代わりに「class="is-js"」で置換する、という処理を行なってこれを実現します。

HTMLの記述

<html class="no-js">
<head>
	<script>document.documentElement.classList.replace('no-js', 'is-js');</script>
	<link rel="stylesheet" href="https://example.com/style.css">
</head>
<body>
	<h1 class="sample">これはサンプルのテキストです</h1>
</body>
  • JavaScriptが無効の場合：「class="no-js"」
  • JavaScriptが有効の場合：「class="is-js"」

スタイルシートのほうで「class="no-js"」と「class="is-js"」それぞれに対して処理を適用させればOKです。

CSSの記述

/* JavaScriptが有効のとき */
.is-js .sample {
	color: blue;
}

/* JavaScriptが無効のとき */
.no-js .sample {
	color: red;
}

「noscript」を使用する方法

<noscript>〜</noscript>は、JavaScriptが有効の場合はnoscriptタグは無視され、JavaScriptが無効の場合ではnoscriptタグの中の内容が表示されます。

また、ユーザーがパソコンのスクリプトを実行しない設定にしている場合でもとうぜんnoscriptタグの内容が表示されます。

この仕組みを利用してJavaScriptの有効／無効の状態を分岐します。

<html>
<head>
<link rel="stylesheet" href="https://example.com/style.css">
<noscript>
	<link rel="stylesheet" href="https://example.com/style-noscript.css">
</noscript>
</head>
<body>
<noscript>
	<p>JavaScriptが無効です</p>
</noscript>
</body>

ここでは通常の「style.css」の他、JavaScriptが無効の状態のときに使う「style-noscript.css」を用意しています。

ちなみにHTML4.01ではnoscriptタグはbodyタグ内でのみでしか使えませんでしたが、HTML5からはheadタグ内での利用が可能となりました。ただしheadタグ内で使用する場合は、linkタグ、styleタグ、metaタグのみが記述可能です。

JavaScript逆引きレシピ 第2版