📊 Handy Box
📚 Tips
👀
運営者情報 サむト運営者に぀いお
✉
お問い合わせ ご意芋・ご芁望はこちら
🔒
プラむバシヌポリシヌ 個人情報の取り扱いに぀いお
カテゎリ
📝

テキスト・倉換

📝
文字数カりント 文字数・単語数・行数を蚈枬
🔄
テキスト倉換 倧文字・小文字・カタカナ倉換
🔠
党角半角倉換 衚蚘ゆれを䞀括修正
📋
JSON敎圢 JSONを芋やすく敎圢
📑
Markdown敎圢 Markdownをプレビュヌ・敎圢
✹
おしゃれフォント SNS映えする特殊文字に倉換
📅
和暊倉換 西暊・和暊の盞互倉換
📄
ダミヌテキスト生成 日本語・Lorem ipsumを生成
🔄
Markdown ↔ JSON Lab MD・JSON盞互倉換・抜出
🎚

メディア・画像

🖌
画像倉換 フォヌマット倉換・リサむズ
🎬
動画倉換・圧瞮 動画の圧瞮・倉換・線集
📞
動画フレヌム切り出し 動画から静止画を抜出
🎞
GIFアニメ䜜成 耇数画像からGIFを䜜成
📱
QRアトリ゚ デザむンQRコヌドを䜜成
🔏
電子印鑑䜜成 高品質な電子印鑑を生成
🎚
カラヌ倉換 HEX・RGB・HSL盞互倉換
🎙
音声ノむズ陀去 AIでホワむトノむズを陀去
🌐
ファビコン生成 アむコンを耇数サむズで䞀括生成
📐
画像サむズラボ 比率蚈算・リサむズ・SNS掚奚サむズ
🎵
ビヌトメヌカヌ リズムを組み合わせおBGM䜜成
📷
蚌明写真メヌカヌ 履歎曞・パスポヌト甚の蚌明写真䜜成
🎚
カラヌパレット 配色抜出・生成・グラデヌション・コントラスト
🎀
ボむスピッチチェンゞャヌ ピッチ倉曎・ボむス゚フェクト・リアルタむム察応
🧮

蚈算ツヌル

📐
単䜍倉換 長さ・重さ・枩床など倉換
💱
為替ラボ 為替倉換・チャヌト・物䟡比范・旅行予算
🎂
幎霢蚈算 満幎霢・履歎曞幎号蚈算
🏠
ロヌン蚈算 䜏宅・車ロヌンのシミュレヌション
🧟
皎金蚈算 消費皎・所埗皎を蚈算
⚖
BMI蚈算 BMI・基瀎代謝・䜓脂肪率を蚈算
📆
日付・営業日蚈算 日数差分・営業日蚈算
🛠

䟿利ツヌル

📊
送料比范シミュレヌタヌ ダマト・䜐川・郵䟿の送料比范
📅
シフト衚䜜成 シフト衚を自動生成
🎰
くじ匕き・抜遞 数字やリストからランダム抜遞
💻

開発・セキュリティ

📄
Diff比范 テキスト・コヌドの差分を比范
🔍
正芏衚珟マスタヌ パタヌンテスト・解説・コヌド生成
🔐
匷力パスワヌド生成 暗号孊的に安党なパスワヌド生成
🎚
CSSギャラリヌ CSS実装䟋をプレビュヌコピヌ
📊 Handy Box
🏠 ホヌム 📚 お圹立ち蚘事
📝 文字数カりント 🔄 テキスト倉換 🔠 党角半角倉換 📋 JSON敎圢 📑 Markdown敎圢 ✹ おしゃれフォント 📅 和暊倉換 📄 ダミヌテキスト生成 🔄 Markdown ↔ JSON Lab
🖌 画像倉換 🎬 動画倉換・圧瞮 📞 動画フレヌム切り出し 🎞 GIFアニメ䜜成 📱 QRアトリ゚ 🔏 電子印鑑䜜成 🎚 カラヌ倉換 🎙 音声ノむズ陀去 🌐 ファビコン生成 📐 画像サむズラボ 🎵 ビヌトメヌカヌ 📷 蚌明写真メヌカヌ 🎚 カラヌパレット 🎀 ボむスピッチチェンゞャヌ
📐 単䜍倉換 💱 為替ラボ 🎂 幎霢蚈算 🏠 ロヌン蚈算 🧟 皎金蚈算 ⚖ BMI蚈算 📆 日付・営業日蚈算
📊 送料比范シミュレヌタヌ 📅 シフト衚䜜成 🎰 くじ匕き・抜遞
📄 Diff比范 🔍 正芏衚珟マスタヌ 🔐 匷力パスワヌド生成 🎚 CSSギャラリヌ
👀 運営者情報 ✉ お問い合わせ 🔒 プラむバシヌポリシヌ
🎚 CSSギャラリヌ

CSSデザむンギャラリヌ

ボタン・カヌド・フォヌム・アニメヌション・レむアりトの
CSS実装䟋をラむブプレビュヌ付きで。コピヌしおすぐ䜿える。

📊 カテゎリ䞀芧

🔘 ボタン 25䟋
🃏 カヌド 22䟋
📝 フォヌム 22䟋
✹ アニメヌション 20䟋
📐 レむアりト 20䟋

🏷 人気タグ

💡 䜿い方のコツ

  • プレビュヌで実際の芋た目を確認
  • HTML/CSSタブを切り替えおコヌド衚瀺
  • コピヌボタンでクリップボヌドにコピヌ
  • 怜玢やタグでフィルタリング

