頼みの綱として生成AI「Gemini」に助けを求め、共に原因究明に奔走するも、その道のりは決して平坦ではありませんでした。プログラミングの鉄則を疑い、目を凝らしても見つからないエラーの正体は、まさに「想定外」。Geminiとの対話を通して、AIの可能性と限界、そして最終的に問題解決へと導いた驚きの真相を、赤裸々にお伝えします。

衝撃

ローカルのPCの開発環境では、うまく機能して操作できていた。
本環境にそのまま、コピペしただけなのにプレビュー段階で全く機能しない。

なぜ、何が問題？

何も変更することなく、ローカルのPCで開発した内容を、HTML部分とScript部分を別々に、カスタムHTMLブロック２つに分け、１番目のHTMLブロックにはHTML部分をそのまま貼り付け、次のHTMLブロックには<script></script>記載した上で、間にScript文を貼り付けただけなのに。

公開目前！最後の難関：突如現れたエラーの影

ローカル環境では完璧に動作していた自慢のカラーピッカー。意気揚々と公開準備を進めるも、本環境でのプレビュー表示でまさかのトラブル発生。プレビュー表示でカラーパレットが真っ白になり、操作は一切受け付けないという事態に直面。

原因究明の開始

藁にもすがる思いで：AIの知恵を借りる

Geminiとの対話：エラー情報の収集と解析の始まり

Geminiからの最初の指示は、ブラウザの開発者ツールに表示されるConsoleエラーの提供。果たして、そこに解決の糸口は隠されているのか？

Geminiの回答

ご報告ありがとうございます。ローカル環境では問題がないのに、Webページに公開した途端に問題が発生するとのこと、それは非常によくあるケースで、原因もいくつか考えられます。
問題を解決するために、以下の手順で確認を進めてください。【重要な確認事項】
ブラウザの開発者ツール（デベロッパーツール）の確認:

　公開されているWebページを開き、ブラウザの開発者ツールを起動してください。（通常は右クリックして「検証」や「要素を調査」を選択するか、F12キーを押すと開きます）

　開発者ツールの「コンソール」タブを開き、赤い文字で表示されているエラーメッセージがないか確認してください。もしエラーメッセージがあれば、それが問題の原因を示している可能性が高いです。エラー内容を教えていただけると、さらに具体的なアドバイスができます。

• Chromeで確認したConsoleエラーをGeminiに報告するも、そのエラー行数は膨大^※ かつ止まることなく吐き出されている。一体、何が原因でこんなにもエラーが出ているのか？

（※.ChromeのConsoleエラーはStopすることなく大量に出力され続ける。最初の100行あまり、2画面スクロール分位をコピーして報告。Geminiにもその旨を伝える）

Chromeの悲鳴：大量のエラーメッセージに翻弄される

本環境でのエラー報告ありがとうございます。大量のコンソールエラーが発生しており、特に SyntaxError: Invalid or unexpected token と SyntaxError: Unexpected token '+' が出ていることは、JavaScriptファイル自体に何らかの問題があることを示唆しています。

これらのエラーは、JavaScriptの文法として正しくない文字が含まれている場合や、ファイルのエンコーディングが間違っている場合などに発生します。ローカル環境では問題がないのに、本環境で発生するということは、ファイルのアップロードまたは保存の過程で問題が発生した可能性が考えられます。

以下の点について確認してみてください。

1. JavaScriptファイルの再アップロード: colorPicker_Gemini-Script7.js を再度、Webサーバーにアップロードしてみてください。アップロードが中断されたり、不完全な状態でアップロードされた可能性があります。FTPクライアントなどを使用している場合は、転送モード（バイナリまたはテキスト）の設定が適切かどうかも確認してください。一般的にはJavaScriptファイルはテキストモードで転送することが推奨されます。
2. ファイルのエンコーディング: JavaScriptファイルのエンコーディングが、Webサーバーで想定されているエンコーディング（通常はUTF-8）と一致しているか確認してください。テキストエディタでファイルを開き、エンコーディングの設定を確認・変更できます。
3. ファイル内容の確認: もし可能であれば、本環境にアップロードされた colorPicker_Gemini-Script7.js の内容を直接確認してみてください。予期しない文字が混入していたり、途中でファイルが途切れていないかなどをチェックします。
4. 他のJavaScriptエラーの確認: total.js という別のファイルでもエラーが発生しているようです。もしこのファイルがカラーピッカーの動作に依存している場合、このエラーが影響を与えている可能性も考えられます。カラーピッカーの動作に必要なJavaScriptファイルが全て正常に読み込まれているか、開発者ツールの「ネットワーク」タブで確認してください。

まずは上記の点を確認し、JavaScriptファイルが正しく本環境にデプロイされているかどうかを確かめてください。SyntaxError が解消されれば、カラーピッカーが正常に動作する可能性が高いです。

　➡　Geminiによる解析は難航を極める。

承知いたしました。.js ファイルをアップロードしたのではなく、HTMLブロックに直接ペーストしているとのこと、了解いたしました。その場合、コードの誤りである可能性が高まります。

先ほどのエラーメッセージをもう一度確認すると、xn--ecka7j.biz/:2154 Uncaught SyntaxError: Unexpected token '+' というエラーが出ています。これは、2154行目に予期しない + 記号があることを示唆しています。

以下の手順で、HTMLブロックにペーストしたJavaScriptコードを確認してみてください。

1. 本環境のコードの確認:
   • 公開されているWebページの該当箇所（拡張HTMLブロック）のコードを直接確認してください。ブラウザの開発者ツールの「要素」タブで、<script> タグの中身を確認できます。
   • ローカル環境で正常に動作しているJavaScriptコードと、本環境にペーストしたコードを行ごとに注意深く比較してください。特に2154行目付近に、意図しない + 記号がないか確認してください。また、タイプミスや文字抜けなども見落とさないように確認してください。
