CSS

カラーコントラストチェッカー WCAG 2.1 — AA・AAA準拠チェック、ライブプレビュー、色覚シミュレーション付き ...

ベースカラーを選んでハーモニーモードを切り替えるだけで、色彩理論に基づいた美しい5色パレットを瞬時に生成します。色をロックして他の色だけを再生成したり、HEXコードをワンクリックでコピーできます。 ...

テキストを入力し、最大5つのカラーストップを設定して美しいグラデーション文字を生成。HTMLのインラインスパンタグまたはCSS background-clip グラデーションコードをコピーできます。 テキスト入力 こんにちは！Hello World! プレビューサイズ: 36px カラーストップ ＋ カラーストップを追加 スペースをスキップ（空白に色を付けない） 太字プレビュー リアルタイムプレビュー 出力コード HTML（インラインスパン） CSSグラデーション コードをコピー リセット コピーしました！ 事業の請求書・経費管理もかんたんに ...

コードなしで本格的なCSSボタンをビジュアル操作でデザイン。すべてのスタイルプロパティをリアルタイムで調整し、内蔵プリセットから選ぶか、完成したCSSとHTMLをワンクリックでコピーできます。 プリセット プライマリ セカンダリ アウトライン ゴースト グラデーション 3D ピル アイコン ボタンテキスト カラー 背景色 文字色 ボーダー色 サイズ・フォント フォントサイズ 16px パディング 横 20px パディング 縦 12px 角丸 (border-radius) 8px ボーダー ボーダー太さ 0px ボーダースタイル 実線 (solid) 破線 (dashed) 点線 (dotted) 二重線 (double) ボックスシャドウ 影 X 0px 影 Y 4px 影 ぼかし 14px 影 拡散 0px 影の色 影の透明度 30% ホバーエフェクト ホバー時の背景色 ホバーでスケール スケール倍率 1.05 ホバーで影を強調 トランジション時間 300ms ライブプレビュー ライト ダーク クリック CSS HTML コピー 使い方 プリセットを選ぶ — プライマリ、アウトライン、グラデーションなど8種類のプリセットからスタート。 コントロールで調整 — 色・サイズ・ボーダー・シャドウ・ホバーエフェクトをリアルタイムで変更。 プレビューテーマを切り替え — ライト・ダーク背景でボタンの見え方を確認。 CSSまたはHTMLをコピー — タブを切り替えて「コピー」をクリック。 プロジェクトに貼り付け — .my-button を自分のクラス名に変更して使用。 CSSプロパティ解説 プロパティ 役割 background-color ボタンの背景色 color テキストの色 font-size テキストサイズ（px） padding 内側の余白（縦 / 横） border-radius 角丸の半径。9999px でピル形状 border ボーダーの太さ・スタイル・色 box-shadow ドロップシャドウ・グロウシャドウ transition ホバーアニメーションの速度 transform: scale() ホバー時の拡大エフェクト プリセット一覧 プライマリ — インディゴの塗りつぶし、控えめなシャドウ セカンダリ — グレー系、シンプルなデザイン アウトライン — 透明背景、カラーのボーダーとテキスト ゴースト — ボーダーも背景もなし、ホバー時に背景色が出現 グラデーション — linear-gradient 背景、グロウシャドウ、スケールホバー 3D — 下方向の実線シャドウで立体感を演出 ピル — border-radius: 9999px の完全丸角 アイコンボタン — 等幅パディングのコンパクトな正方形ボタン アクセシビリティのポイント テキストと背景の コントラスト比は4.5:1以上 を維持する。 :focus-visible でフォーカスリングを明示し、キーボード操作に対応する。 モバイル向けにタップ領域は 44×44px以上 を確保する。 アクション用は <button>、ページ遷移用は <a> タグを使い分ける。 関連する無料ツール CSSボックスシャドウジェネレーター — 多層シャドウのビルドとプレビュー CSSグラデーションジェネレーター — リニア・ラジアル・コニックグラデーション CSSアニメーションジェネレーター — キーフレームアニメーションとイージング設定 freee会計で経理をもっとスマートに 請求書・経費・確定申告をAIが自動化。個人事業主から中小企業まで、freeeならバックオフィス業務を大幅に削減できます。まずは無料でお試しください。 ...

