HTML ミニファイアー

高速 HTML ミニファイアーでページの読み込み速度を最適化する

最新の Web ブラウザが Web ページをリクエストすると、Web サーバーは構造、レイアウト、スタイルの指示を含むドキュメントで応答します。開発者は、読みやすいアーキテクチャを構築するために、広い構造インデント、広範な改行、コード コメント、およびファイル内の詳細なドキュメントに依存しますが、コンパイラーとクライアント ブラウザーは、これらの人間中心の詳細を必要としません。実際、すべての空白行、スペース、タブレータ、および HTML/CSS コメントは、追加のオーバーヘッド バイトとしてカウントされます。複雑な Web プラットフォームの場合、これらの小さな書式設定要素が蓄積してファイル サイズが 10% ～ 30% 肥大化する可能性があり、これにより読み込み時間が遅くなり、Core Web Vitals が低下します。

ここでHTML ミニファイアが登場します。私たちのツールはマークアップを解析し、コードのレンダリング動作を変更することなく、重要でない文字を取り除きます。 HTML ドキュメントの構造を圧縮すると、最初のバイトまでの時間 (TTFB) が大幅に改善され、最初のレンダリング フェーズが高速化され、全体的な読み込み速度が向上します。

内部パイプラインを理解する: HTML ファイルをオンラインで安全に圧縮する方法

HTML の縮小に関する主な課題は、プロセスによってスペースに依存する要素が破壊されないようにすることです。たとえば、段落、コード リスト、入力領域、事前にフォーマットされたブロックを適切にレンダリングするには、正確な空白レイアウトが必要です。ミニファイアが

