Item logo image for Live CSS Editor

Live CSS Editor

ExtensionDeveloper Tools
Item media 1 (screenshot) for Live CSS Editor

Overview

画面端に浮かぶ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

Details

  • Version
    0.1.0
  • Updated
    May 8, 2026
  • Offered by
    masayoshi.yukitani
  • Size
    90.64KiB
  • Languages
    日本語
  • Developer
    株式会社weblley
    中央区難波4丁目3−21 ZAナンバビル 4F 大阪市, 大阪府 542-0076 JP
    Email
    masayoshi.yukitani@weblley.com
    Phone
    +81 90-1962-7740
  • Trader
    This developer has identified itself as a trader per the definition from the European Union and committed to only offer products or services that comply with EU laws.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data. To learn more, see the developer’s privacy policy.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

For help with questions, suggestions, or problems, visit the developer's support site

Google apps