CSS Grid ジェネレーター

メインコンテンツへ移動

このツールについて

固定列や自動調整のグリッドを実際の配置で確認し、CSS と HTML を生成できます。

デザイン

固定の列数か、最小列幅に応じた自動配置を選びます。行数・余白・配置・項目数を調整し、プレビュー幅で狭い画面も確認してください。CSS と HTML は個別にコピー・保存できます。

幅のスライダーはプレビューだけに影響します。固定グリッドは縦横 1～12、間隔 0～80 px、項目数 48 までです。生成コードは配置と基本寸法を含みます。内容に応じて装飾を追加してください。

HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。

デザイン

文字色と背景色の WCAG 2.2 コントラスト比を測定し、通常文字と大きな文字の適合状況を表示します。

デザイン

線形・放射状グラデーションを見ながら作成。色、位置、角度を調整して CSS をコピーできます。

デザイン

ずれ、ぼかし、広がり、色、不透明度を調整し、外側・内側の影を確認して CSS を取得できます。

デザイン

してディスカッションに参加してください。

コメントはまだありません。