フロントエンドとモバイル

HTML/CSS開発ツール

フロントエンドのマークアップとスタイルは見た目と構造の両面でつまずきます。レビューしにくい未整形のHTMLやCSS、手で書くより描いたほうが早いGridやFlexboxのレイアウト、詳細度を競い合う2つのセレクター、カスタムのイージング曲線が要るCSSトランジション。既存コードの整形と、手で書くのがつらい部分の生成に分かれています。

整形系ではCSS整形とチェック、HTMLコード整形とチェック、JavaScript・TypeScript整形が構文エラーを指摘します。レイアウトとビジュアル系では、CSS Grid / Flexレイアウト生成でコードをコピーでき、CSSグラデーションジェネレーターがその場でプレビューし、CSS詳細度計算ツールが:is()のスコアを比較します。

12個のツール

コードとマークアップの整形

レイアウトの構築と計算

ビジュアルCSSの生成

HTML / CSS Dev Toolsツールに関するFAQ

:is()がCSSの詳細度に思ったとおり反映されないのはなぜですか。

:is()と:where()は詳細度の扱いが異なり、:is()は引数の中で最も詳細度の高いものの値を取りますが、:where()は中身に関わらず常に0として扱われます。CSS詳細度計算ツールはセレクターのスコアを比較し、:is()と:where()がどう影響するかをそのまま示します。

デザインをCSS GridやFlexboxのレイアウトに変換するにはどうすればいいですか。

grid-template-columnsやflexのプロパティを記憶から書く代わりに、CSS Grid / Flexレイアウト生成でレイアウトを視覚的に描き、生成されたHTMLとCSSをそのままコピーできます。値を手で微調整するより速く正確に仕上がります。

カスタムのCSSイージング曲線を作る一番簡単な方法は何ですか。

cubic-bezier()のタイミング関数は4つの数値で定義されますが、曲線を見ないと形を想像しにくいものです。cubic-bezierジェネレーターはハンドルをドラッグして曲線を作り、結果のCSSアニメーションをプレビューしてからタイミング関数をコピーできます。