デザイン・CSS
box-shadow生成、グラスモーフィズム、CSSグリッド、流動タイポグラフィなど、フロントエンドのCSSデザインに特化したツールをまとめています。コピペで即使えるCSSを出力します。
色変換ツール
HEX・RGB・Unity Colorを相互変換。デザインツールとUnityの橋渡しに便利です。
px / rem 変換
px値とrem値を簡単に行き来できます。基準サイズもカスタマイズでき、CSSでの余白やフォント指定がスムーズに。
色のコントラストチェック
ふたつの色のコントラスト比を計算し、Webアクセシビリティの基準を満たしているか即座に判定します。
CSS グラデーション生成
線形・円形グラデーションを視覚的に調整しながら作成できます。完成したCSSはそのままコピー可能です。
CSS box-shadow 生成
要素の影（box-shadow）をプレビューを見ながらスライダーで作成。生成したCSSはコピー可能です。
Lorem Ipsum ダミーテキスト生成
デザインカンプやモックアップの確認に必要なダミーテキスト（Lorem Ipsum）を、分量を指定して生成します。
Fluid Typography 計算機
レスポンシブなフォントサイズ調整に便利なCSSの「clamp()」関数を、数値を入力するだけで自動計算します。
Aspect Ratio 計算機
指定した比率（16:9など）に合わせて、画像の幅や高さを自動で算出します。
Golden Ratio（黄金比）計算機
見栄えが良くなる「黄金比（おおよそ1:1.618）」を使って、要素のサイズや余白の数値を計算します。
Silver Ratio（白銀比）計算機
日本人に馴染み深い「白銀比（おおよそ1:1.414）」を使って、レイアウトやデザインの数値を算出します。
CSS Grid ジェネレーター
行数・列数・隙間（gap）を指定するだけで、複雑なCSS Gridのコードを簡単に生成できます。
Glassmorphism CSS 生成
スライダーでぼかしや透明度を調整し、流行の磨りガラス風デザイン（グラスモーフィズム）のCSSを生成します。
Line-height（行送り）計算
ピクセル単位の「行送り」を、CSSの「line-height（倍率）」へとサクッと変換計算します。
RGBA ↔ HEX 変換
透明度（アルファ値）を含んだRGBA形式とHEX形式の色コードを、相互に変換します。
Tailwind Color 検索
任意のカラーコードを入力すると、それに最も近いTailwind CSSのカラーパレット名を教えてくれます。
画像カラーピッカー（スポイトツール）
画像をアップロードしてクリックするだけで、その箇所のHEX・RGB・HSLカラーコードを取得できます。
ダミー画像ジェネレーター
幅・高さ・色・テキストを指定して、モックアップ用のダミー画像を即座に作成・ダウンロードできます。
画像リサイズ
画像を指定サイズにリサイズ。幅・高さ・縦横比維持。複数画像一括対応。
色の名前検索
HEXから色の名前を検索。red, blue等のCSS色名に変換。
← トップへ戻る | 学習ロードマップ | 用語集 | トップへ
よくある質問
- Q. デザイン・CSSのツールとは？
- デザイン・CSSに分類される無料オンラインツールの一覧です。ブラウザ内で完結するため、データ送信なしで安全にご利用いただけます。気軽に試してみてください。
- Q. 無料で使える？
- はい。すべてのツールは完全無料で、会員登録なしで利用できます。広告も最小限に抑えています。安心してご利用ください。
- Q. データはサーバーに送信される？
- いいえ。多くのツールはローカル処理で、入力データはサーバーに送信されません。機密情報を含むデータも、安心して扱っていただけます。
- Q. スマホでも使える？
- はい。レスポンシブ対応しているため、スマートフォンやタブレットからでも快適に利用できます。
- Q. オフラインでも使える？
- はい。一度アクセスするとPWAによりオフラインでもほとんどのツールが使えます。
- Q. box-shadowをGUIで設定したい
- box-shadow生成ツールでスライダーを動かすだけでCSSを生成できます。複数の影も設定可能です。
- Q. グラスモーフィズムのCSSを作りたい
- グラスモーフィズムツールで背景ブラー・不透明度・ボーダーを調整してリアルタイムプレビューしながらCSSを生成できます。