Webツール

CSSデザイン解析

CSSの貼り付けやファイル読み込みから、配色・フォント・余白を整理。拡張機能なしで使えます。

このツールについて

CSSを貼り付けるか、.cssファイルを読み込んで、配色・文字・余白・装飾・レイアウトの宣言値を整理できます。拡張機能のインストールは不要です。まずはサンプルCSSですぐに試せます。

色、font-family・font-size・line-height、margin・padding・gap、角丸・影、幅・Grid・Flex、CSS変数、メディアクエリを一覧化します。値はブラウザが解釈した表記で整理し、remや%などの単位は保持します。

入力したCSSだけが対象です。URLからの自動取得、HTMLの表示、外部CSS・画像・フォントの読み込みは行いません。実際の表示面積、ページ構成、CSSの適用先や優先順位は判定しません。CSS変数・継承は解決せず、メディアクエリは成立条件にかかわらず集計します。

デザイントークンの棚卸しや配色・余白の整理に使えます。結果はMarkdownでコピーでき、同じタブ内でLP実装プロンプト作成へ引き継げます。

拡張機能は必要ですか？

不要です。CSSを貼り付けるかファイルを選ぶだけで、新しいバージョンの一般的なブラウザから利用できます。

WebサイトのURLから解析できますか？

URLからの自動取得には対応していません。手元のCSSを入力してください。HTMLやJavaScriptも実行しません。

CSSが正しいか検証できますか？

構文チェッカーではありません。ブラウザが解釈できる宣言だけを整理し、無効な宣言や未対応の構文は除外される場合があります。@import先は取得しません。

入力したCSSは保存されますか？

サーバーへ送信・保存しません。集計済み結果は同じタブ内の画面移動中だけ保持し、再読み込みやタブを閉じると消去します。

大きなCSSも解析できますか？

入力は200 KBまで、解析は最大2,000ルール、表示は各分類100種類までです。上限に達した場合は一部省略を表示するので、必要な部分に分割してください。

開発

サービスの内容やデザインの希望から、AIにLPを実装してもらうためのプロンプトを作成します。

ファイル

ファイル名・metadata・GPS・作者情報など、共有前に注意したい項目をまとめて確認できます。