2. コメントアウトの確認:
   • JavaScriptのコメントアウト (// や /* ... */) が正しく記述されているか確認してください。誤ったコメントアウトは、予期しないトークンエラーを引き起こすことがあります。
3. テンプレートリテラルの確認:
   • コピー機能の部分でバッククォート (`) を使用しているテンプレートリテラルがありますが、これが正しく記述されているか確認してください。特に、文字列内で変数を埋め込む ${} の部分に誤りがないか注意してください。
4. 他のJavaScriptコードとの競合:
   • もしページ内に他のJavaScriptコードが存在する場合、それらのコードと変数名や関数名が衝突している可能性もわずかに考えられます。ただし、今回のエラーメッセージはSyntaxErrorなので、まずはコード自体の文法エラーを疑うべきです。

エラーメッセージの行番号(:2154) は、コードの行数が非常に多いことを示唆しています。 ペーストしたJavaScriptコードだけでなく、そのHTMLブロック全体や、その前後のHTML要素なども含めて、意図しない + 記号がないか確認してみるのも良いかもしれません。

お手数ですが、上記の手順でコードの確認と修正を試してみてください。SyntaxError が解消されれば、他の問題も解決に向かう可能性があります。

その通りです。ブラウザの開発者ツールが示す行番号は、HTMLファイル全体の行数を基準にしています。したがって、2154行目というエラー表示は、ペーストしたJavaScriptコードだけでなく、そのJavaScriptコードが埋め込まれているHTMLブロックや、それ以前のHTML構造の行数も全て含んだ上での行番号となります。

エラー箇所を特定するには、以下の手順で確認してみてください。

1. 公開ページのHTMLソースコードを表示する:
   • ブラウザで公開ページを開き、右クリックして「ページのソースを表示」または同様のオプションを選択します。
2. <script> タグを探す:
   • 表示されたHTMLソースコードの中で、カラーピッカーのJavaScriptコードをペーストした <script> タグの位置を探します。
3. 行数を数える:
   • HTMLソースコードの最初から数えて、2154行目付近に何が記述されているかを確認してください。<script> タグの中であれば、ペーストしたJavaScriptコードのエラーの可能性がありますし、もし <script> タグの外であれば、HTML構造に問題があるかもしれません。
4. エラーの可能性のある箇所を特定する:
   • 2154行目付近のコードに、エラーメッセージで指摘されている + 記号がないか、または文法的に不自然な記述がないか確認してください。

この方法で、エラーが発生している正確な位置を特定できるはずです。もし特定できたら、その部分のコードを再度確認し、修正を試みてください。

ご指摘ありがとうございます。ソースコードの行数が合わないとのこと、承知いたしました。

その場合、エラーが発生している2154行目付近には、別のJavaScriptコードが存在するか、または何らかの理由でHTML構造の一部がJavaScriptとして誤認識されている可能性があります。

以下の手順で、2154行目付近のコードを確認してみてください。

1. 公開ページのHTMLソースコードを再度表示します。
2. ソースコードを2154行目付近までスクロールします。
3. その行に何が記述されているか確認します。
   • もし <script> タグで囲まれたJavaScriptコードであれば、その部分に + 記号が不適切に使われていないか、文法的な誤りがないかを確認してください。
   • もし HTML タグやその他のコンテンツであれば、それが JavaScript の文脈で解釈されようとしてエラーになっている可能性があります。例えば、閉じタグが不足していたり、コメントアウトが正しく行われていないなどの理由で、意図しない部分が <script> 要素として扱われることがあります。
4. 2154行目よりも少し前の行（例えば2100行目あたりから）も確認し、JavaScriptの<script>タグが適切に開始・終了しているかを確認してください。 もし、どこかの <script> タグが閉じられていない場合、それ以降のHTMLコードがJavaScriptとして解釈され、エラーを引き起こすことがあります。

エラーメッセージは Unexpected token '+' ですので、2154行目付近で + 記号がどのように使われているか、文脈と照らし合わせて確認することが重要です。

もし、ご自身で原因を特定するのが難しい場合は、その2154行目付近のコード（可能であれば、その数行前後のコードも含む）を共有していただければ、私も一緒に確認してみることができます。

奥の手：Webページ全体のソースコードを提供

ご提供ありがとうございます。2154行目は外部のJavaScriptライブラリのコードの一部であるようです。これは、ご自身の記述されたカラーピッカーのコード（742行目から1164行目）とは異なる場所でエラーが発生していることを意味します。

このような場合、考えられる原因はいくつかあります。

1. ご自身のカラーピッカーのコードの潜在的なエラー: カラーピッカーのコードに、直接的なSyntaxErrorではないものの、実行時に問題を引き起こし、その影響が他のJavaScriptコードの解析に及んでいる可能性があります。例えば、変数名や関数のスペルミス、予期しない値が渡されることによるエラーなどが考えられます。
2. 外部ライブラリの破損または不完全な読み込み: 何らかの原因で、この外部ライブラリのコードが完全に読み込まれていないか、破損している可能性があります。ただし、HTMLに直接記述しているとのことなので、この可能性は低いかもしれません。
3. HTML構造の誤り: カラーピッカーのJavaScriptコードが記述されている場所のHTML構造に誤りがあり、それが外部ライブラリの解析に影響を与えている可能性も考えられます。例えば、<script> タグの閉じ忘れなどです。

トラブルシューティングとして、以下の点について再度確認をお願いできますでしょうか。

• ご自身のカラーピッカーのJavaScriptコードをもう一度、注意深く見直してください。 特に、最近変更を加えた部分や、イベントリスナーの設定、関数呼び出しなどに誤りがないか確認してください。セミコロンの抜けなどもエラーの原因となることがあります。
• カラーピッカーのJavaScriptコードを囲んでいる<script>タグが正しく閉じられているか確認してください。 また、その<script>タグがHTMLの適切な場所に配置されているか（通常は</body>タグの直前が推奨されます）も確認してください。
• もし他にJavaScriptコードを記述している<script>タグがあれば、それらのコードにもエラーがないか確認してみてください。

エラーメッセージが特定の外部ライブラリの行数を示しているとはいえ、根本的な原因がご自身のコードにある可能性も考慮して、今一度コード全体を見直してみてください。

完全な手詰まり状態

新たな視点：Firefoxのエラー情報に光明が？

FirefoxのConsoleエラーLogで判ったこと

ソースコード解析の結果：Geminiもお手上げ？

提供したソースコードに対し、Geminiは、ChromeでのConsoleエラーの「#」に関連する不審な点を見つけられなかったと回答。早くも暗雲が立ち込める。

ご提供いただいたHTMLソースコードを確認しましたが、Firefoxのエラーメッセージ UncaughtSyntaxError: '#' not followed by identifier xn--ecka7j.biz:818:30 が示す818行目付近には、直接的に問題となる # は見当たりませんでした。

ただし、Firefoxのエラーメッセージは、Chromeとは異なる場合があります。Chromeで表示されているエラー Uncaught SyntaxError: Invalid or unexpected token が依然として気になります。

つきましては、以下の点について、再度HTMLソースコード全体をご確認いただけますでしょうか。

1. Firefoxのエラー箇所（818行目付近）の確認:
   • その行に直接 # がない場合でも、その行のコードがJavaScriptの文脈で解釈された結果、そのようなエラーが出ている可能性があります。周囲のコード（特にJavaScript関連のコード）に問題がないか確認してください。
2. Chromeのエラー箇所（HTMLの先頭）の確認:
   • HTMLファイルの先頭から、特に <script> タグが始まるまでの間に、意図しない文字（不可視文字なども含む）や文法的に正しくない記述がないか、もう一度注意深く確認してください。
   • 稀に、サーバー側の処理や、コピー＆ペーストの際に予期しない文字がHTMLの先頭に混入することがあります。
3. JavaScriptコードの全体的な確認:
   • コメントアウト以外の不要な文字や記号が混入していないか、念のためJavaScriptコード全体を再確認してください。

もし、これらの確認をしても問題が特定できない場合は、大変お手数ですが、可能であれば、公開されているWebページのURLを共有していただけますでしょうか？実際にWebページを拝見することで、より具体的な原因を特定できるかもしれません。

Firefoxによる深掘り：Scriptエラーの発見と詳細調査

GeminiはFirefoxのエラーからScriptエラーを発見し、発生位置を特定。問題のコードの再確認を指示される。

コードを拝見しました。

まず、122行目の条件式で、JavaScriptの論理AND演算子である && が、HTMLエンティティの && と記述されています。これはJavaScriptとしては解釈されず、意図しない動作を引き起こす可能性がありますので、&& に修正してください。

何故か？117 Lineを122行目と言ってくるが、、、、

コードは正常、しかし現実は…：繰り返される問題

問題箇所とされるコードは正常にしか見えず、編集画面でも問題なし。念のため、Scriptを再度上書き更新するも状況は変わらず。エラー解決への道は依然として見えない。

展開されたSourceのの文字化け部分（819 Line）

if (r >= 0 && r <= 255 &#038;&#038; g >= 0 && g <= 255 &#038;&#038; b >= 0 && b <= 255) { 

そう、余計な文字：#038;　が、&&の間に数か所に挟まっている。
（でも全部の＆＆の間が文字化けしている訳ではない。･･･これも不思議！）(ここがRGBの数値の範囲チェックの部分･･･➡ここのif文が機能しないための不具合。Firefoxのconsoleエラーが示す’#‘もここにある。)

そして、実際のコーディングでは、以下の様に問題なく（文字化けの「#038;」もない）（　colorPicker_Gemini-Script7.jsの　117 Line）

if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {

元々の「colorPicker_Gemini-Script7.js」

であるし、改めて、編集画面で見てみても同じ

でも、現実は不具合発生だし、Firefoxのconsoleエラーはここを指している
（よく見てみるとChromeのConsoleエラーとSourceコードのGemini解析で指し示した「#」は、#038;の先頭にある）

プレビュー画面のSourceの該当箇所付近は、下の画像キャプチャ通り
SourceをSublime Textに貼り付け、Check250525.htmlで保存した後、VS Codeで開いて「if (r >= 0」で検索 ➡ Firefoxのエラー箇所（818行目付近）で合致する819 Line（VS Codeは文字化け部分を~~~~ ~~~~で示してくれている。こんなCode無いぞ!!!と）➡ 　該当箇所近辺をキャプチャ

環境要因の可能性：GeminiからのURL開示要求

Geminiは、ソースコードと実行環境の間に生じる不整合、特に文字化けの可能性を指摘し、実際のWebページのURLの開示を求める。

原因がまた一つ特定できましたね！&& がまだ残っていたとは、驚きです。

Localで修正してアップロードしたのに、本環境で文字化けが戻ってしまう原因としては、以下の可能性が考えられます。

1. キャッシュ: ブラウザのキャッシュだけでなく、WebサーバーやCDN（コンテンツ配信ネットワーク）のキャッシュが古いバージョンのファイルを配信している可能性があります。スーパーリロード（Ctrl+Shift+R または Cmd+Shift+R）を試すだけでなく、もしCDNを利用している場合は、CDNのキャッシュクリアも試してみてください。
2. 保存またはアップロードの失敗: 編集したHTMLブロックが正しく保存または公開されていない可能性があります。Webサイトの編集画面で、変更を保存し、公開する手順を確実に行ってください。
3. 複数の場所でコードを編集している: もし、複数の場所で同じコードを編集している場合、誤って古いバージョンのコードを上書きしてしまっている可能性があります。
4. プラットフォームの自動変換: ご利用のWebサイトプラットフォームによっては、特定の文字や記号を自動的に変換する機能があるかもしれません。もしそういった機能があれば、設定を確認してみてください。

まずは、Webサイトの編集画面で、該当のHTMLブロックの内容が最新の修正済みコードになっていることを確認してください。その後、キャッシュクリアを徹底的に行ってみてください。

もしそれでも問題が解決しない場合は、ご利用のWebサイトプラットフォーム名などを教えていただければ、何か情報が見つかるかもしれません。

非公開とプレビューの壁：もどかしい状況

問題解決のためURLを開示したい気持ちはあるものの、ページは未公開。下書きプレビューでの状況を伝え、一時公開も検討することを伝える。

下書き保存とプレビュー表示で確認しても正しく動作しないとのこと、承知いたしました。編集画面でコードが正しく表示されているにも関わらず問題が解決しない場合、以下の可能性を試してみてください。

1. プレビュー画面のハードリロード: プレビュー画面が古いキャッシュを読み込んでいる可能性があります。プレビュー表示の状態で、強制的に再読み込み（ハードリロード）を試してみてください。通常、Ctrl+Shift+R（Windows/Linux）、Cmd+Shift+R（Mac）で行えます。
2. プレビュー画面の開発者ツール（コンソール）の確認: プレビュー表示でも、ブラウザの開発者ツールを開いて（通常はF12キー）、コンソールにエラーメッセージが表示されていないか確認してください。表示がおかしくても、JavaScriptのエラーが出ている場合があります。
3. プラットフォームのプレビュー機能の特性: ご利用のWebサイトプラットフォームのプレビュー機能が、公開時と異なる動作をする場合があります。もし可能であれば、プラットフォームのヘルプなどを確認し、プレビューの制限事項などを調べてみてください。

上記を試しても解決しない場合は、一旦「工事中」などの表示をして公開し、URLを共有していただく方が、私も実際のWebページの状態を確認できるため、より具体的なアドバイスができるかもしれません。もし公開に抵抗がなければ、その方法もご検討ください。

承知いたしました。公開後、URLを共有いただければ、すぐに確認させていただきます。引き続きサポートさせていただきますので、よろしくお願いいたします。

Geminiの期待：公開後のURL分析に託す

承知いたしました。URLをありがとうございます。

早速、拝見して状況を確認いたします。少々お時間をください。

ページを「工事中」として公開し、URLをGeminiに託す。AIによる分析に、一縷の望みをかける。

AIも時間が必要：分析結果を待つ焦燥感

Geminiから分析に時間を要する旨の連絡。焦りを感じながらも、AIの判断を待つ。

Geminiの回答を待つ間に

まさかの自己解決：閃きが生んだ解決策

Geminiからの返信を待つ間に、何気なくScriptの記述場所を変更してみたところ、嘘のようにエラーが解消！信じられない結末を迎える。

Geminiに報告：解決したことと変更点を

解決のご報告ありがとうございます！テーマの機能であるカスタムJavaScript欄に移動させることで解決されたとのこと、素晴らしいですね。

当初、HTMLブロックに直接記述されていたことが原因だったのですね。テーマの機能を利用することで、JavaScriptの実行環境が適切になり、問題が解消されたと考えられます。

カラーピッカーが無事に動作するようになったとのこと、大変嬉しく思います。他に何かお手伝いできることがございましたら、お気軽にお知らせください。

Geminiの誤解：AIにも得意不得意がある？

真実の共有：依然として残る謎

Geminiの誤解を訂正し、自己解決に至った経緯と、根本的な原因が依然として不明であることを伝える。

Geminiの反省と今後の課題：文字化けという難題

Geminiは自身の誤解を謝罪し、文字化けという問題の複雑さについて言及する。

ご指摘ありがとうございます。私の認識が誤っており、申し訳ございません。「HTMLブロックに直接記述されていたことが原因」ではなく、文字化けが根本的な原因だったのですね。

文字化けの原因は特定できていないとのこと、承知いたしました。文字化けは、ファイルの保存形式、Webページのエンコーディング設定、サーバー側の設定など、様々な要因で発生するため、原因特定が難しい場合がありますね。

今回のケースでは、テーマのカスタムJavaScript欄に移動したことで、結果的に文字化けの問題も解消された、または影響を受けなくなった、と理解いたしました。

引き続き、何かご不明な点やお困りのことがございましたら、お気軽にお知らせください。

まとめ

Webサイト公開直前、予期せぬConsoleエラーに見舞われた顛末記。生成AI「Gemini」との対話を通じて問題解決を試みるも、最終的な原因はコードの一部で発生した不可解な文字化けだった。AIの力を借りながらも、人の目による確認と環境に合わせた調整の重要性を痛感した記録。

Color Palette Explorer: あなただけの特別な色を作ろう・見つけよう！

洗練されたカラーピッカー - Webデザイン、イラスト制作に。RGBスライダー、カラーパレットで直感的に色を見つけ、HEX/RGBコード、和色名も表示。選択した色はHTMLテーブル形式で保存。Webサイトに最適な色を簡単選択。色の表現が豊かに。

イイネ.biz

2026.04.09

日本の豊かな色彩文化を凝縮。古来より愛されてきた繊細な和色の数々を、1文字の入力でも簡単に探し出せます。

「あの時、心惹かれた色はなんという名前だろう？」「このイメージにぴったりの日本の伝統色を見つけたい」
そんなあなたの想いを、「和色大辞典」が鮮やかに叶えます。日本の豊かな自然や繊細な文化から生まれた、奥ゆかしい「和色」。その一つひとつには、美しい名前と、情感豊かな物語が込められています。「和色大辞典」 – あなたの感性を彩る、日本の伝統色検索ツール
➡ テーブル内「文字列検索」を追加しました。

主な機能

• 和色を中心に：和色の色合い順に表示する機能を追加
• 一目瞭然のカラー表示: お探しの色をダイレクトに表示。RGB値も併記し、デザインワークを強力にサポートします。
• 日本の伝統色を網羅: 奥ゆかしい色名と、その色に込められた物語に触れることができます。日本の季節や情景を映し出す、多彩な和色の魅力をご堪能ください。
• スマートな並び替え機能:
  • 読み方: ひらがな順に並び替え、微妙な色合いの違いをスムーズに比較できます。
  • 色名: 漢字順に並び替え、共通のイメージを持つ色をまとめてチェックできます。
  • #16進: カラーコード順に並び替え、デジタルデータでの管理に最適です。
  • RGB: 数値順に並び替え、色の構成要素からのアプローチも可能です。
  • デフォルト表示: [F5]キーを押すだけで、読み方順の基本表示に戻ります。
• 文字列検索：
  • 漢字、ひらがな、英数字の文字列検索を追加しました。

和色とは:

単なる色ではありません。それは、日本の風土、歴史、そして繊細な感性が育んだ、唯一無二の色彩体系です。同じ読みを持つ色の中にも、わずかながら異なる色合いが存在し、そこには日本の自然や文化に対する深い理解が込められています。

さあ、「和色パレット」で、あなたの感性を彩る特別な色を見つけてください。

表の表示切替操作ご案内

「和色大辞典」なら、探したい色をスピーディーに見つけることができます。
和色のRGB値も一目でわかるから、デザインワークにも即座に活用できます。

さらに、便利な並び替え機能（Sort）で、色の新たな魅力と出会えます。

• 「読み方」順: 似た響きの美しい色が、まるで隣り合うように現れます。
• 「系」：主に和色の系統（和色優先のため同系色でも離れて表示されます）近しい色合いに並び替えます。
• 「色名」順: 同じ漢字を持つ色が集い、色の奥深さを再発見できます。
• 「#16進数」順: デジタルコードのグラデーションが、色の科学的な側面を映し出します。
• 「RGB」順: 色の成分による並び替えで、微妙な色彩の違いを繊細に感じ取れます。

迷ったら[F5]キー。一瞬で、日本の色彩美が織りなすデフォルトの並び順へ戻ります。

「和色大辞典」は、単なるカラーコードの検索ツールではありません。それは、日本の繊細な美意識に触れ、あなたの感性を豊かにする、新しい色の体験です。

さあ、「和色大辞典」で、あなただけの特別な「色」を見つけてください。

それでは、各項目の見出し位置をクリックした場合の、実際の表示を順を追ってみましょう。（見出しとは、🔶マークで示した部分です）

各クリックは１回目と２回目の表示の違いを次の画像で示します。３回目以降は繰り返し表示となり、「F5」キーで初期状態に戻ります。（実際の体験は「和色大辞典」からどうぞ！）

🔶 読み Sort

① 初期画面または「F5」キー押下時：読みの昇順で表示されます。
② 「読み」を1回クリック：読みの降順で表示されます。
③ 「読み」を再度クリック：読みの昇順で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

①初期表示または「F5」キー、および繰り返し時に

②「読み」を1回クリック、および繰り返し時に

③「読み」を再度クリック、および繰り返し時に

まっちゃいろ　抹茶色
抹茶色だけでこんなにも･･･日本の色：和色の不思議

🔶系 Sort

① 「系」を1回クリック：「系」の漢字コード順（昇順）で表示されます。

② 「系」を再度クリック：「系」の漢字コード順（降順）で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

🔶#16進 Sort

① 「#16進」を1回クリック：16進数のコードの昇順で表示されます。

② 「#16進」を再度クリック：16進数のコードの降順で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

🔶色名 Sort

① 「色名」を1回クリック：色名の漢字コード順（昇順）で表示されます。

② 「色名」を再度クリック：色名の漢字コード順（降順）で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

🔶RGB Sort

① 「RGB」を1回クリック：RGBのコードの昇順で表示されます。

② 「RGB」を再度クリック：RGBのコードの降順で表示されます。

（以降、クリックのたびに昇順と降順が切り替わります）

文字列の検索機能は、表(Table)内の文字を探す場合、

文字列の検索

例えば、
色の系統の一部、#16進の一部、色名・読みの一部、RGBコードの一部の指定でも、合致したものがあれば、その列を反転表示させます。
並んでいなくても合致した文字列を含む全てのセルは反転表示されます。
　に進む

　「和色大辞典」_Top

和色大辞典

文字列検索

　テーブル内検索➡以下の[___]内に検索文字を入力してください。

　　一致件数: 0 件
該当するセル(位置)が黒色反転し、最初の文字列のテーブル最下段に位置送りします。[漢字]変換の場合は、2度[Enter]キーを押下する必要がある（1度目は漢字の確定）事が必要です。
一致する全ての文字列のセルが反転しますので、並んでいなくてもテーブルをスクロールすることで確認できます。もちろんSort後でも「検索」できます。

パソコン表示の場合、
テーブルの左端下部に浮動表示されるのクリックで
いつでも[___]内の検索文字入力の位置に戻ることができます。

並び替え_Sort

　に戻る

　Table_Topに戻る

cssで作る動きのあるWebサイト・デザイン

Design

3D Normal表示

3D Overflow表示

２D Normal表示

２D Overflow表示

ダークモード表示切替

3D表示比較

Overflow表示比較

2D表示比較

2D Overflow比較

実際のコンテンツ

操作してみてください

スライダ を操作してみてください。右下の「切替」でダークモードの切替

ソースコード Copyできます

HTML Source解説付き

コード枠にカーソルを置くと表示される アイコンのクリックでクリップボードにCopyできます。

<!-- Container1 -->
<div class="j_container_body">
<!-- Container2 -->
<div class="j_container_main"><!-- .j_container_mainタグは、ページの主要なコンテンツを表します。-->
<!-- Control:コントロールボックス➡️移動➡️j_header内へ -->
 <!-- Contents -->
 <div class="j_article"><!-- .j_articleタグは独立したコンテンツを表します。-->
  <!-- Header -->
  <div class="j_header">
   <!--装飾--> 
   <p class="j_h2"><span>Blog</span><span>List 「10」</span></p>
<p style="text-align: left;">
    <a href="https://xn--ecka7j.biz/" target="_blank" rel="noreferrer noopener"><i class="bi bi-align-top"></i>op Page</a>
</p>
    <!--Control--> 
    <div class="j_controls">
      <label for="dimension">3D化(斜め表示)</label><!--3Dチェックボックス-->
      <input type="checkbox" id="dimension" checked /><!--inputタグは、データ入力を受け取る。type属性で入力タイプ指定、id属性で要素を一意に識別 -->
      <label for="overflow">Overflow：表示</label><!-- オーバーフロー -->
      <input type="checkbox" id="overflow"/>
      <label for="speed">Speed(s)：看板速度</label><!-- スピードレンジスライダー -->
      <input type="range" min="7" step="1" max="30" value="22" id="speed22"/>
    </div>
  </div>
  <!--  -->
 <div class="j_window">
  <div class="j_scene">
   <!-- アイコンとテキストを含むグリッドリスト -->
   <ul class="j_grid01" style="list-style-type: none;">

<!-- Card01---------------- -->
<li class="j_li1"><div class="j_item">
<a href="https://xn--ecka7j.biz/toolboox/1800/">
 <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2022/05/sz6-1280-797-148-120x68.png" alt="Let's note sz6" />
 <p style="font-size: 16px;">５年前のパソコンでもWindows11は動くのか？ Let's note sz6 <b>i5-7200U</b>　　　　　　　　</p></a></div></li>
<!-- 02---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/security/99/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-wp2-640-400-53-120x68.jpg"  alt="" />
  <p style="font-size: 16px;">WordPress <b>脆弱性</b>とバージョン推移 v.6.x.x</p></a></div></li>
<!-- 03---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/3843/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2023/05/win11-07-120x68.gif"  alt=""  />
  <p style="font-size: 16px;"> Windows Update <b>いつまでも進まない時の</b>たった一つの対処方法</p></a></div></li>
<!-- 04---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/security/1242/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2022/09/WordPress-768-432_18.1mb-120x68.gif"   alt=""  />
  <p style="font-size: 16px;">使っちゃいけない<b>プラグイン</b> 146本＋ [発見次第更新]使ってはいけないWordPress Plugin</p></a></div></li>
<!-- 05---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/keyboard/6094/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2023/05/G913TKL-120x68.png"  alt=""  />
  <p style="font-size: 16px;"> G913TKL <b>字欠け</b>発生キートップ交換品依頼したら なんと新品のキーボードが送られてきた</p></a></div></li>
<!-- 06---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/windows11/9399/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2024/04/WindowsUpdate-KB5036893-1-120x68.png"   alt=""  />
  <p style="font-size: 16px;"> Windows 11 Update<b>月例</b> KB5036893 2024/04　　　　　　</p></a></div></li>
<!-- 07---------------- -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/trackball/6199/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2023/04/Slimblade_Pro-02-1200-0675-120x68.png"   alt=""  />
  <p style="font-size: 16px;">これぞ トラックボール <b>Slimblade Pro</b>この大玉は、他とは別物!　</p></a></div></li>
<!-- 08----------------  -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/security/452/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2020/03/plugin1-600-400-096-404-120x68.png"  alt=""  />
  <p style="font-size: 16px;">実験で分かった事xxx<b>プラグイン</b>は使ってはいけない　</p></a></div></li>
<!-- 09 -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/maneuver/6655/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2023/03/s4443_1200x675-1-120x68.jpg"   alt=""  />
  <p style="font-size: 16px;">330円リモコンでN700Sの車室内照明を自由に操作できる！<b>改造</b>プラレールで</p></a></div></li>
<!-- 10 -->
<li class="j_li1"><div class="j_item">
 <a href="https://xn--ecka7j.biz/toolboox/530/">
  <img width="90" height="50" src="https://xn--ecka7j.biz/wp-content/uploads/2022/04/00-md-1024-584-77-2-120x68.jpg"  alt=""  />
  <p style="font-size: 16px;">モバイルモニタを使って作業効率<b>42%アップ</b>（デスクトップで） </p></a></div></li>
<!-- Card end -->
   </ul>
  </div>
 </div>

<!-- 移動：Check-Box : ダークモード・テーマの切り替えを行うためのチェックボックス -->
<label for="theme"><!--labelタグは、フォームコントロールにラベルを付けるために使用され、for属性で指定されたIDを持つ要素に関連付ける-->
  <span class="sr-only">Toggle Theme</span>
  <input class="sr-only" type="checkbox" id="theme" /><!-- チェックボックスは、ページのテーマを切り替える為に使用。隠されたラベル(class="sr-only">)は、スクリーンリーダー用。-->
  <p style="font-size: 16px;">切替</p><!-- 以下のSVGは、チェックボックスのビジュアル表現として機能 -->
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
  <!-- SVG内のpath要素は、アイコンの異なる部分を表す -->
  <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"/>
  <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd"/>
  </svg>
 </label>
</div><!-- .j_article -->
</div><!-- .j_container_main -->
</div><!-- .j_container_body -->

Javascript Source解説付き

コード枠にカーソルを置くと表示される アイコンのクリックでクリップボードにCopyできます。

<script>
// レンジスライダー要素を取得: #speed22 IDを持つ要素（レンジスライダー）を取得して、    rangeSliderという変数に格納。
const rangeSlider = document.getElementById('speed22');
// スピード更新関数: speedUpdate 関数は、レンジスライダーの値が変更されたときに呼び出す。
const speedUpdate = () => {
// CSS変数(カスタムプロパティ)を更新: ‘−−speed‘というCSSカスタムプロパティ(変数)の値を、レンジスライダーの値に設定。
// ‘{rangeSlider.value}s` は、レンジスライダーの値と単位（秒）を組み合わせた文字列です。
document.documentElement.style.setProperty('--speed', `${rangeSlider.value}s`);
 };
// レンジスライダーの入力イベントリスナーを追加: レンジスライダーの入力イベントに対して、speedUpdate 関数をリスナーとして登録。
// ユーザーがスライダーを操作するたびに speedUpdate 関数が実行されます。
rangeSlider.addEventListener('input', speedUpdate);
</script>

CSS Source解説付き

コード枠にカーソルを置くと表示される アイコンのクリックでクリップボードにCopyできます。

<style>
/* フォント設定: @font-face でカスタムフォント “Geist Sans” を定義しウェブフォントとして読み込む */
@font-face {font-family: "Geist Sans"; src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");}
/* ボックスモデル: 全ての要素に box-sizing: border-box; を適用し、パディングとボーダーを要素の幅に含めるように設定 */
*,
*:after,
*:before {box-sizing: border-box;} /* 全ての要素のボックスサイジングをborder-boxに設定 */
/* カスタムプロパティ: :root にカスタムプロパティ（変数）を定義し、アニメーションの速度やトランジションの時間を管理 */
:root {
    --speed: 22s; /* カスタムプロパティspeedを10秒➡️16s➡️22sに設定変更 */
    --transition015: 0.15s; /* カスタムプロパティtransition:遷移を0.15秒に設定 */
}
/*
.j_h2を定義（h2の代用）サイトの他のh2に影響を及ばさない様にする */
.j_h2 {
    display: flex; /* フレックスコンテナとして要素を表示。子要素を横並びに配置 */
    gap: 0.25ch; /* 子要素間の隙間を指定 */
    font-size: clamp(1.5rem, 4cqi + 1rem, 3rem); /* フォントサイズを範囲内で可変に設定 */
    font-weight: 160; /* フォントの太さ */
    margin: 0; /*  */
    grid-column: 1 / -1; /* グリッドアイテムの列の範囲を指定 */
}
/*
.j_h2要素（h2要素の代用）の最後の子要素（span）に対してのスタイルを指定 */
.j_h2 span:last-of-type {
    display: inline-block; /* インラインブロック要素として表示 */
    background: linear-gradient(to right, rgb(0, 0, 255), rgb(0, 255, 255), rgb(0, 0, 255)) 0 0 / 400% 100% no-repeat;
    background-clip: text; /* テキストの範囲内に背景をクリップ */
    color: transparent; /* テキストの色を透明に設定 */
    animation: shade 4s infinite linear;}
@keyframes shade {  to {background-position: 100% 0;}}
/*
.j_container_body（ Container1）*/
.j_container_body {
  display: grid; /*.j_container_body要素をグリッドコンテナとして表示 */
  place-items: center; /* グリッドアイテムを中央に配置 */
  min-height: 100％;   /* 最小の高さをビューポートの100%に修正設定:min-height:100vh;➡️100％; */
  color: rgb(26, 26, 26);
  font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui; /* フォントファミリーを指定 */
  background-image: /* 背景画像を複数の放射状グラデーション指定 */
    radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.15) 0px, transparent 0%), 
    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.15) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.15) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.15) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(038, 60%, 74%, 0.15) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.15) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.15) 0px, transparent 50%);
  background-color: rgb(255, 255, 255);
  font-weight: 80;       /* フォントの太さ指定 */
  transition: background-color 0.25s, color 0.25s; /* 背景色と文字色の変化にトランジション:遷移を設定 */
}
/*
.j_container_main（ Container２）*/
.j_container_main {padding:2rem 0; width: 100%;}
/* ダークモード:root:has(#theme:checked) セレクタを使用してダークモードのスタイルを適用し、背景色やテキストの色を変更 */
/*
:root:has(#theme:checked)は、
      テーマがチェックされている場合にルート要素（<html>）と特定のクラス（.j_container_body、.j_controls、.j_item）にスタイルを適用 */
