すべてのツール
デザイン・CSS
色、コントラスト、グラデーション、CSS値を作成・調整するデザインツールです。見た目をプレビューしながら必要なコードをコピーできます。
利用可能なツール：8個
- CSSボックスシャドウ生成オフセット、ぼかし、広がり、色、不透明度、内側シャドウを視覚的に調整し、重ねたCSS box-shadowを作成します。
- HTML・CSS・JavaScriptコードプレイグラウンドHTML、CSS、JavaScriptを編集し、サンドボックス化したiframeのプレビューとコンソールを確認して、単体HTMLをダウンロードします。
- WCAGカラーコントラスト確認前景色と背景色のHEXからWCAG 2.xのコントラスト比を計算し、通常・大きな文字のAA・AAA適合を確認します。
- カラーピッカー | 画像・画面から色を取得HEX、RGB、HSLを相互変換し、アップロード・貼り付け画像のピクセルや対応ブラウザの画面から色を取得します。
- CSS cubic-bezierイージング生成2つの制御点をドラッグしてCSSアニメーションやトランジションのcubic-bezier曲線を作り、動きをプレビューします。
- 文字・絵文字・画像のfavicon PNG生成文字、絵文字、画像から形付きアイコンを作り、ブラウザ、Apple、Android、PWA向けの6サイズのPNGを保存します。
- 線形・放射CSSグラデーション生成線形・放射グラデーションの方向、形、カラーストップ、位置を視覚的に編集し、background CSSをコピーします。
- ブラウザJavaScript実行・コンソールJavaScriptを別のWeb Workerで実行し、コンソール出力、最後の式、エラー、実行時間を確認します。