Live CSS Editor

画面端に浮かぶCSSエディタ。書いたCSSをそのページにリアルタイム反映。

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