:root:has(#theme:checked) :is(.j_container_body,) {
    background-color: rgb(000,016,080); /* .j_container_bodyの背景色 */
    color: hsl(0 0% 100%);
}
:root:has(#theme:checked) :is( .j_controls, .j_item) {
    background-color: rgb(002,012,075); /* .j_controls, .j_itemの背景色を分離 */
    color: hsl(0 0% 100%);
    border-width: 1px 2px 2px 1px; /* 上|右|下|左 */
    border-color: rgb(015,126,250);  /* 枠の色 */
}
/* 　　　　　　　　　　　 .j_article要素に対して、テーマがチェックされている場合のスタイルを指定 */
:root:has(#theme:checked) .j_article {
    background-color: rgba(007,038,164,0.75); /* 中の枠の背景色 */
    color: rgb(255,255,255);
    border-width: 1px 3px 3px 1px; /* 上|右|下|左 */
    border-color: rgb(096,106,219); /* 枠の色 hsl(0 0% 25%); */
    box-shadow: 0 10px 20px -5px rgb(000,016,080);
}
/* 　　　　　　　　　　　 .j_itemクラスに対して、テーマがチェックされている場合の背景色を指定 */
:root:has(#theme:checked) .j_item {background-color: rgb(000,016,080);}
/* 　　　　　　　　　　 　li要素の疑似要素（::before）に対して、テーマがチェックされている場合の背景色を指定 */
:root:has(#theme:checked) li::before {background-color: rgb(000,016,080);}
/*
.j_headerクラスに対してのスタイルを指定 */
.j_header {
    display: grid; /* グリッドコンテナとして要素を表示 */
    grid-template: auto 1fr / 6fr 4fr; /* グリッドの行と列のテンプレートを指定 */
    gap: 1rem; /* グリッドアイテム間の隙間を指定 */
    margin-bottom: 2rem; /* 下側のマージンを指定 */
    transition: opacity 0.5s; /* 要素の不透明度の変化にトランジション:遷移を設定 */
}
/*
.j_article要素に対して、共通のスタイルを指定 */
.j_article {
    padding: 2rem;  /* paddingは内側の余白を指定 */
    margin: 0 auto; /* marginは外側の余白を指定 */
    width: 100%;
    box-shadow: 0 10px 20px -5px hsl(0 0% 50% / 0.5);
    border: 3px solid hsl(0 0% 90%); /* border: 1px solid */
    border-radius: 6px;  /*border-radius: 6px;*/
    background: rgb(255,255,255);
    resize: horizontal;
    overflow: hidden;
    max-width: min(calc(600px + 8rem), calc(100vw - 2rem));
    min-width: 340px;
    container-type: inline-size;
    transition: background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;
}
/*
.j_article要素内のa要素に対してのスタイルを指定 */
.j_article a {
    align-self: start;    /* 垂直方向の配置を開始位置に設定 */
    text-decoration: none; /* テキストの下線をなくす */
    justify-self: end;    /* 水平方向の配置を終了位置に設定 */
    border-radius: 10px;  /* ボーダーの角 border-radius: 100px;➡️10px;*/
    padding: 0.5rem 2rem;
    border: 0;
    color: rgb(255,255,255);
    font-weight: 120;
    cursor: pointer;
    background: linear-gradient(to right, rgb(000,000,255), rgb(000,255,255)) 0 0 / 200% 100% no-repeat;
    transition: background-position 0.15s;
}
/*
.j_article要素内のa要素がホバーされたりフォーカスされた場合のスタイルを指定。背景位置を右端に移動 */
.j_article a:is(:hover, :focus-visible) {background-position: 100% 0;}
/* 
p要素のマージンを0に設定。段落の上下の余白をなくす */
p {margin: 0;}
/*
.sr-onlyクラスに対してスクリーンリーダー向けのスタイルを指定。このクラスは画面上では見えないがスクリーンリーダーに読み上げられる要素 */
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}

/*
[for=theme]属性セレクタを使用してthemeというIDを持つ要素に対して   スタイルを指定。この要素はテーマ切り替えのためのコントロール */
[for=theme] {width:48px;aspect-ratio:1;position:fixed;bottom:1rem;right:1rem;display:grid;place-items:center;}

/*
[for=theme]属性セレクタの内部のsvg要素(ダークモード切替)に対して幅を75%に設定 */
[for=theme] svg {width:75%;}

/*
#themeがチェックされている場合に、
      それぞれの条件に応じてSVG内のパス要素の不透明度を設定 */

#theme + svg path:first-of-type,
#theme:checked + svg path:last-of-type {opacity: 0;}
#theme:checked + svg path:first-of-type {opacity: 1;}

/*
.j_controlsクラスに対して、スタイルを指定 */
.j_controls {
    display: grid; /* グリッドレイアウトを使用して要素を配置 */
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid rgb(230,230,230);
    border-radius: 6px;
    background: rgb(255,255,255);
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}
/*
labelとinput要素に対してアクセントカラーとカーソルのスタイルを指定 */
label,
input {accent-color: rgb(14, 248, 255); cursor: pointer;} /* #db2777;➡️rgb(14, 206, 255);➡️rgb(14, 248, 255); */
/*
.j_sceneクラスに対して、スタイルを指定 */
.j_scene {
    --buff: 3rem; /*--buffはカスタムプロパティでマスク境界を制御 */
    height: 100%;
    width: 100%;
    mask: /* maskは2つの線形グラデーションを使用してマスクを作成。1つは水平方向もう1つは垂直方向 */
        linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),
        linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
    mask-composite: intersect; /* intersect;はマスクの合成方法を指定。現在のマスクレイヤーとその下のマスクレイヤーとの重なり部分を表示 */
}

