HTMLをローカルプレビューしているときだけ、特定のスタイルシートを読み込む

Posted at 2024-11-05

結論

📁root
- 📁css
  - 📓local.css
- 📓index.html

css/local.css

/* ローカルプレビューでのみ使う、スタイルシート */
.local-preview{
    color: red;
}

index.html

<html>
  <head>
    <script>
        (()=>{
            switch(window.location.hostname){
                case "":
                case "localhost":
                case "127.0.0.1":{
                    document.write(`<link href="./css/local.css" rel="sthlesheet" />`);
                }
            }
        })();
    </script>
  </head>
  <body>
    <div class="container local-preview">
      <!-- contents -->
      ローカルプレビュー時は、文字が赤くなる
    </div>
  </body>
</html>

以上

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up