CSS無効化の徹底解説!初心者向け作り方・使い方・無限ループのサンプルコードと応用例

CSS無効化を行う方法を示すイメージCSS
この記事は約7分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webサイトのデザインに欠かせないCSS。

しかし、時にはCSSを無効化したい場合もあります。

本記事では、CSSの無効化について、初心者目線で徹底解説します。

作り方や使い方、無限ループのサンプルコード、さらに応用例まで、これを読めばCSS無効化のプロになれること間違いなしです!

●CSS無効化の基本

CSS無効化とは、Webページのデザインに関する情報を無効にすることです。

これにより、ページがブラウザのデフォルトスタイルで表示されます。

では、具体的にどのようにCSSを無効化するのでしょうか。

  1. HTML内のstyleタグやlinkタグを削除する
  2. JavaScriptを使用して、CSSを無効化する

それぞれの方法について解説していきます。

●方法1: HTML内のstyleタグやlinkタグを削除する

CSSを無効化する最も簡単な方法は、HTML内のstyleタグやlinkタグを削除することです。

これにより、ページに適用されていたCSSが適用されなくなり、ブラウザのデフォルトスタイルで表示されます。

例えば、次のようなHTMLコードがあった場合、

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    body {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>CSS無効化の例</h1>
  <p>ここにテキストが入ります。</p>
</body>
</html>

CSSを無効化するためには、linkタグとstyleタグを削除します。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>CSS無効化の例</h1>
  <p>ここにテキストが入ります。</p>
</body>
</html>

このようにすることで、CSSが適用されず、ブラウザのデフォルトスタイルで表示されるようになります。

●方法2: JavaScriptを使用して、CSSを無効化する

JavaScriptを使用して、CSSを動的に無効化することも可能です。

次のコードをHTMLに追加してください。

<script>
  window.onload = function() {
    var stylesheets = document.querySelectorAll('link[rel="stylesheet"], style');
    for (var i = 0; i < stylesheets.length; i++) {
      stylesheets[i].disabled = true;
    }
  };
</script>

このコードは、ページが読み込まれた後、すべてのlinkタグとstyleタグを検索し、それらを無効化します。

● 無限ループのサンプルコード

CSS無効化を使った応用例として、無限ループを作成することができます。

CSSを無効化し、数秒後に再度有効化することを繰り返すサンプルコードです。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
  <script>
    function toggleCSS() {
      var stylesheets = document.querySelectorAll('link[rel="stylesheet"], style');
      for (var i = 0; i < stylesheets.length; i++) {
        stylesheets[i].disabled = !stylesheets[i].disabled;
      }
    }

    setInterval(toggleCSS, 3000); // 3000ミリ秒ごとにCSSの有効・無効を切り替える
  </script>
</head>
<body>
  <h1>無限ループの例</h1>
  <p>ここにテキストが入ります。</p>
</body>
</html>

このコードは、3秒ごとにCSSの有効・無効を切り替えることで、無限ループを作成します。

● 応用例とサンプルコード

CSS無効化の応用例とそれに対応するサンプルコードを紹介します。

ページ上のボタンをクリックするとCSSが無効化・有効化される例

この応用例では、ユーザーがページ上のボタンをクリックすることで、CSSの無効化・有効化が切り替わります。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
  </style>
  <script>
    function toggleCSS() {
      var stylesheets = document.querySelectorAll('link[rel="stylesheet"], style');
      for (var i = 0; i < stylesheets.length; i++) {
        stylesheets[i].disabled = !stylesheets[i].disabled;
      }
    }
  </script>
</head>
<body>
  <h1>ボタンクリックでCSS無効化・有効化の例</h1>
  <p>ここにテキストが入ります。</p>
  <button onclick="toggleCSS()">CSSを切り替える</button>
</body>
</html>

上記のコードでは、toggleCSS関数をボタンのonclickイベントに設定し、ボタンがクリックされた際にCSSの無効化・有効化が切り替わるようにしています。

ページの一部分だけCSSを無効化する例

この応用例では、ページの特定の要素だけCSSを無効化します。

次のサンプルコードでは、<div>要素に適用されているCSSを無効化しています。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
    div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script>
    function disableCSSForElement(selector) {
      var elements = document.querySelectorAll(selector);
      for (var i = 0; i < elements.length; i++) {
        elements[i].style.cssText = "";
      }
    }

    window.onload = function() {
      disableCSSForElement('div');
    };
  </script>
</head>
<body>
  <h1>一部分だけCSSを無効化する例</h1>
  <div>ここにテキストが入ります。</div>
</body>
</html>

このコードでは、disableCSSForElement関数が特定の要素のCSSを無効化する役割を担っています。

window.onloadイベントでこの関数を呼び出し、指定した要素のCSSを無効化しています。

以上が、CSS無効化の基本的な作り方・使い方、無限ループのサンプルコード、および応用例とサンプルコードの解説です。

これらの知識を身につけることで、あなたもCSS無効化のプロになれるでしょう。

今回紹介した例を参考に、自身のプロジェクトや実践に活かしてみてください。