見出し画像

CSSの無効化/有効化切り替えツール(姉妹版)

割引あり

先日公開した「CSSの無効化/有効化切り替えツール」(Toggle CSS)を公開したのですが、今回はその姉妹版となるツールAdd CSSを公開します。Add CSSは、Toggle CSSとはセットで使うことを前提としています(単独でも使えなくはありません)。

主な機能は次の通りです。

機能紹介

  • CSSファイルの追加

  • 既存CSSファイルとの比較

  • CSSファイル名のクリップボード保存

  • HTMLコードのクリップボード保存

使い方

次は、起動したときの外観です。

Add CSS起動画面

CSSファイルの一時的な追加

このスクリプトの一番の特徴は、一時的にCSSファイルを追加してみることができることです。それを行うのが中央の「Enter CSS URLs」と表示されているテキストボックスです。

ここに、Toggle CSSでクリップボードに保存したCSSのURLをぶち込んで[Add]ボタンを押します。

テキストボックスにCSSファイルのURLを入れて[Add]を押す

すると、次のように表示されます。これで、追加したCSSファイルが追加されます。

CSSファイルが追加された

たとえば、すでに存在するWebページがあり、そのためのバージョン違いのCSSファイルが複数あったとします。新たにWebページを作った後、どちらのCSSファイルを使うと、見え方がどう変わるかを確認するのに使えるというわけです。

既存CSSファイルとの比較

追加したCSSファイルがすでにコード内にあるかどうかを比較する機能があります。それが次のボタンです。

  • [Compare]ボタン

たとえば、元のWebページに複数個のCSSファイルが指定されていたとします。新たに作ったWebページにも同じCSSファイルを指定したつもりだけれども、どうも表示が異なる部分がある。

そんな場合には、元のWebページのCSSファイルをToggle CSSを使ってクリップボードにコピーします。これをAdd CSSで追加して[Compare]ボタンを押し、さらに選択を逆にする[Reverse selection]ボタンを押すと、不足しているCSSが選択された状態になります。

不足しているCSSファイルがわかったら[Code]ボタンを押します。これで追加するためのソースコードがクリップボードにコピーされるので、これを対象のWebページのソースコードにペーストすれば不足分のCSSコードの記述の追加が完了です。

プログラムコード

Toggle CSS(Plus版)のプログラムは次からダウンロードしてください。

ここから先は

124字 / 1ファイル

期間限定 PayPay支払いすると抽選でお得に!

この記事が気に入ったらサポートをしてみませんか?