CSS影絵・ドット陰影ジェネレーター

CSS影絵・ドット陰影ジェネレーターは，8×8，16×16，32×32の正方形グリッドを編集し，色を設定した各マスをCSSのbox-shadowへ変換します．初期状態は16×16の空のグリッドです．サイズ選択を変更すると，編集中のドットは消去され，新しい大きさの空グリッドへ切り替わります．

作業途中の絵を自動で拡大・縮小したり，別のサイズへ引き継いだりする機能ではないため，変更前に必要なコードをコピーしてください．

描画道具はブラシと消しゴムの2種類です．ブラシでは選択中の色をセルへ設定し，消しゴムではそのセルの色を削除します．初期色は赤系の「#ef4444」で，ブラウザのカラーピッカーから別の色を選べます．グリッドを空に戻すときはリセットを使います．元に戻す・やり直す履歴やレイヤーはなく，リセットした内容も画面内には保存されません．

セルの操作にはPointer Eventsを使い，マウスの左ボタン，タッチ，ペンでの入力を同じ描画処理へ渡します．最初のセルを押すと描画を開始し，グリッド上を移動する間はポインター直下のセルを調べて連続して色を設定または削除します．同じセルの上で動き続けた場合は重複更新を避け，ポインターを離すか操作が中断されると描画状態を終了します．

タッチ操作とページスクロールが競合しないよう，グリッド内では標準のタッチ動作を抑えています．端末やブラウザによって操作感が異なる場合は，セルを1つずつタップして編集できます．キーボードだけで各セルを塗る専用操作は用意していないため，ポインター操作が必要です．

色選びには，任意色を指定するカラーピッカーに加え，4つの固定パレットがあります．「レトロゲーム」「パステル」「ネオン」「モノクロ」に各8色，合計32色です．パレットの色を押すとその色が選択され，道具もブラシへ切り替わります．パレット同士の色調和を自動判定したり，画像から代表色を抽出してパレットへ登録したりする機能はありません．

すぐに変換結果を試せるサンプルは3件です．「レトロなハート」は8×8，「ドットキノコ」は16×16，「インベーダー」は8×8の座標と色を持っています．プリセットを選ぶと，グリッドサイズと全ドットがサンプルの内容へ置き換わります．現在の絵へ重ねて追加する処理ではないため，編集中の内容を残したい場合は先に出力コードをコピーします．

プリセット読込後も，各セルの色は通常のブラシと消しゴムで変更できます．カラーピッカーや32色の固定色を使って一部を塗り替え，1ドットの大きさを調整してからコードを取得できます．サンプルはbox-shadowによる表現と編集手順を確認するための出発点であり，テンプレート一覧やユーザー作品の保存領域ではありません．

グリッド内のデータは，「X座標,Y座標」をキー，6桁HEX等の選択色を値とする組み合わせとして保持します．左上が0,0で，右へ進むとX，下へ進むとYが増えます．この座標は編集画面のセル位置と出力するbox-shadowの距離を結び付けるために使われます．

「画像ファイルを選択」から画像を読み込むと，その時点で選択している8×8，16×16，32×32のいずれかへ変換します．ファイルはFileReaderでData URLとして読み，ブラウザが画像としてデコードできた場合に，一時的に作ったCanvasへグリッドと同じ幅・高さで描画します．

Canvasの補間は無効にしていますが，元画像の縦横比を保つ余白追加や切り抜き位置の選択は行わず，正方形へ合わせて描画します．

描画後は各画素のRGBA値を調べます．alpha値が50以下の画素は空のセルとして除外し，50を超える画素はRGBの各値を2桁ずつ並べた不透明な6桁HEXカラーへ変換します．たとえばRGBが239・68・68なら「#ef4444」です．元画像のalpha値はコードへ残らないため，薄い半透明部分も閾値を超えれば不透明になります．

グラデーションや細部も最大32×32へ減るため，写真を忠実に保存する用途ではありません．

対応形式はブラウザがデコードできる画像に依存します．ファイル読込，画像デコード，Canvasの準備や画素取得に失敗した場合は，画面にエラーを表示します．処理の成否にかかわらずファイル選択を戻すため，同じ画像も選び直せます．変換が成功すると既存のグリッド内容は画像由来の色へ置き換わり，自動で元に戻す履歴は残りません．

この機能が作るのは画像ファイルそのものではなく，後段のbox-shadow生成に使うセルの集合です．PNGやSVGへの変換，画像のダウンロード，背景除去，輪郭抽出，減色数の指定，ディザリング，トリミングは行いません．必要な構図や色数に近づけたい場合は，入力前に画像編集ツールで調整するか，変換後のセルを手作業で修正します．

