![見出し画像](https://assets.st-note.com/production/uploads/images/143538689/rectangle_large_type_2_7ad78b10e43494933827ea4ea42347a9.png?width=1200)
CSSの無効化/有効化切り替えツール(Plus版)
Plus版の追加機能
Webページで使用されているCSSをファイル単位で有効化/無効化を切り替えて、それによる影響を調べるツールToggle CSS(Plus版)を公開します。すでにシンプル版が公開されており、Plus版はそれに次の機能を追加したものとなります。
追加機能
記述場所(HEAD内、BODY内)を表示
選択ボタンの追加
HTMLコードの表示
CSSファイル名のクリップボード保存
HTMLコードのクリップボード保存
使い方
次は、起動したときの外観です。
![](https://assets.st-note.com/img/1717951585376-cNPPbpsJgs.png?width=1200)
記述場所(HEAD内、BODY内)を表示
CSSが<HEAD>タグ内に記述されているか、<BODY>タグ内に記述されているかをわかるようにしました。<BODY>タグ内に記述されている場合は、CSSを青字で表現しました。
![](https://assets.st-note.com/img/1717951727813-C49tFWy8bL.png?width=1200)
選択ボタンの追加
CSSの行頭のチェックボックスをワンタッチで選択できるボタンを用意しました。5種類の選択ボタンでワンタッチが複数選択ができます。
[Select all]ボタン:すべてをチェックありにする
[Unselect all]ボタン:すべてのチェックなしにする
[Reverse selection]ボタン:反転する
[URL]ボタン:「http~」で始まるURLだけチェックありにする
[Inline]ボタン:「Inline~」で始まるインラインコードだけチェックありにする
![](https://assets.st-note.com/img/1717951938157-UbAEG5pW3W.png?width=1200)
HTMLコードの表示
CSSのHTMLコードを表示するボタンを用意しました。HTMLコードは赤字で表示されます。
[URL Code]ボタン:URL記述コードをすべて表示する
[Inline Code]ボタン:インラインコードをすべて表示する
![](https://assets.st-note.com/img/1717952059309-L08F1o1kTR.png?width=1200)
CSSファイル名のクリップボード保存
チェックボックスで選択されているCSSのうち、URLアドレスをクリップボードに保存します。読み込んでいる外部ファイルのリストを即テキスト化できます。
![](https://assets.st-note.com/img/1717952647807-o1ma3PLwFR.png?width=1200)
HTMLコードのクリップボード保存
チェックボックスで選択されているCSSのうちHTML記述コードをクリップボードに保存します。HTML記述コードのリストを即テキスト化できます。
![](https://assets.st-note.com/img/1717952602587-jWK7JjAEGH.png?width=1200)
姉妹版を公開中
本ツールの姉妹版を無料公開していますので併せてご利用ください。
プログラムコード
ダウンロード前に、シンプルをダウンロードして動作確認してください。また、基本的な使い方は、本記事冒頭でリンクしているシンプル版の記事でご確認ください。
Toggle CSS(Plus版)のプログラムは次からダウンロードしてください。
ここから先は
Amazonギフトカード5,000円分が当たる
この記事が気に入ったらチップで応援してみませんか?