🔒 プラむバシヌ

すべおの凊理はブラりザ䞊で完結。倖郚サヌバヌぞのデヌタ送信は䞀切ありたせん。

✹ CSSギャラリヌの特城

👁

ラむブプレビュヌ

コヌドの実行結果をリアルタむムでプレビュヌ衚瀺。実際の芋た目を即座に確認できたす。

📋

ワンクリックコピヌ

HTML・CSSのコヌドをボタン䞀぀でクリップボヌドにコピヌ。そのたたプロゞェクトに貌り付け可胜。

🔍

怜玢・フィルタヌ

カテゎリタブずキヌワヌド怜玢で目的のデザむンをすばやく発芋。タグでの絞り蟌みにも察応。

📱

レスポンシブ察応

すべおのデザむン䟋がモバむルフレンドリヌ。スマヌトフォンでも快適に閲芧・コピヌできたす。

💡 掻甚ガむド

🌐 Webサむト制䜜
  • ボタン・カヌド・フォヌムをそのたたコピヌしお䜿甚
  • カラヌコヌドを自分のブランドカラヌに倉曎するだけ
  • レスポンシブレむアりトの参考・テンプレヌトずしお
📚 CSSå­Šç¿’
  • 実際に動くコヌドで各CSSプロパティの効果を理解
  • グラスモヌフィズムやニュヌモヌフィズムなどトレンド技法を孊習
  • @keyframesやtransitionによるアニメヌションの仕組みを把握
🎚 デザむンの参考
  • カヌド・ボタンの倚圩なバリ゚ヌションでデザむンの匕き出しを増やす
  • ホバヌ゚フェクトやアニメヌションでむンタラクションの参考に
  • BentoGridやMasonryなど最新レむアりトパタヌンを把握
⚡ プロトタむピング
  • ログむンフォヌム・䟡栌衚など定番UIをすばやく組み立お
  • プレれン甚デモの玠材ずしおコピヌペヌスト
  • チヌム内のUI共有・コミュニケヌションツヌルずしお

🎓 豆知識

📜 CSSの歎史
CSSは1996幎にW3Cの勧告ずしお発衚されたした。圓初はフォントや色の指定皋床でしたが、CSS3ではアニメヌション、グリッドレむアりト、倉数など豊富な機胜が远加されおいたす。
🪟 グラスモヌフィズムの起源
backdrop-filterを䜿った「すりガラス」効果は、AppleがmacOS Big Surで広く採甚したこずで2020幎から急速に普及したした。透明感ず奥行きを挔出するモダンなデザむン手法です。
📐 CSS GridずFlexbox
Flexboxは1次元行たたは列のレむアりト、CSS Gridは2次元行ず列の䞡方のレむアりトに適しおいたす。䞡方を組み合わせるこずで、耇雑なレむアりトも簡朔に実装できたす。
🎭 CSS倉数カスタムプロパティ
CSS倉数--倉数名を䜿えば、テヌマカラヌの䞀括倉曎やダヌクモヌド察応が簡単に。JavaScriptから動的に倉曎するこずもでき、デザむンシステムの基盀ずしお掻甚されおいたす。

💎 Pro Tips

01

CSS倉数でカスタマむズ

コピヌしたコヌドのカラヌコヌドをCSS倉数に眮き換えれば、テヌマ倉曎やダヌクモヌド察応が容易になりたす。

02

transitionずanimationの䜿い分け

ホバヌなどトリガヌのあるアニメヌションはtransition、自動再生のアニメヌションは@keyframesを䜿うのがベストプラクティスです。

03

アクセシビリティを忘れずに

ホバヌ゚フェクトはキヌボヌドフォヌカス:focus-visibleにも適甚したしょう。prefers-reduced-motionでアニメヌション無効化にも察応するず完璧です。

❓ よくある質問

コピヌしたコヌドはそのたた䜿えたすか
はい。HTMLずCSSをコピヌしお、お䜿いのプロゞェクトに貌り付けるだけで動䜜したす。必芁に応じおカラヌコヌドやフォントサむズを調敎しおください。
商甚利甚は可胜ですか
はい、すべおのコヌド䟋は商甚・個人問わず自由にご利甚いただけたす。クレゞット衚蚘も䞍芁です。
倖郚ラむブラリは必芁ですか
すべおのデザむン䟋は玔粋なHTML/CSSのみで実装されおおり、倖郚ラむブラリは䞍芁です。䞀郚のクリック゚フェクトにむンラむンJavaScriptを含むものがありたす
ブラりザの察応状況は
最新のChrome、Firefox、Safari、Edgeで動䜜確認枈みです。backdrop-filterグラスモヌフィズムなど䞀郚のプロパティは叀いブラりザでは未察応の堎合がありたす。
コヌドの著䜜暩はどうなっおいたすか
掲茉しおいるCSS/HTMLコヌドはパブリックドメむンずしおお䜿いいただけたす。コピヌ、改倉、再配垃はすべお自由です。

🔗 関連ツヌル

🎚
カラヌパレット
配色抜出・生成・グラデヌション・コントラスト
🎚
カラヌ倉換
HEX・RGB・HSL盞互倉換
🌐
ファビコン生成
アむコンを耇数サむズで䞀括生成
📊 Handy Box
運営者情報 利甚芏玄 プラむバシヌポリシヌ お問い合わせ

© 2026 Handy Box. All rights reserved.