色が設定されたセルは，まずY座標の小さい行から大きい行へ，同じ行ではX座標の小さい列から大きい列へ並べます．この順序は生成コードをグリッドの左上から追いやすくするためのもので，色の圧縮や描画負荷の最適化ではありません．透明なセルはデータに存在しないため，box-shadowの項も作りません．

「ドット解像度」は1〜30pxで，1ドットの幅・高さと隣の座標までの間隔に使います．座標がX=2，Y=3，スケールが10px，色が#ef4444なら，水平距離は2×10の20px，垂直距離は3×10の30pxです．このセルは「20px 30px #ef4444」という1つの影になります．ぼかし半径，広がり半径，insetは追加しません．

すべての影をカンマと改行で連結し，単一のbox-shadow値を作ります．基準となるdiv自体も左上の1ドットに相当するため，0,0の色は「0px 0px 色」という影として重なります．各ドットの色は個別の項へそのまま入り，同色セルの範囲化，3桁HEXへの短縮，宣言の圧縮，最小化版の生成は行いません．

スケールを変更すると，divのwidthとheight，および全box-shadow座標を同じ値から再計算します．そのため，ツール上ではドットの比率を保ったまま全体の大きさを変更できます．コピー後に数値を手で変更する場合も，基準要素の幅・高さと各X・Y座標を同じ比率で揃えなければ，ドットが重なったり隙間ができたりします．

出力は，style属性を持つ1つのdiv要素です．styleには「display: inline-block」，スケールと同じwidthとheight，透明なbackground，複数項を持つbox-shadowが入ります．完全なHTML文書，styleタグ，CSSクラス，外部スタイルシート，Reactコンポーネントは生成しません．

グリッドが空のときは，描画を促すコメントだけを表示し，コピーボタンを無効にします．

画面内のプレビューは，生成したbox-shadowをブラウザに実際に描画させたものです．確認欄に収めるため，プレビュー側だけで基準要素の表示位置を移動しています．この位置調整はコピーするコードには含まれません．貼り付け先では影が基準要素の右および下へ広がるので，周囲の余白，配置，はみ出し，親要素のoverflow等を用途に合わせて指定してください．

「HTMLをコピー」を押すと，表示中のコード全体をClipboard APIへ渡します．書き込みが成功した場合だけ「コピー完了」を約2秒表示します．ブラウザの権限や実行環境により失敗した場合は，コード欄を手動で選択してコピーする案内を表示します．ファイルとしての保存，コピー履歴，コードの自動挿入はありません．

出力されたコードを貼り付ける前に，対象ページの背景色とコントラスト，必要な表示領域，レスポンシブ時の大きさを確認してください．インラインstyleを禁止するContent Security Policyや，サイト側のCSSによる配置の影響も受けます．本ツールは貼り付け先のHTML・CSS全体を検査せず，組み込み後の表示を保証するものではありません．

32×32の全セルを塗ると，最大1024個のbox-shadow項が1つのstyle属性へ並びます．ドット数が増えるほどコードは長くなり，ブラウザが描画する影の数も増えます．単一要素で表現できることと，あらゆる環境で軽量・高速に描画できることは同じではありません．実際に使うページや対象端末で表示と操作への影響を確認し，必要ならグリッドを小さくするか色を付けるセル数を減らします．

画像変換は，元画像を正方形の最大32マスへ縮小し，alpha閾値を適用して不透明色へ置き換えます．写真の細部，滑らかな輪郭，半透明，元の縦横比を保持する画像変換ではありません．ドット絵として読み取れるかをプレビューで確認し，不要なセルの消去や色の置換を行ってからコードをコピーしてください．

出力対象は単一divのインラインstyleだけです．PNG，JPEG，WebP，SVG，GIF等の画像出力，アニメーション，レイヤー，undo・redo，作品の保存と読込，CSSの圧縮，クラス名の生成には対応していません．複数ページで再利用する場合は，取得した値を自分でCSSクラスへ移すなど，プロジェクトの管理方法に合わせた編集が必要です．

元画像や参考作品を変換して公開する場合，ツールが利用許諾や権利関係を判定することはできません．素材の利用条件，商標・著作権，公開先の規約を利用者自身で確認してください．生成コードについても，表示品質，ブラウザ互換性，商用利用の可否を一律に保証するものではありません．機能の範囲と制限を理解し，コピー後のコードをテストした上で利用します．