/* 　　#overflowがチェックされている場合.j_sceneクラスのマスクを解除 */
:root:has(#overflow:checked) .j_scene {mask: unset;}
/* 　　#overflowがチェックされている場合.j_windowクラスに対してアウトラインを追加 */
:root:has(#overflow:checked) .j_window {outline: 4px dashed rgb(0, 106, 255); }  /* #db2777;➡️rgb(0, 106, 255); */
/* 　　#overflowがチェックされている場合.j_headerクラスの不透明度を0.2に設定 */
:root:has(#overflow:checked) .j_header {opacity: 0.2;}
/*
:root要素が#dimensionがチェックされている場合.j_grid01クラスに対して--rotateカスタムプロパティを1に設定 */
:root:has(#dimension:checked) .j_grid01 {--rotate: 1;}

/* li 要素に対してのスタイルを指定:サイトの他のliに影響を及ばさない様にする */
.j_li1 {
    min-height: 60px;
    transform-style: preserve-3d;
    width: 100%;
    z-index: calc(1 + var(--active));
    list-style-type: none;
}
.j_li2 {list-style-type: none;} /*箇条書きのマーカーや数字を消す:none; */
/* li::before擬似要素に対してのスタイルを指定 */
.j_li1::before {
    content: "";  /* 擬似要素の内容を空に設定 */
    position: absolute;  /* 絶対位置に配置 */
    inset: 4px 4px -2px -2px;  /* 位置を指定➡️ */
    border-radius: 6px;  /* 角丸➡️ */
    background: rgba(0, 0,250, 0.22);
    filter: blur(calc(var(--active, 0) * 8px));
    z-index: -1;
    transition: scale var(--transition015), opacity var(--transition015), translate var(--transition015), filter var(--transition015);  /* 遷移のスタイルを指定 */
    transform-origin: 50% 0;  /* 変形の原点を指定 */
    scale: 1 calc(1 + (var(--active, 0) * 0.05)); /* スケールを設定 */
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 250, 0.1), 0 2px 4px -2px rgba(0, 0, 250, 0.21);  /* ➡️ */
  box-shadow: 0 0 rgba(0, 0,250, 0.1), 0 0 rgba(0, 0, 250, 0.21), var(--tw-shadow); /*#0000,➡️rgba(0, 0, 250, 0.21);*/
}

/*
.j_windowクラスに対して、高さ、幅、アウトライン、トランジションなどのスタイルを指定 */
.j_window {
   height: 250px;  /* height:250px;➡️350px;➡️400px;➡️250px; */
   container-type: inline-size; /* コンテナのタイプを指定 */
   transform-style: preserve-3d;  /* 3D変換のスタイルを指定 */
   width: 100%;
   outline: 4px dashed transparent; /* 要素のアウトラインを指定 */
   transition: outline 0.5s; /* トランジション:遷移のスタイルを指定*/
}

/*
.j_grid01クラスは、Cardの枠：グリッドのスタイルを指定 */
.j_grid01 {
    --count: 5; /* --countはカスタムプロパティで、アイテムの縦の数を制御 */
    --inset: 0; /* --insetと--outsetはアニメーションのオフセットを制御 */
    --outset: 2.5;
    height: 100%; /* ➡️ .j_itemも、100%; */
    width: 100%;
    margin: 0;
    list-style-type: none; /* 箇条書きのマーカーや数字を消す:none; or 二桁の数字:decimal-leading-zero; */
    position: relative;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr; /* grid-template-columnsはグリッドの列のテンプレートを指定 */
    gap: 0 2rem;     /* gapはグリッドアイテム間の隙間を指定 */
    transition: transform 0.5s; /* トランジション:遷移のスタイルを指定 */
    transform:       /* transformは3D変換を指定 */
        rotateX(calc(var(--rotate, 0) * 20deg))
        rotateZ(calc(var(--rotate, 0) * -20deg))
        skewX(calc(var(--rotate, 0) * 20deg));
}
/*
.j_grid01クラス内のli要素がホバーされた場合、アニメーションの再生状態を一時停止 */
.j_grid01:hover li {animation-play-state: paused;}

/*
.j_grid01クラスに対して、スタイルを指定 */
.j_grid01 {transform-style: preserve-3d; gap: 1rem;} /* gap:グリッドアイテム間の隙間指定 */

/*
.j_itemクラスは、Cardスタイルを指定 */
.j_item {
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    color: hsl(0 0% 10%);
    border-radius: 6px;   /* border-radius: 6px; */
    cursor: pointer;      /* カーソルをポインターに変更 */
    display: flex;       /* フレックスコンテナとして要素を表示 */
    gap: 1rem;            /* 子要素間の隙間を指定 */
    height: 100%;        /* height:100%;➡️.j_grid01も、100%; */
    justify-content: start; /* アイテムを開始位置に配置 */
    overflow: hidden;      /* 要素のオーバーフローを制御 */
    align-items: left;   /* align-items:center;アイテムを中央揃配置➡️ */
    text-align: left;    /* center;➡️left; */
    width: 100%;
    transition: transform var(--transition015), scale var(--transition015), background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;
    scale: calc(1 + (var(--active, 0) * 0.05));  /*scaleはスケールを設定*/
    transform: translate3d(0, 0, calc(var(--active, 0) * 24px));  /* transformは3D変換を指定*/
    float: left;   /* 画像に回り込む文字 add */
    clear:both;  /* float: left;属性の次はclearの記述は使用しないと画面内容が崩れやすい */
}
.j_item img {
    float: left;  /* 画像に回り込む文字 img部分は要別定義 add */
    clear:both;   /* float: left;属性の次はclearの記述は使用しないと画面内容が崩れやすい */
    padding-right: 2px; /*  7px; add➡️ */
    margin-left: -25px; /* -17px; add➡️ */
}

/*
li:nth-of-type(n:10枚のCard)は、兄弟要素の中で指定された型（タグ名）のn番目の要素を選択。
                     --indexはカスタムプロパティで要素の位置を指定 */
li:nth-of-type(01) { --index: 0; }
li:nth-of-type(02) { --index: 0; }
li:nth-of-type(03) { --index: 1; }
li:nth-of-type(04) { --index: 1; }
li:nth-of-type(05) { --index: 2; }
li:nth-of-type(06) { --index: 2; }
li:nth-of-type(07) { --index: 3; }
li:nth-of-type(08) { --index: 3; }
li:nth-of-type(09) { --index: 4; }
li:nth-of-type(10) { --index: 4; }

/*
@container (width < 400px)は、ウィンドウの幅が400px未満の場合に適用されるメディアクエリ。
  .j_grid01クラスに対してグリッドのテンプレートを指定。
  --countはカスタムプロパティでアイテムの数を制御。
  --durationと--delayはアニメーションの時間と遅延を制御 */
@container (width < 400px) {
    .j_header {grid-template: auto 1fr / 1fr;  }
    .j_header a {justify-self: start;  }
    .j_grid01 {--count: 10; --inset: 0; --outset: 3; grid-template-columns: 1fr; }
    li:nth-of-type(01) { --index: 0; }
    li:nth-of-type(02) { --index: 1; }
    li:nth-of-type(03) { --index: 2; }
    li:nth-of-type(04) { --index: 3; }
    li:nth-of-type(05) { --index: 4; }
    li:nth-of-type(06) { --index: 5; }
    li:nth-of-type(07) { --index: 6; }
    li:nth-of-type(08) { --index: 7; }
    li:nth-of-type(09) { --index: 8; }
    li:nth-of-type(10) { --index: 9; }

    li {--duration: calc(var(--speed) * 1); /* @mediaと同じスピードに変更--duration:calc(var(--speed) * 2);➡️ */
        --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8)); }
}

@keyframes slide {100% {translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));}}

