CSSに特化されているから使いやすい！ WebページのCSSを確認・編集できるスタンドアロンのCSSエディタ -InSpec
Post on:2026年6月23日
sponsorsr
CSSの検証やデバッグにデベロッパーツールを使用している人が多いと思います。しかし、デベロッパーツールではリロードするとその変更内容が消えてしまうという大きな弱点があります。
macOS用のインスペクター、CSSに特化されたエディタを紹介します。基本的な機能はデベロッパーツールと同等で、要素をクリックするとビジュアルエディタでスタイルを確認・編集できます。また、デベロッパーツールとは異なり変更したCSSのスタイルはリロード後も保持され、ソースコードに保存することもできます。
InSpecの特徴
InSpecは、WebページのCSSを確認・編集できるスタンドアロンのCSSエディタです。任意の要素をクリックし、ビジュアルエディアを使用してリアルタイムにスタイルを調整し、結果をコピペ可能なCSSとして出力できます。編集内容はリロード後も自動的に保持され、デベロッパーツールが本来目指していたデザインツールの進化系と言えるでしょう。
macOS 14 Sonoma以降が必要で、Appleシリコン専用です。
有料アプリですが、7日間の無料トライアルがあり、7日間が過ぎるとCSSの編集を10回行うごとに購入を促すリマインダーが表示されます。機能の制限や保存ができなくなるといったことはありません。詳しくはライセンスをご覧ください。
ブラウザのデベロッパーツールとの大きな違いは、編集した内容がリロード後も保持されることです。またCSSを編集するUIはパネルの入れ子ではなく、広々したサイドバーいっぱいに目立つように表示されます。もちろん、他にも違いはたくさんあり、どちらかが使いやすいかは人によると思います。
InSpecのダウンロード
InSpecは、2つの方法でダウンロードできます。
Mac App Store版とサイトから直接ダウンロードできます。
- InSpec -Mac App Store
購入専用で、ライセンスキーは不要です。 - InSpec -bendansby.com
トライアル（無料利用も）を含む版です。トライアルでは7日間はフルで利用でき、その後CSS編集を10回行うごとにリマインダーが表示されます。それ以外は特に制限はありません。
下記ページ上部のボタンからもアクセスできます。
InSpecの使い方
さっそく、当ブログでInSpecを使用してみました。
使い方は簡単で、InSpecのアドレスバーにURLを入力するだけです。
InSpecで当ブログを表示
まずは、上部のツールバーを見てましょう。アイコンをクリックするだけで、さまざまなビューポートサイズで表示できます。
さまざまなビューポートサイズで表示
カメラアイコンをクリックすると、キャプチャできます。表示中のビューポートだけでなく、ページ全体もキャプチャできるので便利ですね。
表示ページのキャプチャ
ページまたは要素のバリエーション（ダークモード・印刷用スタイルシート・モーション低減など）は、ページ上で直接表示できます。編集したCSSは、特定のバリエーションまたはビューポートに限定して適用することもできます。
ページまたは要素に設定されているバリエーション
上部ツールバーのターゲットアイコンをクリックすると、編集モードに変わります。ページ内の各要素にカーソルを重ねるとシアン色で囲まれ、クリックすると要素が固定（ピン留め）されます（枠線がオレンジ）。
クリックすると編集する要素が固定
要素が固定されると、サイドバーの上部に情報が表示されます。上部のカスケードリストには、祖先チェーンが表示され、任意の行をクリックすると、その祖先をピン留めできます。
要素のDOM構造
サイドバーのインスペクターには、ピン留めされた要素とセレクタが一致するすべてのCSSのスタイルがカスケード順に一覧表示され、各スタイルは編集可能です。編集するとブルーのボーダーでハイライトされ、編集後のスタイルと編集前のスタイルを確認できます。
インスペクターでCSSを編集
各要素に対して設定したすべての疑似クラスとコンテキストも一覧表示されます。
:hoverに設定されたスタイル一覧
インスペクターではCSSの値をビジュアルで表示することもできます。たとえば、カラーはカラーピッカー付き、ボックスシャドウやテキストシャドウはぼかしや拡散の切り替え、背景画像はグラデーションや画像URLコンポーザー、角丸は視覚的な四隅ダイヤル、Flexboxは方向や均等割り付けや整列や間隔など。
CSSの変数もページのスタイルシートからすべての宣言が抽出され、変数の実際の値が一目で分かります。
変数の値も表示
既存のスタイルを編集するだけでなく、プロパティを追加して編集することもできます。すべての編集はInSpec上でリロード時にも保存された状態で、編集作業を続けることができます。
プロパティを追加して編集
ここで紹介したのはInSpecできるごく一部の機能です。詳しくは、ドキュメントをご覧ください。
sponsors
