CSSとHTMLだけで作る立体的カードUI(Shadow DOM対応)

JavaScriptなしで、transform / perspective / layered shadowsCSSカスタムプロパティ だけで

“パッ”と目を引く3Dカードを作成してみましょう。

さらに Shadow DOM 内でも同じ見た目を再現できるよう、::part() と変数で拡張可能にします。


ゴール(できあがりイメージ)

  • マウスホバーでわずかに傾く3D表現

  • 斜めに流れるハイライト(きらめき)

  • ライト/ダークどちらでも映える配色

  • prefers-reduced-motion でアニメ控えめ

  • Shadow DOM対応::part() と CSS変数で外部からのテーマ変更OK

デモ:CSSとHTMLだけで作る3DカードUI

💡 マウスを乗せるとカードがわずかに傾き、立体的な効果が確認できます。


最小HTML(ライトDOM版) 

コアCSS(ライトDOM版) 


Shadow DOM に対応させる考え方

ポイントは 「パーツを切り出す」「CSS変数でテーマ化」
外側(ライトDOM)から Shadow DOM 内を直接スタイルできないため、コンポーネント作者が part を付与し、利用者は ::part() で装飾色や半径は CSS変数で調整します。

Web Component 側(作者向け:影DOM内のテンプレ)

※ここでは概念を示すための HTMLスケッチ です。実際の ShadowRoot 作成は JS が必要ですが、スタイル設計の指針としてご覧ください。

利用者側(外部)からのテーマ上書き例 

まとめ

  • 作者は Shadow DOM 内で CSS変数part名を定義

  • 利用者ホストへ変数指定し、必要なら ::part() でピンポイント調整


デザインバリエーション(クラス追加だけ)


アクセシビリティと実用Tips

  • ボタン/リンクのヒット領域は最低44×44pxを意識(paddingで確保)

  • prefers-reduced-motion に配慮(すでに対応)

  • コントラストoklchcolor-mix()で暗所・明所どちらも読みやすく

  • 画像のalt を適切に

  • フォールバック:古い環境では oklch が未対応 → 代替色を上書き可能に


よく使うCSSカスタムプロパティ(外から上書きOK)

変数名役割
--card-bg背景色#fff / #111
--card-fg文字色#111 / #eee
--card-accentCTAなどの強調色oklch(0.78 0.17 30)
--card-radius角丸12px / 20px
--card-shadow-1影レイヤ(近)0 1px 2px rgba(0,0,0,.2)
--card-shadow-2影レイヤ(遠)0 8px 24px rgba(0,0,0,.12)
--card-border境界線1px solid rgba(0,0,0,.06)
--card-tilt傾き(通常)rotateX(5deg) rotateY(-6deg)
--card-tilt-hover傾き(ホバー)rotateX(6.5deg) rotateY(-10deg)
--card-glossハイライトlinear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%)
--card-gloss-sizeハイライトサイズ200% 200%

トラブルシュート

  • 立体感が弱い--card-tilt と影(--card-shadow-2)を強める

  • グロスが強すぎる--card-gloss の不透明度を上げる(=白を薄く)

  • 画面酔いprefers-reduced-motion 環境で確認、もしくはカードに .is-outline を付与

  • Shadow DOM で色が変わらない → 変数は ホスト(custom element)側に定義しているか確認


まとめ

項目ポイント
3D表現transformとperspectiveで奥行きを演出
輝き::beforeのグラデとbackground-positionで流し込み
配色oklchとcolor-mixでライト/ダーク両対応
アクセシビリティprefers-reduced-motionと十分なヒット領域
Shadow DOM作者はpart公開&変数化/利用者は::part()と変数上書き
拡張クラス追加でelevated/glass/outlineを切替

【Windows 11】コマンドプロンプト起動時に全角入力になる問題を解決!ターミナル設定で半角英数に固定する方法

Windows 11で「cmd(コマンドプロンプト)」を開くと、なぜか最初から 全角入力(ひらがな)モード になってしまう──。
以前はIMEの詳細設定やレジストリ編集が必要でしたが、最新版(Windows 11 24H2以降)では、Windows ターミナルの設定から簡単に解決できます。

🖥️ 検証環境

  • OS:Windows 11 Pro 24H2

  • 構成:コマンドプロンプト(cmd.exe)を既定プロファイルとして使用

※上記環境では、「既定の IME 入力モード」をプロファイル単位で制御できます。


⚙️ 症状

  • コマンドプロンプトを開いてコマンド入力してみると「全角」入力モードになっていて、ん?と思うことがあります。

  • 半角/全角ボタンで半角入力モードには戻るが、コマンドプロンプト起動直後が全角入力モードという状態


🧭 原因

Windows 11では、入力モード(半角/全角)が アプリ単位で記憶される仕様になっています。
CMDが前回全角で閉じられた場合、次回も全角モードで開いてしまうことがあるのです。

しかし、新しいWindows ターミナル環境(v1.21以降) では、この初期状態をプロファイルごとに固定できるようになりました。


✅ 解決方法(最新版:Windows ターミナル設定でIMEモードを固定)

① Windows ターミナルを開く

  • スタートメニューで「cmd」または「Windows Terminal」を検索して起動します。

  • 上部タブで「コマンド プロンプト」を開きます。


② 設定を開く

  • 右上の「▼」アイコン → 「設定」をクリック
     またはショートカットキー Ctrl + ,(カンマ) でもOK。


③ 「スタートアップ」メニューを選択

左メニューから「スタートアップ」を開きます。


④ 「既定の IME 入力モード」を変更

  • 「既定の IME 入力モード」という項目があります。

  • ここをクリックして 「半角英数字(英語)」 を選択。

  • 最後に「保存」をクリック。


🧩 効果

これで、コマンドプロンプトを開いた瞬間に自動的に「A(半角英数)」モードでスタートします。
他のアプリ(メモ帳・ブラウザなど)のIMEには影響しません。


💬 旧環境(設定項目がない場合)

もしこの設定が表示されない場合は、
Windows ターミナルのバージョンが古いか、Windowsが22H2〜23H2世代の可能性があります。
その場合は以下のいずれかで対処可能です:

  • IMEの「アプリごとの入力モード設定」をオフ

  • PowerShellスクリプト/レジストリで EnablePerAppMode=0 を設定

(※旧環境向けの方法は別記事で解説予定)


🧊 まとめ

方法対応バージョン難易度備考
ターミナル設定Windows 11 24H2以降★☆☆(簡単)推奨
IME詳細設定~23H2★★☆旧UIで利用可
レジストリ変更全バージョン★★★管理者権限が必要

✨ 結論

🔹 今のWindows 11なら、コマンドプロンプトのIME初期状態はターミナルで設定するのが最も確実!
🔹 スクリプトもレジストリも不要。GUIで一発設定。

この新機能のおかげで、開発や管理作業のたびに「半角に戻す」手間はもう不要です。
環境が24H2以降なら、ぜひ設定しておきましょう。