、、または </code> などのタグ内のスペースを盲目的に折りたたむと、ユーザーに表示されるテキストの書式設定が破壊されます。</p><p>この問題を回避するために、私たちのツールは安全な処理パイプラインを実装しています。</p><p>この複数ステップのアプローチにより、可能な限り最高の圧縮率を達成しながら、ビジュアル コンテンツ、インタラクティブな要素、フォームが完全に機能することが保証されます。</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">高度な最適化: スクリプトとスタイルシートをきめ細かく制御</h3><p>最新の Web テンプレートのほとんどには、生の HTML 構造、埋め込みスタイル、インライン スクリプト タグが混在しています。このツールを使用して<strong>オンラインで HTML を縮小</strong>すると、各圧縮段階を個別に制御できます。</p><ul class="list-disc list-inside space-y-2"> <li><strong>空白を折りたたむ</strong>: レイアウト ドキュメント全体の余分なスペース、改行、インデントを折りたたみます。</li><li><strong>コメントを削除</strong>: すべての HTML コメントを削除します。開発者はレイアウトのネストについてメモを残すことがよくありますが、これにより運用資産に不必要な重みが追加されます。これらのコメントを削除すると、クライアント側のコードがクリーンでプロフェッショナルな状態に保たれます。</li><li><strong>インライン JS の縮小</strong>: 安全なコメント除去アルゴリズムを使用して、インラインの開発者ノートと改行を <code><script></code> タグから削除し、JS ペイロード サイズを削減します。</li><li><strong>インライン CSS を縮小</strong>: CSS コメント、中括弧の周囲の余分なスペース、閉じ括弧の前の不要なセミコロンを削除して、インライン スタイルを圧縮します。</li> </ul><p>これら 4 つのトグルを使用すると、実稼働コード、テンプレート、または生のスニペットを準備しているかどうかにかかわらず、ワークスペースの要件に合わせて縮小プロセスをカスタマイズできます。</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">圧縮のトレードオフとエッジケースの評価</h3><p>HTML を縮小すると明らかなパフォーマンス上のメリットが得られますが、複雑なプロジェクト向けにツールをいつどのように構成するかを理解することが重要です。たとえば、サーバーサイド レンダリング (SSR) フレームワークや、PHP、JSP、Jinja などのテンプレート エンジンを使用する場合、テンプレートには特別な構文マーカー (括弧構文を含むタグなど) が含まれます。これらの構文コンポーネントを含む生のテンプレートを縮小すると、サーバー エンジンによってスペース ルールが厳密に適用されている場合、解析の問題が発生したり、視覚的なバグが発生したりすることがあります。このようなシナリオでは、ソース テンプレート コードではなく、最終的に生成された静的 HTML 出力に対してミニファイアーを実行することを強くお勧めします。さらに、HTML ファイル内でインライン CSS スタイルを使用する場合、ブラウザーのレイアウト エンジンがカスタム ハックを解析するために特定のスペースを必要とする場合があります。圧縮後にスタイルの異常に気付いた場合は、インライン CSS 縮小オプションをオフにして、スタイルシートの書式設定が問題の原因であるかどうかを確認します。個々の切り替えオプションを試してみることで、積極的なファイル サイズの削減とコードベースの安定性の間の完璧なバランスを実現できます。</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">クライアント側の実行: 100% 安全かつプライベート</h3><p>オンライン開発ユーティリティを使用する場合、データのプライバシーは大きな懸念事項になります。多くの Web ツールはコード ペイロードをリモート サーバーにアップロードして処理しますが、これにより機密性の高い API エンドポイント、構成キー、データベース スキーマ、または独自のテンプレートがサードパーティ サーバーに公開される危険があります。</p><p>すべての操作をクライアント側で実行することでセキュリティを優先します。私たちのツールは完全にローカルブラウザのサンドボックスで実行されます。 HTML 縮小アルゴリズム、書式設定ロジック、および構文の強調表示は、DOM 内のローカル JavaScript ループとして実行されます。データは外部サーバーに送信されないため、実稼働前テンプレート、内部フォーム、およびコードセグメントは完全にプライベートのままになります。</p> </div> <!-- FAQ Sidebar --> <div class="space-y-6"> <h2 class="text-lg font-bold tracking-tight text-[#171717] dark:text-white font-sans"> よくある質問 </h2> <div class="space-y-4"> <div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">HTML コードを縮小する必要があるのはなぜですか?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">縮小化では、複数のスペース、改行文字、タブ インデント、コード コメントなどの不要な文字を削除して、HTML ファイルのサイズを削減します。 Web サーバーまたはコンテンツ配信ネットワーク (CDN) からブラウザーに送信される全体的なペイロードを減らすことで、ページの読み込み速度が向上します。これは、最初のバイトまでの時間 (TTFB) の短縮、最大コンテンツフル ペイント (LCP) などのペイント マイルストーンの高速化、モバイル ユーザーの帯域幅消費量の削減、検索エンジン最適化 (SEO) アルゴリズムに対する全体的なポジティブなシグナルに直接つながります。</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">この HTML ミニファイアーはデータのプライバシーを侵害しますか?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">いいえ、ソースコードは完全に安全です。この HTML 縮小ユーティリティは、コード全体を Web ブラウザ内で処理します。 HTML 構造、インライン スクリプト、スタイル、構成データはリモート サーバーや外部エンドポイントにアップロードされません。すべての処理は JavaScript を使用してクライアント側で実行されるため、データ漏洩や追跡を心配することなく、企業 Web ポータル、運用前テンプレート、または内部 API を含むページで安全に使用できます。</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">HTML の縮小により、インライン JavaScript または CSS スタイルが破壊される可能性がありますか?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">一般に、構文が有効であれば、標準の縮小化はインライン コードを分割しません。当社の HTML ミニファイアーは、インライン JavaScript とインライン CSS 用の個別のトグル構成を備えています。有効にすると、構文の整合性を維持しながら、スクリプトおよびスタイル タグ内で軽い空白の折りたたみとコメントの削除が適用されます。プロジェクトで複雑なテンプレート構文または厳密なスクリプト スクリプトを使用している場合は、インライン JS または CSS 縮小化を無効にして、これらのセクションを記述されたとおりに保持することができます。</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">このツールは、フォーマット済みのテキストとコード ブロックをどのように保護しますか?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed"><pre>、<code>、<textarea> などの要素内のコード ブロックは、リテラルの空白文字に依存してコンテンツを正しくフォーマットします。これらのタグ内のスペースを折りたたむと、コードのプレゼンテーションが壊れます。これを防ぐために、当社の処理エンジンはこれらのブロックを抽出し、圧縮前に固有の一時プレースホルダーに置き換えます。外側の HTML レイアウトが縮小されると、プレースホルダーは元の未変更のコード ブロックに置き換えられ、その書式設定が維持されます。</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">HTML 圧縮と Gzip 圧縮の違いは何ですか?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">HTML 縮小化は、冗長なテキスト文字 (開発者コメント、タブ区切り、余分なスペースなど) をソース コードから直接削除する、ビルド時またはプロセス時の最適化です。 Gzip (または Brotli) 圧縮は、HTTP 経由で送信する前に、辞書ベースのアルゴリズムを使用してテキスト ペイロードを圧縮する、サーバー側のランタイム圧縮アルゴリズムです。これら 2 つの方法は補完的です。 HTML を縮小すると無駄なトークンが削除され、その結果得られる合理化されたコードが Gzip によって圧縮され、読み込み速度が最大化されます。</p> </div> </div> </div> </div> </div> </main> <script id="ui-translations" type="application/json">{"Input HTML":"HTMLの入力","Sample":"サンプル","Clear":"クリア","Collapse Whitespace":"空白を折りたたむ","Remove Comments":"コメントの削除","Minify Inline JS":"インライン JS を縮小する","Minify Inline CSS":"インライン CSS を縮小する","0 chars":"0文字","Minify HTML":"HTML を縮小する","Minified Output":"縮小された出力","Copy":"コピー","Download":"ダウンロード","Output will appear here…":"ここに出力が表示されます…","Copied!":"コピーしました！","Paste your HTML code here…":"ここに HTML コードを貼り付けてください…","Copied to clipboard!":"クリップボードにコピーされました!","Copy failed — try Ctrl+C":"コピーに失敗しました - Ctrl+C を試してください","Minified HTML file downloaded!":"縮小された HTML ファイルがダウンロードされました。","Failed to process":"処理に失敗しました","{0} char{1}":"{0} 文字{1}","{0} chars":"{0} 文字","{0} chars · {1}{2}% size reduction":"{0} 文字 · {1}{2}% サイズ削減","<span class=\"text-red-500 font-semibold\">✗ Minification Error</span>\\n\\n<span class=\"text-red-400\">{0}</span>":"<span class=\"text-red-500 font-semibold\">✗ 縮小エラー</span>\\n\\n<span class=\"text-red-400\">{0}</span>"}</script> <footer class="w-full border-t border-[#ebebeb] bg-white dark:border-[#1f1f1f] dark:bg-[#000000] transition-colors duration-200"> <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16"> <div class="xl:grid xl:grid-cols-4 xl:gap-8"> <!-- Brand description --> <div class="space-y-4 xl:col-span-1"> <a href="/ja/" class="flex items-center"> <!-- Transparent logo — works on both light & dark --> <img src="/logo-transparent.png" alt="say.tools logo" class="h-[48px] md:h-[96px] w-auto"> </a> <p class="text-sm text-[#4d4d4d] dark:text-[#888] max-w-xs"> 高速、無料、安全なウェブユーティリティツールのための究極の目的地。最大限のプライバシーのために完全にクライアントサイドで構築されています。 </p> <div class="flex items-center gap-2 pt-2"> <span class="w-2 h-2 rounded-full bg-green-400 block flex-shrink-0"></span> <span class="text-xs font-mono text-[#888]">すべてのツールはクライアントサイドで動作します</span> </div> </div> <!-- Links columns --> <div class="mt-12 grid grid-cols-3 gap-8 xl:col-span-3 xl:mt-0"> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">ツール</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/ja/text/word-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">ワードカウンター</a></li> <li><a href="/ja/developer/qr-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">QRコードジェネレーター</a></li> <li><a href="/ja/developer/password-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">パスワードジェネレータ</a></li> <li><a href="/ja/developer/uuid-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン一括 UUID ジェネレーター</a></li> <li><a href="/ja/developer/epoch-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Unix エポック タイムスタンプ コンバータ</a></li> <li><a href="/ja/developer/jwt-debugger" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">JSON Web トークン デバッガー</a></li> <li><a href="/ja/calculators/unit-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">単位換算器</a></li> <li><a href="/ja/design/color-picker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">カラーピッカーとパレットジェネレーター</a></li> <li><a href="/ja/calculators/tip-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">オンラインチップ計算機</a></li> <li><a href="/ja/calculators/scientific-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">関数電卓</a></li> <li><a href="/ja/calculators/fraction-to-decimal" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">分数から小数への計算</a></li> <li><a href="/ja/calculators/decimal-to-fraction" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">小数から分数への計算</a></li> <li><a href="/ja/developer/json-validator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン JSON バリデーターおよびパーサー</a></li> <li><a href="/ja/developer/css-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン CSS コード コンプレッサー</a></li> <li><a href="/ja/developer/base64-to-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン Base64 から画像デコーダ</a></li> <li><a href="/ja/productivity/merge-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン PDF 結合ユーティリティ</a></li> <li><a href="/ja/productivity/word-to-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン Word から PDF コンバーター</a></li> <li><a href="/ja/productivity/split-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン PDF スプリッターおよびページ抽出ツール</a></li> <li><a href="/ja/developer/whois-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のクライアント側 Whois ルックアップ ツール</a></li> <li><a href="/ja/developer/dns-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のライブ DNS レコード検索ユーティリティ</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">その他のツール</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/ja/calculators/date-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">日付計算機</a></li> <li><a href="/ja/calculators/bmi-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">BMI計算機</a></li> <li><a href="/ja/developer/base64-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Base64 エンコーダおよびデコーダ</a></li> <li><a href="/ja/developer/sql-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">SQLフォーマッタ</a></li> <li><a href="/ja/developer/user-agent-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">ユーザーエージェントパーサー</a></li> <li><a href="/ja/text/morse-code-translator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">モールス信号変換器</a></li> <li><a href="/ja/design/screen-resolution" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">画面とビューポート チェッカー</a></li> <li><a href="/ja/text/text-utils" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">テキストケースコンバーターとユーティリティ</a></li> <li><a href="/ja/developer/json-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">JSON フォーマッタとバリデータ</a></li> <li><a href="/ja/developer/hash-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">ハッシュジェネレーター</a></li> <li><a href="/ja/calculators/lcm-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">LCM (最小公倍数) 計算機</a></li> <li><a href="/ja/calculators/gcd-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">GCD 計算機</a></li> <li><a href="/ja/calculators/prime-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">素数チェッカー</a></li> <li><a href="/ja/developer/url-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン URL パーサーおよびデバッガー</a></li> <li><a href="/ja/developer/http-headers" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン HTTP リクエスト ヘッダー ビューア</a></li> <li><a href="/ja/developer/qr-decoder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン QR コード デコーダーおよびスキャナー</a></li> <li><a href="/ja/developer/cron-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Cron 式ジェネレーター</a></li> <li><a href="/ja/design/png-to-svg" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン PNG から SVG ベクタライザー</a></li> <li><a href="/ja/calculators/metric-conversion" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン指標変換ツール</a></li> <li><a href="/ja/text/markdown-to-html" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン Markdown から HTML コンバーター</a></li> <li><a href="/ja/text/html-to-markdown" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン HTML からマークダウンへのコンバーター</a></li> <li><a href="/ja/developer/json-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン JSON ミニファイアー</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">さらに多くのツール</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/ja/productivity/timer" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">オンラインタイマー＆ストップウォッチ</a></li> <li><a href="/ja/productivity/stopwatch" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">オンラインストップウォッチ</a></li> <li><a href="/ja/text/lorem-ipsum" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">ローレム・イプサムジェネレーター</a></li> <li><a href="/ja/calculators/percentage-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">パーセンテージ計算機</a></li> <li><a href="/ja/text/markdown-preview" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">マークダウン プレビューア</a></li> <li><a href="/ja/calculators/random-number" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">乱数ジェネレーター</a></li> <li><a href="/ja/design/image-compressor" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">画像圧縮器</a></li> <li><a href="/ja/design/hex-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">16 進数 & RGB コンバーター</a></li> <li><a href="/ja/design/aspect-ratio-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">アスペクト比計算ツール</a></li> <li><a href="/ja/calculators/quadratic-solver" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">二次方程式ソルバー</a></li> <li><a href="/ja/calculators/date-difference" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">日付間の日数計算ツール</a></li> <li><a href="/ja/calculators/fibonacci-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">フィボナッチ数列ジェネレーター</a></li> <li><a href="/ja/design/svg-to-png" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン SVG から PNG へのラスタライザー</a></li> <li><a href="/ja/design/image-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンラインローカル画像コンバーター</a></li> <li><a href="/ja/design/placeholder-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン プレースホルダー画像ジェネレーター</a></li> <li><a href="/ja/design/contrast-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンラインカラーコントラストチェッカー</a></li> <li><a href="/ja/design/hsl-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン HSL から RGB カラー コンバーター</a></li> <li><a href="/ja/calculators/gratuity-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料オンラインチップ＆チップ計算機</a></li> <li><a href="/ja/text/character-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料オンラインキャラクターカウンター</a></li> <li><a href="/ja/text/sentence-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン文章カウンター</a></li> <li><a href="/ja/text/paragraph-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料のオンライン段落カウンター</a></li> <li><a href="/ja/text/line-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">無料オンラインラインカウンター</a></li> </ul> <div class="mt-6 space-y-2"> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">会社情報</h3> <ul role="list" class="space-y-2"> <li><a href="/ja/about" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">概要</a></li> <li><a href="/ja/contact" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">お問い合わせ</a></li> <li><a href="/ja/privacy" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">プライバシーポリシー</a></li> <li><a href="/ja/terms" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">利用規約</a></li> </ul> </div> </div> </div> </div> <!-- Bottom copyrights --> <div class="mt-12 border-t border-[#ebebeb] pt-8 dark:border-[#1f1f1f] flex flex-col sm:flex-row items-center justify-between gap-4"> <p class="text-xs text-[#888] dark:text-[#888] font-mono">
© 2026 say.tools。All rights reserved. ツールは100%クライアントサイドで動作します。 </p> <div class="flex flex-col sm:flex-row items-center gap-4 text-xs font-mono text-[#888] dark:text-[#888] select-none"> <span class="flex items-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </span> <span class="hidden sm:inline w-px h-3 bg-[#ebebeb] dark:bg-[#1f1f1f]"></span> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </div> </div> </div> </footer>  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"HTML コードを縮小する必要があるのはなぜですか?","acceptedAnswer":{"@type":"Answer","text":"縮小化では、複数のスペース、改行文字、タブ インデント、コード コメントなどの不要な文字を削除して、HTML ファイルのサイズを削減します。 Web サーバーまたはコンテンツ配信ネットワーク (CDN) からブラウザーに送信される全体的なペイロードを減らすことで、ページの読み込み速度が向上します。これは、最初のバイトまでの時間 (TTFB) の短縮、最大コンテンツフル ペイント (LCP) などのペイント マイルストーンの高速化、モバイル ユーザーの帯域幅消費量の削減、検索エンジン最適化 (SEO) アルゴリズムに対する全体的なポジティブなシグナルに直接つながります。"}},{"@type":"Question","name":"この HTML ミニファイアーはデータのプライバシーを侵害しますか?","acceptedAnswer":{"@type":"Answer","text":"いいえ、ソースコードは完全に安全です。この HTML 縮小ユーティリティは、コード全体を Web ブラウザ内で処理します。 HTML 構造、インライン スクリプト、スタイル、構成データはリモート サーバーや外部エンドポイントにアップロードされません。すべての処理は JavaScript を使用してクライアント側で実行されるため、データ漏洩や追跡を心配することなく、企業 Web ポータル、運用前テンプレート、または内部 API を含むページで安全に使用できます。"}},{"@type":"Question","name":"HTML の縮小により、インライン JavaScript または CSS スタイルが破壊される可能性がありますか?","acceptedAnswer":{"@type":"Answer","text":"一般に、構文が有効であれば、標準の縮小化はインライン コードを分割しません。当社の HTML ミニファイアーは、インライン JavaScript とインライン CSS 用の個別のトグル構成を備えています。有効にすると、構文の整合性を維持しながら、スクリプトおよびスタイル タグ内で軽い空白の折りたたみとコメントの削除が適用されます。プロジェクトで複雑なテンプレート構文または厳密なスクリプト スクリプトを使用している場合は、インライン JS または CSS 縮小化を無効にして、これらのセクションを記述されたとおりに保持することができます。"}},{"@type":"Question","name":"このツールは、フォーマット済みのテキストとコード ブロックをどのように保護しますか?","acceptedAnswer":{"@type":"Answer","text":"<pre>、<code>、<textarea> などの要素内のコード ブロックは、リテラルの空白文字に依存してコンテンツを正しくフォーマットします。これらのタグ内のスペースを折りたたむと、コードのプレゼンテーションが壊れます。これを防ぐために、当社の処理エンジンはこれらのブロックを抽出し、圧縮前に固有の一時プレースホルダーに置き換えます。外側の HTML レイアウトが縮小されると、プレースホルダーは元の未変更のコード ブロックに置き換えられ、その書式設定が維持されます。"}},{"@type":"Question","name":"HTML 圧縮と Gzip 圧縮の違いは何ですか?","acceptedAnswer":{"@type":"Answer","text":"HTML 縮小化は、冗長なテキスト文字 (開発者コメント、タブ区切り、余分なスペースなど) をソース コードから直接削除する、ビルド時またはプロセス時の最適化です。 Gzip (または Brotli) 圧縮は、HTTP 経由で送信する前に、辞書ベースのアルゴリズムを使用してテキスト ペイロードを圧縮する、サーバー側のランタイム圧縮アルゴリズムです。これら 2 つの方法は補完的です。 HTML を縮小すると無駄なトークンが削除され、その結果得られる合理化されたコードが Gzip によって圧縮され、読み込み速度が最大化されます。"}}]}</script>  <script type="module" src="/_astro/html-minifier.astro_astro_type_script_index_0_lang.Gbp66YcM.js"></script>  <!-- STICKY BOTTOM NAVIGATION BAR --> <div class="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/80 dark:bg-black/80 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] px-6 py-1.5" style="padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px))"> <div class="flex items-center justify-around h-12"> <!-- Home Button --> <a href="/ja/" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> <span class="text-[10px] font-semibold font-sans">ホーム</span> </a> <!-- Tools Button --> <button id="bottom-nav-tools-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path> </svg> <span class="text-[10px] font-semibold font-sans">ツール</span> </button> <!-- Theme Toggle Button --> <button class="theme-toggle flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none" aria-label="Toggle Theme"> <!-- Sun Icon --> <svg class="theme-toggle-light-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m0-12.728l.707.707m12.728 12.728l.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z"></path> </svg> <!-- Moon Icon --> <svg class="theme-toggle-dark-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> </svg> <span class="text-[10px] font-semibold font-sans">テーマ</span> </button> <!-- More Button --> <button id="bottom-nav-more-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="1"></circle> <circle cx="12" cy="5" r="1"></circle> <circle cx="12" cy="19" r="1"></circle> </svg> <span class="text-[10px] font-semibold font-sans">その他</span> </button> </div> </div> <!-- TOOLS DRAWER OVERLAY --> <div id="tools-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="tools-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">ツール</h3> <button id="tools-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Search Bar --> <div class="px-6 py-3 border-b border-[#e5e5e5] dark:border-[#1f1f1f] bg-[#fafafa]/50 dark:bg-[#0a0a0a]/50"> <div class="relative flex items-center"> <svg class="absolute left-3 w-4 h-4 text-[#888] dark:text-[#555] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> <input type="text" id="tools-search-input" placeholder="ツールを検索…" class="w-full pl-9 pr-8 py-2 text-sm bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-[#1f1f1f] rounded-lg text-[#171717] dark:text-white placeholder-[#888] dark:placeholder-[#555] focus:outline-none focus:border-[#007cf0] dark:focus:border-[#007cf0] focus:ring-1 focus:ring-[#007cf0] transition-all"> <button id="tools-search-clear" class="absolute right-3 hidden text-[#888] dark:text-[#555] hover:text-[#171717] dark:hover:text-white transition-colors cursor-pointer" aria-label="Clear search"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> <!-- Drawer Categories and Links --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> テキスト </h4> <div class="grid grid-cols-2 gap-2"> <a href="/ja/text/word-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="ワードカウンター"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ワードカウンター</span> </a><a href="/ja/text/text-utils" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="テキストケースコンバーターとユーティリティ"> <span class="text-sm flex-shrink-0">🔤</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">テキストケースコンバーターとユーティリティ</span> </a><a href="/ja/text/lorem-ipsum" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="ローレム・イプサムジェネレーター"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ローレム・イプサムジェネレーター</span> </a><a href="/ja/text/markdown-preview" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="マークダウン プレビューア"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">マークダウン プレビューア</span> </a><a href="/ja/text/case-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="大文字と小文字の変換"> <span class="text-sm flex-shrink-0">🔠</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">大文字と小文字の変換</span> </a><a href="/ja/text/remove-duplicate-lines" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="重複行リムーバー"> <span class="text-sm flex-shrink-0">🧹</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">重複行リムーバー</span> </a><a href="/ja/text/find-and-replace-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="検索と置換ツール"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">検索と置換ツール</span> </a><a href="/ja/text/reverse-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="テキスト反転ツール"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">テキスト反転ツール</span> </a><a href="/ja/text/string-length" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="文字列長ファインダー"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">文字列長ファインダー</span> </a><a href="/ja/text/word-replacer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="単語置換"> <span class="text-sm flex-shrink-0">✏️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">単語置換</span> </a><a href="/ja/text/sort-list-online" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="リストソーター"> <span class="text-sm flex-shrink-0">🗂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">リストソーター</span> </a><a href="/ja/text/text-to-binary" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="テキストからバイナリへのコンバーター"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">テキストからバイナリへのコンバーター</span> </a><a href="/ja/text/text-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="テキストから 16 進数へのコンバーター"> <span class="text-sm flex-shrink-0">🛑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">テキストから 16 進数へのコンバーター</span> </a><a href="/ja/text/hex-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="16 進数からテキストへのコンバーター"> <span class="text-sm flex-shrink-0">💬</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">16 進数からテキストへのコンバーター</span> </a><a href="/ja/text/text-diff" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="テキスト差分ツール"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">テキスト差分ツール</span> </a><a href="/ja/text/number-to-words" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="数値から単語へのコンバーター"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">数値から単語へのコンバーター</span> </a><a href="/ja/text/char-frequency" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="文字頻度カウンター"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">文字頻度カウンター</span> </a><a href="/ja/text/binary-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="バイナリからテキストへのコンバータ"> <span class="text-sm flex-shrink-0">01</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">バイナリからテキストへのコンバータ</span> </a><a href="/ja/text/rot13" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="rot13 エンコーダー & デコーダー"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ROT13 エンコーダー & デコーダー</span> </a><a href="/ja/text/slug-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="urlスラッグジェネレータ"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">URLスラッグジェネレータ</span> </a><a href="/ja/text/morse-code-translator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="モールス信号変換器"> <span class="text-sm flex-shrink-0">📻</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">モールス信号変換器</span> </a><a href="/ja/text/markdown-to-html" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン markdown から html コンバーター"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン Markdown から HTML コンバーター</span> </a><a href="/ja/text/html-to-markdown" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン html からマークダウンへのコンバーター"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン HTML からマークダウンへのコンバーター</span> </a><a href="/ja/text/character-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料オンラインキャラクターカウンター"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料オンラインキャラクターカウンター</span> </a><a href="/ja/text/sentence-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン文章カウンター"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン文章カウンター</span> </a><a href="/ja/text/paragraph-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン段落カウンター"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン段落カウンター</span> </a><a href="/ja/text/line-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料オンラインラインカウンター"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料オンラインラインカウンター</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 開発者 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/ja/developer/qr-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="qrコードジェネレーター"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">QRコードジェネレーター</span> </a><a href="/ja/developer/password-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="パスワードジェネレータ"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">パスワードジェネレータ</span> </a><a href="/ja/developer/base64-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="base64 エンコーダおよびデコーダ"> <span class="text-sm flex-shrink-0">🔏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Base64 エンコーダおよびデコーダ</span> </a><a href="/ja/developer/json-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json フォーマッタとバリデータ"> <span class="text-sm flex-shrink-0">📋</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON フォーマッタとバリデータ</span> </a><a href="/ja/developer/hash-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="ハッシュジェネレーター"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ハッシュジェネレーター</span> </a><a href="/ja/developer/css-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="cssフォーマッタ"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">CSSフォーマッタ</span> </a><a href="/ja/developer/csv-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="csv から json へのコンバーター"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">CSV から JSON へのコンバーター</span> </a><a href="/ja/developer/html-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html フォーマッタとビューティファイア"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML フォーマッタとビューティファイア</span> </a><a href="/ja/developer/html-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html ミニファイアー"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML ミニファイアー</span> </a><a href="/ja/developer/js-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="javascript フォーマッタ"> <span class="text-sm flex-shrink-0">📜</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JavaScript フォーマッタ</span> </a><a href="/ja/developer/js-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="javascript ミニファイアー"> <span class="text-sm flex-shrink-0">📦</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JavaScript ミニファイアー</span> </a><a href="/ja/developer/json-to-csv" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json から csv へのコンバーター"> <span class="text-sm flex-shrink-0">📈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON から CSV へのコンバーター</span> </a><a href="/ja/developer/json-to-xml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json から xml へのコンバーター"> <span class="text-sm flex-shrink-0">🪵</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON から XML へのコンバーター</span> </a><a href="/ja/developer/xml-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="xml フォーマッタとビューティファイア"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">XML フォーマッタとビューティファイア</span> </a><a href="/ja/developer/xml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="xml から json へのコンバーター"> <span class="text-sm flex-shrink-0">🧩</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">XML から JSON へのコンバーター</span> </a><a href="/ja/developer/sql-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="sqlフォーマッタ"> <span class="text-sm flex-shrink-0">🗄️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">SQLフォーマッタ</span> </a><a href="/ja/developer/user-agent-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="ユーザーエージェントパーサー"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ユーザーエージェントパーサー</span> </a><a href="/ja/developer/regex-tester" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="正規表現テスターとデバッガー"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">正規表現テスターとデバッガー</span> </a><a href="/ja/developer/json-to-yaml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json から yaml へのコンバーター"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON から YAML へのコンバーター</span> </a><a href="/ja/developer/yaml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="yaml から json へのコンバーター"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">YAML から JSON へのコンバーター</span> </a><a href="/ja/developer/cron-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="cron 式ジェネレーター"> <span class="text-sm flex-shrink-0">⚙️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Cron 式ジェネレーター</span> </a><a href="/ja/developer/html-entities" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html エンティティ エンコーダおよびデコーダ"> <span class="text-sm flex-shrink-0">🏷️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML エンティティ エンコーダおよびデコーダ</span> </a><a href="/ja/developer/image-to-base64" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="画像からbase64エンコーダへ"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">画像からBase64エンコーダへ</span> </a><a href="/ja/developer/password-strength" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="パスワード強度チェッカー"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">パスワード強度チェッカー</span> </a><a href="/ja/developer/url-encoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="urlエンコーダとデコーダ"> <span class="text-sm flex-shrink-0">🔒</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">URLエンコーダとデコーダ</span> </a><a href="/ja/developer/uuid-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン一括 uuid ジェネレーター"> <span class="text-sm flex-shrink-0">🆔</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン一括 UUID ジェネレーター</span> </a><a href="/ja/developer/epoch-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="unix エポック タイムスタンプ コンバータ"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Unix エポック タイムスタンプ コンバータ</span> </a><a href="/ja/developer/jwt-debugger" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json web トークン デバッガー"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON Web トークン デバッガー</span> </a><a href="/ja/developer/json-validator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン json バリデーターおよびパーサー"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン JSON バリデーターおよびパーサー</span> </a><a href="/ja/developer/css-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン css コード コンプレッサー"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン CSS コード コンプレッサー</span> </a><a href="/ja/developer/base64-to-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン base64 から画像デコーダ"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン Base64 から画像デコーダ</span> </a><a href="/ja/developer/url-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン url パーサーおよびデバッガー"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン URL パーサーおよびデバッガー</span> </a><a href="/ja/developer/http-headers" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン http リクエスト ヘッダー ビューア"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン HTTP リクエスト ヘッダー ビューア</span> </a><a href="/ja/developer/qr-decoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン qr コード デコーダーおよびスキャナー"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン QR コード デコーダーおよびスキャナー</span> </a><a href="/ja/developer/whois-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のクライアント側 whois ルックアップ ツール"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のクライアント側 Whois ルックアップ ツール</span> </a><a href="/ja/developer/dns-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のライブ dns レコード検索ユーティリティ"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のライブ DNS レコード検索ユーティリティ</span> </a><a href="/ja/developer/json-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン json ミニファイアー"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン JSON ミニファイアー</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 電卓 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/ja/calculators/unit-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="単位換算器"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">単位換算器</span> </a><a href="/ja/calculators/date-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="日付計算機"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">日付計算機</span> </a><a href="/ja/calculators/bmi-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="bmi計算機"> <span class="text-sm flex-shrink-0">⚖️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">BMI計算機</span> </a><a href="/ja/calculators/age-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="年齢計算"> <span class="text-sm flex-shrink-0">🎂</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">年齢計算</span> </a><a href="/ja/calculators/percentage-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="パーセンテージ計算機"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">パーセンテージ計算機</span> </a><a href="/ja/calculators/random-number" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="乱数ジェネレーター"> <span class="text-sm flex-shrink-0">🎲</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">乱数ジェネレーター</span> </a><a href="/ja/calculators/tip-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="オンラインチップ計算機"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">オンラインチップ計算機</span> </a><a href="/ja/calculators/lcm-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="lcm (最小公倍数) 計算機"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">LCM (最小公倍数) 計算機</span> </a><a href="/ja/calculators/quadratic-solver" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="二次方程式ソルバー"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">二次方程式ソルバー</span> </a><a href="/ja/calculators/scientific-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="関数電卓"> <span class="text-sm flex-shrink-0">🧮</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">関数電卓</span> </a><a href="/ja/calculators/fraction-to-decimal" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="分数から小数への計算"> <span class="text-sm flex-shrink-0">➗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">分数から小数への計算</span> </a><a href="/ja/calculators/decimal-to-fraction" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="小数から分数への計算"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">小数から分数への計算</span> </a><a href="/ja/calculators/gcd-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="gcd 計算機"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">GCD 計算機</span> </a><a href="/ja/calculators/prime-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="素数チェッカー"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">素数チェッカー</span> </a><a href="/ja/calculators/date-difference" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="日付間の日数計算ツール"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">日付間の日数計算ツール</span> </a><a href="/ja/calculators/fibonacci-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="フィボナッチ数列ジェネレーター"> <span class="text-sm flex-shrink-0">🌀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">フィボナッチ数列ジェネレーター</span> </a><a href="/ja/calculators/metric-conversion" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン指標変換ツール"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン指標変換ツール</span> </a><a href="/ja/calculators/gratuity-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料オンラインチップ＆チップ計算機"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料オンラインチップ＆チップ計算機</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> デザイン </h4> <div class="grid grid-cols-2 gap-2"> <a href="/ja/design/color-picker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="カラーピッカーとパレットジェネレーター"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">カラーピッカーとパレットジェネレーター</span> </a><a href="/ja/design/image-compressor" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="画像圧縮器"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">画像圧縮器</span> </a><a href="/ja/design/screen-resolution" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="画面とビューポート チェッカー"> <span class="text-sm flex-shrink-0">🖥️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">画面とビューポート チェッカー</span> </a><a href="/ja/design/hex-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="16 進数 & rgb コンバーター"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">16 進数 & RGB コンバーター</span> </a><a href="/ja/design/color-palette" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="カラーパレットジェネレーター"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">カラーパレットジェネレーター</span> </a><a href="/ja/design/css-gradient" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="css グラデーション ジェネレーター"> <span class="text-sm flex-shrink-0">🌈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">CSS グラデーション ジェネレーター</span> </a><a href="/ja/design/favicon-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="ファビコンジェネレーター"> <span class="text-sm flex-shrink-0">⭐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ファビコンジェネレーター</span> </a><a href="/ja/design/rgb-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="rgb から 16 進数へのカラーコンバーター"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">RGB から 16 進数へのカラーコンバーター</span> </a><a href="/ja/design/aspect-ratio-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="アスペクト比計算ツール"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">アスペクト比計算ツール</span> </a><a href="/ja/design/svg-to-png" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン svg から png へのラスタライザー"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン SVG から PNG へのラスタライザー</span> </a><a href="/ja/design/image-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンラインローカル画像コンバーター"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンラインローカル画像コンバーター</span> </a><a href="/ja/design/placeholder-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン プレースホルダー画像ジェネレーター"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン プレースホルダー画像ジェネレーター</span> </a><a href="/ja/design/contrast-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンラインカラーコントラストチェッカー"> <span class="text-sm flex-shrink-0">👁️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンラインカラーコントラストチェッカー</span> </a><a href="/ja/design/png-to-svg" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン png から svg ベクタライザー"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン PNG から SVG ベクタライザー</span> </a><a href="/ja/design/hsl-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン hsl から rgb カラー コンバーター"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン HSL から RGB カラー コンバーター</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 生産性 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/ja/productivity/timer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="オンラインタイマー＆ストップウォッチ"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">オンラインタイマー＆ストップウォッチ</span> </a><a href="/ja/productivity/stopwatch" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="オンラインストップウォッチ"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">オンラインストップウォッチ</span> </a><a href="/ja/productivity/pomodoro" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="ポモドーロタイマー"> <span class="text-sm flex-shrink-0">🍅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ポモドーロタイマー</span> </a><a href="/ja/productivity/merge-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン pdf 結合ユーティリティ"> <span class="text-sm flex-shrink-0">📑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン PDF 結合ユーティリティ</span> </a><a href="/ja/productivity/word-to-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン word から pdf コンバーター"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン Word から PDF コンバーター</span> </a><a href="/ja/productivity/split-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="無料のオンライン pdf スプリッターおよびページ抽出ツール"> <span class="text-sm flex-shrink-0">✂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">無料のオンライン PDF スプリッターおよびページ抽出ツール</span> </a> </div> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- MORE DRAWER OVERLAY --> <div id="more-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="more-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">その他</h3> <button id="more-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Links & Content --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <!-- iOS Style Link List --> <div class="rounded-xl border border-zinc-200 dark:border-[#1f1f1f] bg-zinc-50/50 dark:bg-zinc-900/30 overflow-hidden divide-y divide-[#ebebeb] dark:divide-[#1f1f1f]"> <a href="/ja/about" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">概要</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/ja/contact" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">お問い合わせ</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/ja/privacy" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">プライバシーポリシー</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/ja/terms" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">利用規約</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Language Selector Section --> <div class="space-y-3"> <h4 class="text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 言語 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>English</span>  </a><a href="/es/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Español</span>  </a><a href="/fr/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Français</span>  </a><a href="/de/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Deutsch</span>  </a><a href="/hi/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>हिन्दी</span>  </a><a href="/zh/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>中文</span>  </a><a href="/ja/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-[#007cf0]/10 border-[#007cf0] text-[#007cf0] font-bold dark:bg-[#007cf0]/20"> <span>日本語</span> <span class="text-xs text-[#007cf0]">✓</span> </a> </div> </div> <!-- Credits Footer --> <div class="pt-6 border-t border-[#ebebeb] dark:border-[#1f1f1f] text-center space-y-2 select-none"> <p class="text-xs font-mono text-[#888] dark:text-[#888] flex items-center justify-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </p> <p class="text-xs font-mono text-[#888] dark:text-[#888]"> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </p> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- Client Script to Toggle Sheet --> <script type="module">const g=document.getElementById("bottom-nav-tools-btn"),B=document.getElementById("tools-sheet-close"),t=document.getElementById("tools-sheet-backdrop"),o=document.getElementById("tools-sheet"),b=document.getElementById("bottom-nav-more-btn"),k=document.getElementById("header-more-btn"),I=document.getElementById("header-more-btn-home"),S=document.getElementById("more-sheet-close"),s=document.getElementById("more-sheet-backdrop"),n=document.getElementById("more-sheet"),e=document.getElementById("tools-search-input"),i=document.getElementById("tools-search-clear"),w=document.querySelectorAll(".category-section"),q=()=>{t?.classList.remove("hidden"),o?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{t?.classList.add("opacity-100"),t?.classList.remove("pointer-events-none"),o?.classList.add("translate-y-0"),o?.classList.remove("translate-y-full"),setTimeout(()=>{e?.focus()},100)})},d=()=>{t?.classList.remove("opacity-100"),t?.classList.add("pointer-events-none"),o?.classList.remove("translate-y-0"),o?.classList.add("translate-y-full"),document.body.style.overflow="",e&&(e.value="",e.dispatchEvent(new Event("input"))),setTimeout(()=>{t?.classList.add("hidden"),o?.classList.add("hidden")},300)};g?.addEventListener("click",()=>{m(),q()});B?.addEventListener("click",d);t?.addEventListener("click",d);const r=()=>{s?.classList.remove("hidden"),n?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{s?.classList.add("opacity-100"),s?.classList.remove("pointer-events-none"),n?.classList.add("translate-y-0"),n?.classList.remove("translate-y-full")})},m=()=>{s?.classList.remove("opacity-100"),s?.classList.add("pointer-events-none"),n?.classList.remove("translate-y-0"),n?.classList.add("translate-y-full"),document.body.style.overflow="",setTimeout(()=>{s?.classList.add("hidden"),n?.classList.add("hidden")},300)};b?.addEventListener("click",()=>{d(),r()});k?.addEventListener("click",()=>{d(),r()});I?.addEventListener("click",()=>{d(),r()});S?.addEventListener("click",m);s?.addEventListener("click",m);e?.addEventListener("input",h=>{const a=h.target.value.toLowerCase().trim();a?i?.classList.remove("hidden"):i?.classList.add("hidden"),w.forEach(v=>{const l=v,u=l.querySelector(".category-title"),y=(u&&u.textContent?.toLowerCase()||"").includes(a),E=l.querySelectorAll(".tool-item");let L=!1;E.forEach(p=>{const c=p,f=c.getAttribute("data-name")||"";y||f.includes(a)?(c.classList.remove("hidden"),c.classList.add("flex"),L=!0):(c.classList.remove("flex"),c.classList.add("hidden"))}),L?l.classList.remove("hidden"):l.classList.add("hidden")})});i?.addEventListener("click",()=>{e&&(e.value="",e.dispatchEvent(new Event("input")),e.focus())});</script> </body> </html>