TailwindのユーティリティクラスをコピペするだけでTailwind推奨順序に自動整列。レイアウト→ポジション→サイズ→スペーシング→タイポグラフィ→背景→ボーダー→エフェクト→トランジション→インタラクションの順でキレイに並べ替えます。 関連ツール：CSS変数ジェネレーター · CSSメディアクエリジェネレーター ...

text-shadow CSSを即座に生成。複数のシャドウレイヤーを追加し、プリセットから選択、リアルタイムでプレビューしてワンクリックでCSSをコピーできます。 ライブプレビュー テキスト シャドウ テキスト： 文字色： サイズ： 48px 背景： プリセット シャドウレイヤー ＋ レイヤーを追加 生成されたCSS コピー ...

デザインや配色が色覚特性を持つ方にどう見えるか、8種類のシミュレーションで即確認。Webデザイン・UI・データビジュアライゼーションのアクセシビリティ改善に。 色を入力 + 色を追加（最大5色） シミュレーション実行 リセット シミュレーション結果 色はVienot/Brettelアルゴリズムによる近似値です。医学的な診断基準ではなく、視覚的な参考としてご利用ください。 アクセシビリティのヒント 色覚特性に配慮したデザインのポイント 色だけで情報を伝えない — ラベル・アイコン・パターンを併用する。 隣接する色のコントラスト比をWCAG AA基準（テキスト4.5:1以上）に保つ。 グラフやUIの主な区別に赤と緑の組み合わせだけを使わない。 データビジュアライゼーションにはOkabe-Ito・IBM Carbonなどのカラーブラインドフレンドリーパレットを使う。 色コードに加えてテクスチャやパターンをグラフに使用する。 色によって表現された情報には代替テキストを提供する。 実際にシミュレーターで確認してからリリースする習慣をつける。 色覚特性の統計 種類 説明 推定割合 デュータノピア (Deuteranopia)緑錐体なし（赤緑型）男性の約1% プロタノピア (Protanopia)赤錐体なし（赤緑型）男性の約1% デュータノマリー (Deuteranomaly)緑錐体がずれ（最多）男性の約5% プロタノマリー (Protanomaly)赤錐体がずれ男性の約1% トリタノピア (Tritanopia)青錐体なし（青黄型）約0.003% トリタノマリー (Tritanomaly)青錐体がずれ約0.01% アクロマトプシア (Achromatopsia)完全色盲約0.003% アクロマトマリー (Achromatomaly)色覚が著しく低下まれ 出典：Colour Blind Awareness。赤緑型はX染色体連鎖のため男性に多く、男性全体の約8%・女性の約0.5%が何らかの色覚特性を持つとされています。 ...

ポイントをドラッグして形を変える シェイプの頂点をドラッグして変形。右クリックで頂点を削除。ダブルクリックで頂点を追加。 プリセット プレビュー設定 シェイプ色 背景色 画像 画像をアップロード 画像を削除 CSS出力 clip-path: polygon(...); CSSをコピー polygon · 0点 プリセットに戻す 使い方 プリセットを選択 — 三角形・星・六角形など9種類から選べます。 白いコントロールポイントをドラッグ してシェイプを自由に変形。 ダブルクリック でキャンバス上に新しいポイントを追加。 右クリック でポイントを削除（最小3点）。 シェイプ色・背景色 を自由にカスタマイズ。 画像をアップロード して実際の写真でclip-pathを確認。 CSSをコピー して、スタイルシートにそのまま貼り付け。 clip-pathとは clip-pathはCSSプロパティで、要素の表示領域を多角形や円などの形に切り抜く機能です。最も柔軟な値はpolygon()で、パーセンテージ座標のリストを指定します。 ...

...

CSSボックスシャドウ ジェネレーター リアルタイム プレビュー プリセット + シャドウ レイヤーを追加 生成された CSS CSSをコピー Tailwind の対応クラス: — 関連ツール CSSグラデーションも作成 → CSSグラデーション ジェネレーター ...