/*
@media(prefers-reduced-motion: no-preference)は、ユーザがアニメーションを好むかどうかをチェックするメディアクエリ */
@media(prefers-reduced-motion: no-preference) {
    .j_grid01 {gap: 0 2rem;}

    li {--duration: calc(var(--speed) * 1);
        --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
        animation: slide var(--duration) var(--delay) infinite linear;
        translate: 0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%); }

        li:hover {--active: 1;}

    @container (width < 400px) {
        li {--duration: calc(var(--speed) * 2);
            --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));  }
    }
}
</style>

「ローディングスピナー」状態とは、　👈こんな状態。
このブログを読んでくださっている、あなたも、ご経験がありますか？

VDSL

　2017/11に田舎の戸建て（フレッツ光の戸建てタイプ(高速ネット接続)）から、引っ越してきて光回線なのにマンションタイプ(VDSL)になって、回線速度は大幅に減速(1桁減った）。
光回線と言っても、グラスファイバーはMDFまでで、今でも施工年の古いマンションでは、MDFから宅内配線は昔ながらの銅線(メタル電話線)なのでVDSLが主流。

ひと月前位から

ルーター Aterm WG2600HP3は、24時間電源onの状態で6年目。
そろそろ寿命かも？との思いもあり、どうせ入れ替えるなら、新しい規格のIEEE802.11ax(Wi-Fi６対応）のものが良い。
かねてからNEC製を信頼していたので、
Aterm AM-AX7800T8（IEEE802.11ax/ac/n/a/g/b）を購入

ルーター交換

それでも

と、いうことは、ルーターの前の機器（通称VDSLモデム）が原因か？

VDSL宅内装置

そこでVDSL宅内装置に着目。

• これは2017/12/02より使用。これも24時間電源onの状態で7年目に突入なので、こちらも寿命か？（怪しい･･･）。
• レンタル品なので、より新しい規格品に交換してもらえたら良いなという思いから、ネットで情報検索するも新しいものを見つけることができなかった。
• 唯一同じ様な名称で、（VH-100「２」E「S」）が見つかったが規格を見る限り（VH-100「4」E「S」）よりも古い様である。

BardはGeminiに統合され進化したけど

VDSL宅内装置の後継機をGeminiに聞く

以下のGemini画面(回答)のキャプチャは、いずれもエビデンスとしての役割の為、添付しているものです。　尚、現時点でGeminiとのやり取りは履歴で残されていて、いつでも呼び出せる形になっています（Geminiの利用が増えて容量を圧迫して履歴を残さない様にならないことを望むばかりです。）

NTT VH-100[4]e[s]の製品仕様と性能(通信速度など)を教えてください。またこれの後継機で性能が上のものはありますか？

NTT VH-100[4]e[s]は、NTT東日本・西日本が提供していたVDSLモデムです。最大下り100Mbps、最大上り25Mbpsの通信速度に対応していました。

後継機として、以下の製品が発売されています。

• NTT VH-100[4]e[n]：最大下り100Mbps、最大上り50Mbpsに対応。IPv6 IPoE接続にも対応。
• NTT VH-300[4]e[n]：最大下り300Mbps、最大上り100Mbpsに対応。IPv6 IPoE接続にも対応。

これらの製品は、VH-100[4]e[s]よりも通信速度が向上しており、IPv6 IPoE接続にも対応しています。

以下に、VH-100[4]e[s]と後継機の製品仕様と性能を比較します。

Gemini

Geminiの回答で一番気になったのは「VH-100[4]e[s]はIPv6 IPoE接続に非対応」と回答していることです。確か2022年頃にこの機種のままIPv6に変更(ぷららに申請)して、今まで使ってきているし、ぷららからNTT VH-100[4]e[n]への機種変更もないし、まさか回線が不安定なのはこれが原因？

VH-100[4]e[s]の仕様をGeminiに再確認

NTT VH-100[4]e[s]は、IPv6 IPoE接続 非対応ですか？

はい、NTT VH-100[4]e[s]はIPv6 IPoE接続非対応です。

NTT VH-100[4]e[s]は、2014年に発売されたVDSLモデムです。当時はIPv6 IPoE接続サービスは提供されておらず、そのため、NTT VH-100[4]e[s]はIPv6 IPoE接続に対応していません。

IPv6 IPoE接続を利用したい場合は、NTT VH-100[4]e[n]またはVH-300[4]e[n]などの後継機が必要です。

NTT VH-100[4]e[n]およびVH-300[4]e[n]の主な違い

Gemini

• 確かに、2014年当時はIPv6接続は無かった。
• 2017年に引っ越してきた時点ではIPv4接続だった。
• しかし記憶が定かではないのだが2年ほど前の2022年にIPv6方式を申請してそのままVH-100[4]e[s]を使い続けている（ぷららからレンタルのVDSL宅内装置の交換もない）
• 私がVH-100[4]e[s]を使い始めたのは2017までに仕様変更があったのではなかろうか？

Geminiに再確認　VH-100[4]e[s]

そして、VH-100[4]e[s]を再確認したら発売日がおかしい情報も提示された。

VH-100[4]e[s]は、2018年2月に発売され、現在も販売されており･･･
➡2018年2月に発売はありえない。
「現在も販売されており」は、いいんだが別の回答では「販売終了」となっている。情報の正確性に欠ける。
さらに、
「NTT VH-100[4]e[s]の後継機種について、NTT東日本とNTT西日本に確認したところ、現時点で正式な後継機は発売されていないとのことです。」
・・・それでは、VH-300[4]e[n]などの仕様情報はどこから入手したのか、結局Geminiは確証も無い情報を、さも事実の様に開示すると、いう事なのか？
「VH-300[4]e[n]という型番のモデムは存在しないとのことですので、NTT側からの案内に誤りがあった可能性があります。」
とは・・・。
この質問に対する回答も、
いつ確認したのか･･･・
NTT側の案内に誤りなあった可能性･･･、も相互に矛盾を含んでいる様に思えます。
　いやはや･･･NTT側からの案内って何だ？NTTのせいか？本当に確認している？とは思えないのは私だけでしょうか？

更に、VH-100[4]e[s]の発売日に納得がいかないのでGeminiに問うと

謝罪と、驚くべきことに「2017年12月２日に発売」･･･だと、なんと設置当日発売に修正???

NTTぷららに確認

この時点で、ぷららに確認、ネットが不調なこと、ルーターを新しいものに代えても改善しないこと、そこでVDSL宅内装置も7年目でずっと使い続けていることから寿命ではないか？それで交換してもらいたい。できれば新しい仕様でと申し入れをしました。

ぷららからの連絡

後日、ぷららから連絡があり

回路試験（？）で障害がある様で、問題がVDSL宅内装置だけのものか、VDSL集合装置(コンセントレータ)に障害があるのかは、NTT側でしか判断できないので、NTTの故障担当から後日連絡とのこと「VDSL宅内装置」だけの問題ならレンタルモデム故障機器担当の方から「VDSL宅内装置」の交換据え付け訪問または、配送だけでお客様での取り換え・故障品の着払い返送手続きとなるとのこと

光配線／メタル配線

残念ながら、当マンションは光配線方式の装置は併設されていない

NTTから連絡待ち

ここで、NTTからの連絡待ちということで、「VDSL宅内装置」の問題？は中断

Geminiに聞いたVDSLモデム仕様一覧

NTT東日本に聞いた

NTT東日本レンタルモデム故障担当に代替品を聞いた

• VH-100[4]E[s]とVH-100[4]E[n]は、性能(速度・IPv6対応など、ブリッジモードは「s」を使っているので[n]も無し)は同じで、提供ベンダが異なるだけ（S:住友、ｎ：NEC）で、VH-100[4]E[S]が販売終了でもなく、代替機もこれになるとのこと
• VH-100[4]E以外は存在しないもの、ここ10数年来後継機種の発表は無い。

従ってVH-200[4]e[s]とVH-300[4]e[s]は存在しない。Geminiはいったいどこからこの情報（型番・仕様）を持ってきたのやら？

代替品到着待ち

結局、NTTから代替品のVH-100[4]E[S]が送られてくることとなった。

ギガタイプを探す

• まぼろしの「NTT VH-４00[4]e[n]」に代わるものはないか？
• もっとマンションタイプで早いものはないか
• 場合によってはISP変更も含めて、
• より早いサービスを検索

G.fast

G.fastは、2014年に制定で、決して新しいものではないが、

G.fast構成

提供エリア

郵便番号または、固定電話番号から住所を取得し、次のマンション一覧から場所を選択することで、So-net 光 (auひかり)を利用できるかが分かります。（マンションV16がVDSL対応可、マンションG16がG.fast対応可）

VDSL/G.fastをGiminiに聞く

NTTのWebサイトで調べる

まとめ

VDSLより高規格回線の見込み

ISPぷららの対応

その後、暫く様子を見ることとなり。
　その上で、改善が見込まれない場合は、再度NTTぷららのサービスに問い合わせてみて欲しいとのこと（この後、別の記事を執筆する予定です）。

ネット接続が不安定(切断･遅延･待機)な時にやるべきこと➡宅内装置交換依頼＆その後

YoutubeのBGMが途切れたり、サイト接続がDNS・IPアドレスが見つからない等で繋がらなかったり、Wi-Fi接続も不安定(IPv6接続がIPv4接続より遅くなったり)の時にやるべきこと。（ルーターを変える前に）レンタルのVDSL装置を...

イイネ.biz

2025.08.14

結論