学習ツール一覧

Flexboxビジュアライザー

justify-content・align-items など5つのプロパティをボタン1つで切り替えてレイアウト変化をリアルタイム確認。

CSSグリッド ビジュアライザー

grid-template-columnsやgapをボタンで切り替えてグリッドレイアウトの変化をリアルタイム確認。

CSS Positionビジュアライザー

static/relative/absolute/fixed/stickyを切り替えてtop・left・bottom・rightの変化を視覚的に確認

CSS Transform ビジュアライザー

translate・rotate・scale・skewをスライダーで操作。transform-originも3×3グリッドで切替可能。

CSS clip-path ビジュアライザー

スライダーで円・三角・星など自由な形を作れるCSS clip-pathビジュアライザー。多角形の頂点編集とCSSコピーが無料でできる。

CSS aspect-ratio ビジュアライザー

aspect-ratioをスライダーで変えてプレビューに即反映。16:9・1:1など8種のプリセット付き。

Border Radius ジェネレーター

スライダーで4角の角丸を自由に設定。楕円形・ピル・非対称も作れる中高生向けCSS border-radius無料ジェネレーター。

box-shadowジェネレーター

スライダーで影を自在に調整。複数の影を重ねてリッチなエフェクトを作ろう

グラデーションジェネレーター

linear-gradientをビジュアルに作成。プリセット10種収録

CSS Filter プレイグラウンド

スライダーで blur・明るさ・セピアなど9種のCSSフィルターをリアルタイム調整。Instagram風加工をCSSだけで体験。

CSS Animationビジュアライザー

@keyframesの5種アニメーションをplay/pauseで確認。duration・fill-modeなど6プロパティをスライダーで調整

CSS Transitionビジュアライザー

duration・timing-function・delayをスライダーで調整してホバーエフェクトを確認

Cubic Bezier エディター

コントロールポイントをドラッグして cubic-bezier() をカスタマイズ。プリセット8種・アニメプレビュー付き。

CSS単位コンバーター

px・rem・vw など6単位を即変換。コピーしてそのまま使える。

CSS Variables プレイグラウンド

6つのカスタムプロパティをリアルタイム編集。var()の便利さをカードUIで即体感できる。

CSS Specificity 計算機

CSSセレクタの詳細度を即計算・比較。どのスタイルが勝つか一目でわかる。初学者向け無料CSS specificity計算機。

CSS Selector ビジュアライザー

セレクタを入力するとマッチする要素がリアルタイムでハイライト。specificity表示付き。

CSS calc() プレイグラウンド

calc()式をリアルタイムプレビュー。コンテナ幅スライダーで単位混在計算の便利さを体感。8種プリセット付き。

配色パレットジェネレーター

1色選ぶだけで補色・アナログ色など5色の調和した配色パレットを自動生成。CSS変数コードをコピーして使おう。

カラーフォーマット コンバーター

HEX・RGB・HSL・OKLCHをリアルタイム相互変換。透明度・カラーピッカー対応。

カラーコントラストチェッカー

テキストと背景色のWCAGコントラスト比を即チェック。AA/AAA判定と改善提案付き。

アクセシビリティ チェッカー

HTMLを貼るだけでalt欠落・空ボタン・label不足など10種の問題を即チェック。修正提案付き。

console.logシミュレーター

JavaScriptのconsole.logをその場で確認。開発者ツール不要

イベント体験プレイグラウンド

addEventListener の動作をその場で確認。8種のDOMイベントを体験

Async/Promise タイムライン

async/awaitとPromiseの実行順をタイムラインで視覚化。非同期処理の流れを動かして学べる。

JS Array メソッド プレイグラウンド

map・filter・reduceなど7種の配列メソッドを動かして確認。コールバックの動きを段階アニメで体感。

JS 文字列メソッド プレイグラウンド

slice・split・replaceなど15種の文字列メソッドを即体験。引数を変えて結果をリアルタイム確認。

JS Hoisting / Scope ビジュアライザー

var・let・constの巻き上げとスコープをステップ実行で可視化。TDZ・ブロックスコープの仕組みがわかる。

DOM サンドボックス

DOM操作を動かして確認。querySelector・classList・イベントを手を動かして学べる無料JavaScriptサンドボックス。

JWT デコーダー

JWTをHeader・Payload・Signatureに分解して可視化。exp期限判定・クレーム解説付き。

正規表現ビジュアライザー

RegExpパターンを入力するとマッチ箇所をリアルタイムハイライト

正規表現テスター

パターンをリアルタイムテスト・置換。電話番号・メール・URLなど8種プリセット付き。

JSON フォーマッター

JSONを即整形・圧縮・検証。シンタックスハイライトとエラー行表示で構文ミスを素早く発見できる。

Base64 エンコーダー/デコーダー

テキスト・日本語・画像をBase64に変換／復元。URL-safe切替・画像data URL生成対応。

URL エンコーダー / デコーダー

%XXエンコードを即変換。encodeURIComponent/encodeURIの違いも学べる。クエリストリング解析付き。

Diff ビューアー

テキスト・コードの差分を並列/統合/行単位/文字単位で表示。LCSアルゴリズムで正確な差分計算。プリセット4種付き。

Unix タイムスタンプ変換

タイムスタンプと日時を即変換。秒・ミリ秒を自動判別してISO/日本語など5形式で同時表示。API学習に。

Markdown プレビュー

Markdownをリアルタイムプレビュー。書きながら結果確認。README・ブログ記事作成に使える。

QRコードジェネレーター

URLや文字をQRコードに変換。PNG・SVGでダウンロード可能。文化祭・ポートフォリオ・連絡先共有に。

Lorem Ipsum ジェネレーター

Lorem ipsum・日本語ダミー文章を即生成。段落数・形式（p/ul/h2）を選んでHTMLコピー。

HTMLフォームビルダー

フィールドを追加してフォームを組み立て、セマンティックHTMLを即コピー。

HTMLタグ可視化ツール

HTMLの入れ子構造をツリー表示。閉じタグ忘れも自動検出

エラー診断ツール

エラーメッセージを貼り付けると原因と直し方を325件のデータから即診断