Category
CSSの無料Webツール
30 個のCSS関連ツールを無料公開中。
グラデーション・Flexbox・Grid・アニメーション・box-shadow・clip-path など、CSSをGUIやスライダーで組み立てて即コード生成できる無料ツール集です。プレビューを見ながら調整でき、コピーしてそのまま使えます。
広告
CSS Scroll Snap Generator
scroll-snap-type / align / padding をGUIで設定・リアルタイムプレビュー
CSSデザイン開発者向け
使ってみる →
関連ガイド
読みにくいHTMLを解読する手順 — 整形・構造把握・要素の特定
1行にまとまったHTMLや自動生成されたページを解読する手順を、整形→構造の把握→要素の特定→データ抽出の流れで解説します。整形で表示が変わってしまう落とし穴と、その回避方法も整理します。
HTMLやXMLから必要なデータを抜き出す手順 — XPath・セレクタ・JSON化
HTMLやXMLから目的のデータを取り出す手順を、構造の把握→XPathでの抽出→CSSセレクタとの使い分け→JSON化の流れで解説します。名前空間やJavaScript生成コンテンツといった、つまずきやすい点も整理します。
配色をコードに落とす手順 — 形式変換・階調生成・トークン化
決めた配色を実装に落とす手順を、形式の変換→階調の生成→トークンとしての整理→コントラスト確認の流れで解説します。色名の付け方や、ダークモードを見据えた設計も整理します。