Live CSS Editor

About

Live CSS Editor は、どんなWebページでも画面右下に浮かぶフローティング窓からCSSを書いて、そのページに即座に反映できるChrome拡張機能です。Web制作者・デザイナー・学習者のための、気軽で強力な「ライブCSSエディタ」です。

■ 主な機能

◆ リアルタイムCSS適用
入力したCSSは即座にページに反映されます。ブラウザのDevToolsを開かなくても、気軽にCSSを試せます。

◆ シンタックスハイライト
CodeMirrorベースのエディタで、プロパティ・値・セレクタが色分けされて見やすく表示されます。

◆ CSS補完機能
Ctrl + Space（Mac: Cmd + Space）または入力中の自動補完で、CSSプロパティや値の候補が表示されます。プロパティ名を覚えていなくても大丈夫です。

◆ ワンクリックコピー
書いたCSSは「Copy」ボタン一つでクリップボードにコピー。そのままプロジェクトのCSSファイルに貼り付けて利用できます。

◆ 自由なウィンドウ操作
タイトルバーをドラッグして好きな位置に移動、右下をドラッグしてサイズ変更が可能です。

◆ ページと干渉しないiframe設計
エディタUIはiframe内で独立して動作するため、閲覧中のページのスタイルと干渉しません。

■ 使い方

1. 拡張機能アイコンをクリックでエディタ表示 / 非表示を切り替え
2. エディタにCSSを書くと、そのページに即反映
3. 「📋 Copy」でCSSをコピー、「🗑」でクリア、「✕」で閉じる

■ こんな方におすすめ

・Web制作のコーディング中、素早くスタイルを試したい方
・CSS学習中で、実際のサイトで練習したい方
・DevToolsの「Styles」パネルでは窮屈に感じる方
・デザイン案を既存サイトの上で試したい方

■ プライバシー

本拡張機能は、ユーザーが入力したCSSをローカルで処理するのみで、いかなる情報も外部に送信・収集しません。オープンソースで動作が確認できます。

■ ライセンス

MIT License