CSSを目で見て作る

誰もが試行錯誤で書く4つのCSSを、スタイルシートの中ではなくスライダーの上で試行錯誤できるようにしたものです。

ツールを読み込み中…

使い方

このページの処理はすべて、ブラウザのタブ内で動くコードが行います。ファイルはディスクからタブのメモリに読み込まれ、その場で変換され、ダウンロードとして書き出されます。当社にも第三者にも送信されません。

ブラウザの開発者ツール（F12）を開き、「ネットワーク」タブを選びます。
ファイルを読み込んでツールを実行します。
表示されるのは、ツール自身のコードの読み込みと、一部の重いツールでは公開CDNからのエンジン取得、それに loreatec.jp への小さなアクセス集計（ページのアドレスとタイトルだけ）です。あなたのファイルを運ぶ通信は1つもありません。

clamp()パネルは何を計算しているのですか？

直線の傾きです。「画面幅360pxで16px、1280pxで32px」と指定すると、clamp(16px, 8.3px + 2.17vw, 32px) を出力します。値は2つの幅の間でなめらかに変化し、両端で止まります。式は単純なのに誰も覚えていない — それがこのツールの存在理由です。

プリセットの影が自作の影よりきれいなのはなぜですか？

現実的な影は、直感よりも不透明度が低く、ぼかしが大きく、広がりがわずかに負だからです。プリセットにはその比率が入っています。0 0 5px black からではなく、プリセットから調整を始めてください。

有機的でいびつな角の形は作れますか？

「隅ごとに調整」にチェックを入れて4つの半径を別々に設定してください。対角の隅を大きくすると葉っぱ型になります。完全に有機的なブロブには2値構文の角丸が必要で、このパネルの範囲外です。ここにあるのは、実際に世に出る形です。

何か送信されますか？

されません。プレビューはスタイルを当てたただのdivです。ツールとして考えうる限り最も端末内で完結した処理です。