なぜ「6.9」直後のアップデートは危険？

• 初版に付き物の「初期バグ」: メジャーアップデート直後は、世界中で予期せぬ不具合が報告される「人柱」期間。
• 今回懸念したリスク: 6.9で導入された新しいスクリプト読み込み最適化と、既存のキャッシュプラグイン（WP Fastest Cache等）との競合リスクについて。

満を持して登場した「6.9.1」での改善点

• 49件の修正という安心感: 致命的なCPU負荷問題や、エディターの挙動不審が解消された「枯れたバージョン」としての魅力。
• メンテナンスリリースの重要性: 「新機能」ではなく「安定性」を重視するユーザーにとっての6.9.1の立ち位置。

【実録】Cocoon × WordPress 6.9.1 導入レポート

検証環境のスペック: PHP 8.3、テーマCocoon 2.9.0.1での挙動。

環境情報は以下です。
----------------------------------------------
サイト名：Webサイトに必要なことと道具
サイトURL：https://xn--ecka7j.biz
ホームURL：https://xn--ecka7j.biz
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/silk/style.css
WordPressバージョン：6.8.3
PHPバージョン：8.3.21
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.0.1
カテゴリー数：20
タグ数：92
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：14543 バイト
functions.phpサイズ：1861 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：5
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp-content/uploads/2020/02/ogt-512-512-024-068.png
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
Advanced Custom Fields 6.7.0
Aurora Heatmap 1.7.1
EWWW Image Optimizer 8.3.1
Query Monitor 3.20.2
Regenerate Thumbnails 3.1.6
SiteGuard WP Plugin 1.7.9
Site Kit by Google 1.171.0
SlimStat Analytics 5.3.5
SVG Support 2.5.14
UpdraftPlus - Backup/Restore 1.26.1
Wordfence Security 8.1.4
WP-Optimize - Clean, Compress, Cache 4.4.1
WPCode Lite 2.3.3
WP Consent API 2.0.0
WP Fastest Cache 1.4.6
WP Multibyte Patch 2.9.3
WP Statistics 14.16
XO Security 3.10.8
----------------------------------------------

アップデートの手順:

1. UpdraftPlusでの完全バックアップ
2. 6.9.1への一気上げ
3. キャッシュプラグインとCocoon側のキャッシュ再生成

結果:

慎重派が教える「アップデート後に必ず見るべき3箇所」

• ウィジェットとカスタマイザー: 6.9系の変更が影響しやすい場所。
• お問い合わせフォームの送信テスト: システムメール周りの修正が入ったため必須。
• モバイル表示のチェック: CSS最適化によるレイアウト崩れがないか。

まとめ：安定こそが最大のSEO

新機能を追うことも大切ですが、個人ブログやビジネスサイトにとって最も大切なのは「止まらないこと」です。6.9.1へのアップデートは、そのバランスが取れたベストなタイミングでした。

「WP Fastest Cache」利用者のためのアップデート直後チェック

1. 全キャッシュの完全削除（必須）

2. 「CSSの縮小・結合」設定の一時的な見直し

• CSSの縮小 (Minify CSS): 一度チェックを外して改善するか確認。
• CSSの結合 (Combine CSS): 6.9の「オンデマンド読み込み」と最も競合しやすい項目です。崩れがある場合はオフにしてください。

3. ログインユーザーへのキャッシュ非表示設定

• ログインユーザー (Logged-in Users): 「ログインユーザーに対してキャッシュを表示しない」設定。
• これにより、ログイン中の自分だけは常に最新の（キャッシュされていない）状態を確認でき、不具合の切り分けが容易になります。

4. モバイル表示の個別確認

プラグインの整合性

Top

　Plugin互換性予測

　Table-topに戻る

v 6.9.1バグフィックスまとめ

BugFix-Top

　WordPress 6.9.1 BugFix

　仕方ないと思いつつ・・・アイキャッチや広告を含むものをそのまま上からコピーした結果、余計なもの（キャプション、「PR表記」や「広告」といった文言）を含むプレーンテキストで、そのままペーストする形で提供。

結果は驚くべきものだった。

余計なものを読み飛ばして、（的確な文面の理解をした上で、まるで会話する様に）評価・採点、改善案まで瞬時に提示してくれた。

あなただったら15,000文字以上もあって、なんの飾りもない文書を何分で読めるでしょうか？　理解・評価して、改善案を出すとしたら・・・いったい何分必要になるでしょうか？・・・それくらい衝撃を受けた結果だったのです。

今までも、いろいろな局面でGeminiを利用してきましたが、自身の記事の評価依頼という切り口は初めてでした。

そしてその結末に感動すら覚え、新たな可能性（Geminiの汎用性）を感じ、このBlogを書こうと思ついた。 ここから、詳細に顛末をお伝えしたいと思います（お伝え出来たらと思います。

Geminiを利用

いよいよ、Geminiとの会話を通じて、この謎を解き明かす旅が始まります。

Q1～Q6が問いかけで、A1～A6がそれぞれGeminiからの回答です。（実際の記事では、このBlogの様にそれぞれメリハリをつける飾りを付けています）

URLで提示してみた

　過去に、コードチェックの依頼で、Geminiに公開ページのURLを求められたことがあったので、記事のURL提示で解析してもらえると考えた

想定外の返答に･･･

意外な返答に対して質問をする

仕方ないのか

　仕方ないかなと思いつつ、ハテどうするか、記事をそのままコピペすると何のメリハリもないプレーンテキストになるし、余計な「広告」なども含まれるし･･･と思いつつ、アクセス制限は後回しで、制約事項を確認しなければと、

はて、テキストでか！

コピペで行くしかないか、余分な情報も含まれるし、画像は無理でキャプションも含まれてしまうだろうし、何より何のメリハリもないプレーンテキストを理解してくれるだろうか・・・

記事を表示してテキスト貼り付けの準備をします。

Blogの最初の部分のキャプチャ画像

ブログの先頭（タイトル）から最後（まとめ）までをコピーしました。

Q4:単にコピペで提供

とはいえ、他に手っ取り早い方法を思いつかない。これがGeminiで理解できなければ、余分な部分をカットして再度ペーストすれば良いと思い結局

Geminiから驚きの回答がある

評価の確認と訂正

Geminiに期待

まとめ

生成AIの回答を100%使わなくても良いんです。ご自分が有効だと感じられた部分だけ利用すればよいのです。

頼みの綱として生成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アニメーションの可能性を最大限に引き出し、目を奪うような3Dエフェクトを作成してみましょう。

Code欄に👍(カーソル)を置くことで現れる、のクリックでクリップボードにCopyできます。

Cube 00

静止状態のCube。実定義は３面(３Face)のみ
背景色は、HTML側でbackground-color:で指定

Cube 00 HTML

<div class="container0317">
 <section style="background-color:aqua;">
  <cube0317>
   <face0317 class="left--0317"></face0317>
   <face0317 class="top---0317"></face0317>
   <face0317 class="right-0317"></face0317>
  </cube0317>
 </section>
</div> 

Cube 00 css

.container0317{
    height: 60vh;           /* height: 100vh; */
    margin: 0;              /* デフォルトのmarginを削除 */
  /*overflow: hidden;  スクロールバーを非表示 */
    display: flex;          /* フレックスボックスレイアウト */
    flex-direction: column; /* .container0317内でCubeを横に並べる場合は、ここをコメントアウト */  
}
section {
  flex: 1;                  /* 残りのスペースを埋める */
  display: flex;            /* フレックスボックスレイアウト */
  justify-content: center;  /* 水平方向中央揃え */
  align-items: center;      /* 垂直方向中央揃え */
  pointer-events: none;     /* マウスイベントを無効化 */
  overflow: hidden;         /* コンテンツがはみ出さないようにする */
}
cube0317 {
    position: relative;
    width:  30vmin; /* width:  45vmin; 幅をビューポートの最小サイズに基づいて設定 */
    height: 30vmin; /* height: 45vmin; 高さをビューポートの最小サイズに基づいて設定 */  
    transform: rotateX(-45deg) rotateY(45deg);  /* 立方体を回転 */
    transform-origin: 50% 50% -22.5vmin;        /* 回転の中心を設定 */
    transform-style: preserve-3d;               /* 3D変形を保持 */
}
face0317 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;                          /* 親要素いっぱいに広げる */
    background-blend-mode: multiply;    /* 背景の合成モード */
    border: 2px solid;                  /* 境界線を表示 border: 5px solid;  */
    box-sizing: border-box;             /* ボーダーを含めてサイズ計算 */
    animation: rainbow-border05s 05s linear infinite; } /* 虹色の境界線アニメーション */
@keyframes     rainbow-border05s {
    0%  {border-image: radial-gradient(to right,red,orange,yellow,green,blue,indigo,violet) 1; }
    100%{border-image: radial-gradient(to right,violet,indigo,blue,green,yellow,orange,red) 1; }
}
/*CSS グラデーションは <gradient> データ型で表現され、 2 つ以上の色の間の連続的な変化から成る <image> の特殊型です。
    グラデーションは 3 種類から選択することができます。
    線形 (linear) (linear-gradient() 関数によって生成)、
    放射 (radial) (radial-gradient() 関数によって生成)、
    扇形 (conic) (conic-gradient() 関数によって生成) の 3 種類です。 
    repeating-linear-gradient(), 
    repeating-radial-gradient(), 
    repeating-conic-gradient() の各関数によって、反復グラデーションを生成することもできます。*/

Cube 00′

静止状態のCube。実定義は３面(３Face)のみ
背景色は、cssのClassで指定
３Faceの定義は、Cube 00と同じ、しかも<cube0317>以降の定義も同じなのに、
Cube面のグラデーションの色合いが異なる。
その理由は、以下のcss定義の違いを参照してください。

Cube 00′ HTML

<div class="container0317">    
 <section class="dark0317">
  <cube0317>
   <face0317 class="left--0317"></face0317>
   <face0317 class="top---0317"></face0317>
   <face0317 class="right-0317"></face0317>
  </cube0317>
 </section>
</div>

Cube 00′ css

既出のcss分は、省略しています。

.dark0317 {
    background:darkblue;
}
.dark0317 face0317 {
    background-blend-mode: screen;    /* 背景の合成モード */
    background-color: #10027d;      /* 背景色 */
}
.dark0317 face0317.left0317  {
    background-image: linear-gradient(transparent, #00f), linear-gradient(90deg, transparent, #f00);}
.dark0317 face0317.top0317   {
    background-image: linear-gradient(transparent, #f00), linear-gradient(90deg, transparent, #0f0);}
.dark0317 face0317.right0317 {
    background-image: linear-gradient(transparent, #00f), linear-gradient(90deg, transparent, #0f0);}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    cube0317 {width:  60vmin; height: 60vmin; } }
@media screen and (max-width: 480px) {
    cube0317 {width:  70vmin; height: 70vmin; } } /* width:  80vmin; */ /* height: 80vmin; */

Cube 1

Front Back Right Left Top Bottom　背景色虹色：主に線形linear-gradient

Cube 1 HTML

<div class="container0317">
 <div style="color:blue;background-color:aqua;"> Front Back Right Left Top Bottom　背景色虹色：主に線形linear-gradient</div>   
 <section style="background-color:blue;">
  <div class="rotate_cj031g cube_cj031g">
   <div class="front-031g">Front</div>
   <div class="back--031g">Back</div>
   <div class="right-031g">Right</div>
   <div class="left--031g">Left</div>
   <div class="top---031g">Top</div>
   <div class="bottom031g">Bottom</div>
  </div>
 </section>
</div> 

Cube 1 css

既出のcss分は、省略しています。

.rotate_cj031g {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_cj031g32s 32s linear infinite alternate; 
}
@keyframes    rotate_cj031g32s { 
	0%  {transform:rotateX( 360deg) rotateY(-270deg) rotateZ(-180deg);} 
	100%{transform:rotateX(-180deg) rotateY( 180deg) rotateZ( 360deg);} }
.cube_cj031g {
    margin:50px; 
    width: 300px; 
    height:300px; 
    position:relative; 
    transform-style:preserve-3d; 
    transform:rotateX(-25deg) rotateY(-25deg);  }
.cube_cj031g div  {
    width:  98%; /* 100%で隙間無し */
    height: 98%; /* 100%で隙間無し */ 
    position:absolute; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#FFF; 
    font-size: 35px;
}
.cube_cj031g .front-031g { 
    background:  conic-gradient(violet, indigo, blue, green, yellow, orange, red); 
    transform: translateZ(150px); }
.cube_cj031g .back--031g {    
    background: conic-gradient(red, orange, yellow, green, blue, indigo, violet); 
    transform: rotateY(180deg) translateZ(150px); }
.cube_cj031g .right-031g {   
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet); 
    transform: rotateY(90deg) translateZ(150px); }
.cube_cj031g .left--031g {   
    background: linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red); 
    transform: rotateY(-90deg) translateZ(150px); }
.cube_cj031g .top---031g {    
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet); 
    transform: rotateX(90deg) translateZ(150px); }
.cube_cj031g .bottom031g {      
    background: linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red); 
    transform: rotateX(-90deg) translateZ(150px); }

Cube 2

Front Back Right Left Top Bottom　背景色虹色：扇形conic-gradient

Cube 2 HTML

<div class="container0317">
<div style="color:blue;background-color:aqua;"> Front Back Right Left Top Bottom　背景色虹色：扇形conic-gradient</div> 
 <section style="background-color:blue;">
  <div class="rotate_cj031g2 cube_cj031g2">
   <div class="front-031g2">Front</div>
   <div class="back--031g2">Back</div>
   <div class="right-031g2">Right</div>
   <div class="left--031g2">Left</div>
   <div class="top---031g2">Top</div>
   <div class="bottom031g2">Bottom</div>
  </div>
 </section>
</div> 

Cube 2 css

既出のcss分は、省略しています。

.rotate_cj031g2 {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_cj031g232s 32s linear infinite alternate; }
@keyframes    rotate_cj031g232s { 
    0%  {transform:rotateX( 360deg) rotateY(-270deg) rotateZ(-180deg);} 
    100%{transform:rotateX(-180deg) rotateY( 180deg) rotateZ( 360deg);} }
    
.cube_cj031g2 {
    margin:50px; 
    width: 290px; /*width: 300px;*/
    height:290px; /*height:300px;*/ 
    position:relative; 
    transform-style:preserve-3d; 
    transform:rotateX(-25deg) rotateY(-25deg); }
.cube_cj031g2 div  {
    width:  95%; /* 100%で隙間無し */
    height: 95%; /* 100%で隙間無し */ 
    position:absolute; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#FFF; 
    font-size: 35px; }

.cube_cj031g2 .front-031g2 {
    background:  conic-gradient(violet, indigo, blue, green, yellow, orange, red); 
    transform: translateZ(150px);
    border: 17px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 02s linear infinite; /* 虹色の境界線アニメーション */ }

   @keyframes  rainbow-border031g00s {
    0% { border-image: conic-gradient(red,orange,yellow,green,blue,indigo,violet) 1;}
    100% { border-image: conic-gradient(violet,indigo,blue,green,yellow,orange,red) 1;} }

.cube_cj031g2 .back--031g2 {
    background: conic-gradient(red,orange,yellow,green,blue,indigo,violet); 
    transform: rotateY(180deg) translateZ(150px);
    border: 17px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 01s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g2 .right-031g2 {
    background: conic-gradient(red,orange,yellow,green,blue,indigo,violet); 
    transform: rotateY(90deg) translateZ(150px);
  border: 17px solid; /* 境界線を表示 border: 5px solid;  */
  border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 02s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g2 .left--031g2 {
    background: conic-gradient(violet,indigo,blue,green,yellow,orange,red); 
    transform: rotateY(-90deg) translateZ(150px);
   border: 17px solid; /* 境界線を表示 border: 5px solid;  */
   border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 01s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g2 .top---031g2 {
    border-radius:50%;
    background: conic-gradient(red,orange,yellow,green,blue,indigo,violet); 
    transform: rotateX(90deg) translateZ(150px);
  border: 17px solid; /* 境界線を表示 border: 5px solid;  */
  border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 02s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g2 .bottom031g2 {
    background: conic-gradient(violet,indigo,blue,green,yellow,orange,red); 
    transform: rotateX(-90deg) translateZ(150px);
  border: 17px solid; /* 境界線を表示 border: 5px solid;  */
  border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g00s 01s linear infinite; } /* 虹色の境界線アニメーション */

Cube 3

Cube面の文字数によってborderサイズ、borderのアニメーション速度を指定

Cube 3 HTML

<div class="container0317">
<div style="color:blue;background-color:aqua;">Cube面の文字数によってborderサイズ、borderのアニメーション速度を指定</div> 
 <section style="background-color:blue;">
 <div class="rotate_cj031g2 cube_cj031g3">
  <div class="front-031g2"><p class="text_rainbow">Front</p></div>
  <div class="back--031g2"><p class="text_rainbow">Back</p></div>
  <div class="right-031g2"><p class="text_rainbow">Right</p></div>
  <div class="left--031g2"><p class="text_rainbow">Left</p></div>
  <div class="top---031g2"><p class="text_rainbow">Top</p></div>
  <div class="bottom031g2"><p class="text_rainbow">Bottom</p></div>
 </div>
</section>
</div> 

Cube 3 css

既出のcss分は、省略しています。

.cube_cj031g3 {
    margin:50px; 
    width: 300px; /*width: 300px;*/
    height:300px; /*height:300px;*/ 
    position:relative; 
    transform-style:preserve-3d; 
    transform:rotateX(-25deg) rotateY(-25deg); }
.cube_cj031g3 div  {
    width:  99%; 
    height: 99%; 
    position:absolute; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#FFF; 
    font-size: 35px; }
.cube_cj031g3 .front-031g2 {
    transform: translateZ(150px);
    border: 77px solid; /* 境界線を表示 border: 5px solid;➡17px➡➡  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 3.5s linear infinite; /* 虹色の境界線アニメーション */ 
}
   @keyframes  rainbow-border031g200s {
    0%   {border-image:conic-gradient(red,orange,yellow,green,blue,indigo,violet) 1; }
    100% {border-image:conic-gradient(violet,indigo,blue,green,yellow,orange,red) 1; } }
.cube_cj031g3 .back--031g2 {
    transform: rotateY(180deg) translateZ(150px);
    border: 77px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 3.5s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g3 .right-031g2 {
    transform: rotateY(90deg) translateZ(150px);
    border: 57px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 2.5s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g3 .left--031g2 {
    transform: rotateY(-90deg) translateZ(150px);
    border: 77px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 3.5s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g3 .top---031g2 {
    transform: rotateX(90deg) translateZ(150px);
    border: 97px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 4.5s linear infinite; } /* 虹色の境界線アニメーション */
.cube_cj031g3 .bottom031g2 {
    transform: rotateX(-90deg) translateZ(150px);
    border: 47px solid; /* 境界線を表示 border: 5px solid;  */
    border-radius:50%;
    box-sizing: border-box; /* bボーダーを含めてサイズ計算 */
    animation: rainbow-border031g200s 2.0s linear infinite; } /* 虹色の境界線アニメーション */
/* ============================================================ */
.text_rainbow {
    width:      100%;
    color: transparent; /**/
    text-align: center;
    font-weight: bolder;
    font-size: larger;
    -webkit-background-clip: text;
    background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
    animation : rainbow_10s 10s linear infinite; }
  @keyframes    rainbow_10s {
      0% { background-position: 0 0 }
    100% { background-position: 600px 0px } }
  /* -webkit-が無いと、虹色グラデーションにみになる 2022/01/10 */

Cube 4

Cube 4 HTML

<div class="container0317">
<section style="background-color: blue;">
  <div class="rotate_dj0318b cube_dj0318b">
   <div class="face0318b front-0318b">01</div>
   <div class="face0318b back--0318b">02</div>
   <div class="face0318b right-0318b">03</div>
   <div class="face0318b left--0318b">04</div>
   <div class="face0318b top---0318b">05</div>
   <div class="face0318b bottom0318b">06</div>
  </div>
 </section>
</div>

Cube 4 css

既出のcss分は、省略しています。

.rotate_dj0318b {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_dj0318b08s 08s linear infinite; }
   @keyframes rotate_dj0318b08s { 
    0%  {transform:rotateX(0) rotateY(0);} 
    100%{transform:rotateX(-360deg) rotateY(360deg);} }

.cube_dj0318b    {
    width: 280px; /* add */
    height:280px; /* add */ 
    position:relative; 
    margin:15px; 
    transform-style:preserve-3d; 
    transform:rotateX(25deg) rotateY(25deg) ; }

.face0318b   {
    width:  95%; /* chg width: 100%;*/
    height: 95%; /* chg height:100%;*/ 
    position:absolute; 
    font-size:55px; /*45px;*/
    font-weight:900; 
    color:#fff; 
    text-align:center; 
    backface-visibility:inherit; }
.front-0318b  {
    background:rgba(128,128,000,0.75); 
    color:rgba(255,127,127,1.0); 
    transform:                translateZ(140px);}
.back--0318b   {
    background:rgba(000,255,000,0.75); 
    color: rgba(255,127,255,1.0); 
    transform:rotateY(180deg) translateZ(140px);}
.right-0318b  {
    background:rgba(000,000,255,0.75); 
    color: rgba(127,127,255,1.0); 
    transform:rotateY( 90deg) translateZ(140px);}
.left--0318b   {
    background:rgba(000,255,255,0.75); 
    color: rgba(255,255,255,1.0); 
    transform:rotateY(-90deg) translateZ(140px);}
.top---0318b    {
    background:rgba(255,255,000,0.75); 
    color: rgb(255,251,003); 
    transform:rotateX( 90deg) translateZ(140px);}
.bottom0318b {
    background:rgba(128,000,128,0.75); 
    color: rgba(255,191,127,1.0); 
    transform:rotateX(-90deg) translateZ(140px);}

Cube 5

Fr Ba Ri Le To Bo 背景色半透明

Cube 5 HTML

<div class="container0317">
<div style="color:blue;background-color:aqua;"> Fr Ba Ri Le To Bo 背景色半透明</div>    
 <section style="background-color:blue;">
  <div class="rotate_dj031g cube_dj031g">
   <div>Fr</div>
   <div>Ba</div>
   <div>Ri</div>
   <div>Le</div>
   <div>To</div>
   <div>Bo</div>
  </div>
 </section>
</div> 

Cube 5 css

既出のcss分は、省略しています。

.rotate_dj031g {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_dj031g08s 08s linear infinite; 
}
@keyframes    rotate_dj031g08s {
     0%  {transform:rotateX( 180deg) rotateY(-180deg);} 
     100%{transform:rotateX(-180deg) rotateY(180deg);} 
}
.cube_dj031g     {
    width: 110px; /* 背景無し40px;chg 110px;Cube ➡ 120px;＃ */
    height:110px; /* 背景無し40px;chg 110px;Cube ➡ 120px;＃ */ 
    position:relative; 
    margin:15px; 
    transform-style:preserve-3d; 
    transform:rotateX(25deg) rotateY(25deg) ; }
    .cube_dj031g div {
    width:  100%; 
    height: 100%; 
    position:absolute; 
    display:flex; 
    justify-content:center;
    align-items:center;
    color:#FFF;
    font-size:100px;
    font-weight:900;}
.cube_dj031g div:nth-child(1){color:rgba(255,127,127,1.0);background-color:rgba(192,192,192,0.5);transform:                 translateZ(60px);}
.cube_dj031g div:nth-child(2){color:rgba(255,127,255,1.0);background-color:rgba(000,255,000,0.5);transform: rotateY(180deg) translateZ(60px);}
.cube_dj031g div:nth-child(3){color:rgba(127,127,255,1.0);background-color:rgba(255,000,000,0.5);transform: rotateY( 90deg) translateZ(60px);}
.cube_dj031g div:nth-child(4){color:rgba(127,255,255,1.0);background-color:rgba(000,255,255,0.5);transform: rotateY(-90deg) translateZ(60px);}
.cube_dj031g div:nth-child(5){color:rgba(191,255,127,1.0);background-color:rgba(255,255,000,0.5);transform: rotateX( 90deg) translateZ(60px);}
.cube_dj031g div:nth-child(6){color:rgba(255,191,127,1.0);background-color:rgba(255,000,255,0.5);transform: rotateX(-90deg) translateZ(60px);}

Cube 6

Cube in Cube

Cube 6 HTML

<div class="container0317">
 <div style="color:bleu;background-color:aqua;"><b>Cube in Cube</b></div>
 <section style="background-color:blue;">
<div class="rotate_cj cube_cj">
   <div>11</div>
   <div>12</div>
   <div>13</div>
   <div>14</div>
   <div>15</div>
   <div>16</div>
    <div class="rotate_dj cube_dj">
     <div>01</div>
     <div>02</div>
     <div>03</div>
     <div>04</div>
     <div>05</div>
     <div>06</div>
    </div>
  </div> 
 </section>
</div>

Cube 6 css

既出のcss分は、省略しています。

.rotate_cj {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_cj32s 32s linear infinite alternate; }
   @keyframes rotate_cj32s {
     0%   {transform:rotateX(0) rotateY(0);} 
     100% {transform:rotateX(-360deg) rotateY(360deg);} }
.cube_cj      {
    margin:50px; 
    width: 300px; 
    height:300px; 
    position:relative; 
    transform-style:preserve-3d; 
    transform:rotateX(-25deg) rotateY(-25deg) ; }

.cube_cj div  {
    width: 70%; 
    height: 70%; 
    position:absolute; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    color:#FFF; 
    font-size: 35px; }

.cube_cj div:nth-child(1) {background-color:rgba(255,127,127,0.4) ; transform:                translateZ(107px); }
.cube_cj div:nth-child(2) {background-color:rgba(255,127,255,0.4) ; transform:rotateY(180deg) translateZ(107px); }
.cube_cj div:nth-child(3) {background-color:rgba(127,127,255,0.4) ; transform:rotateY( 90deg) translateZ(107px); }
.cube_cj div:nth-child(4) {background-color:rgba(127,255,255,0.4) ; transform:rotateY(-90deg) translateZ(107px); }
.cube_cj div:nth-child(5) {background-color:rgba(191,255,127,0.4) ; transform:rotateX( 90deg) translateZ(107px); }
.cube_cj div:nth-child(6) {background-color:rgba(255,191,127,0.4) ; transform:rotateX(-90deg) translateZ(107px); } 
/* ============================================================ */
.rotate_dj {
    display:flex; 
    flex-wrap:wrap; 
    animation:rotate_dj08s 08s linear infinite;
}
@keyframes    rotate_dj08s { 
    0%  {transform:rotateX(0) rotateY(0);} 
    100%{transform:rotateX(-360deg) rotateY(360deg);} 
}
.cube_dj     {
    width: 40px; /*  */
    height:40px; /*  */
    position:relative; 
    margin:15px; 
    transform-style:preserve-3d; 
    transform:rotateX(25deg) rotateY(25deg) ; }
.cube_dj div {
    width:  45%; 
    height: 45%; 
    position:absolute; 
    display:flex; 
    justify-content:center;
    align-items:center;
    color:#FFF;
    font-size:100px;
    font-weight:900;}

.cube_dj div:nth-child(1) {
    color:rgba(255,127,127,1.0); 
    background-color:rgba(192,192,192,0.5) ; 
    transform:                 translateZ(60px); }
.cube_dj div:nth-child(2) {
    color:rgba(255,127,255,1.0); 
    background-color:rgba(000,255,000,0.5) ; 
    transform: rotateY(180deg) translateZ(60px); }
.cube_dj div:nth-child(3) {
    color:rgba(127,127,255,1.0); 
    background-color:rgba(255,000,000,0.5) ; 
    transform: rotateY( 90deg) translateZ(60px); }
.cube_dj div:nth-child(4) {
    color:rgba(127,255,255,1.0); 
    background-color:rgba(000,255,255,0.5) ; 
    transform: rotateY(-90deg) translateZ(60px); }
.cube_dj div:nth-child(5) {
    color:rgba(191,255,127,1.0); 
    background-color:rgba(255,255,000,0.5) ; 
    transform: rotateX( 90deg) translateZ(60px); }
.cube_dj div:nth-child(6) {
    color:rgba(255,191,127,1.0); 
    background-color:rgba(255,000,255,0.5) ; 
    transform: rotateX(-90deg) translateZ(60px); }

Cube 7

Cube毎の、回転速度、サイズ、透明度 Cube in Cube in Cube

Cube 7 HTML

<div style="color:blue;background-color: aqua;">Cube毎の、回転速度、サイズ、透明度
<br>.L_Cube_1 {--duration:32s; --size:280; --opacity:0.25;}
<br>.M_Cube_2 {--duration:16s; --size:140; --opacity:0.50;}
<br>.S_Cube_3 {--duration: 4s; --size: 75; --opacity:1.00;}</div>
<div class="container0317">
<section style="background-color:blue;">
<div class="rotate_cube L_Cube_1">
 <div class="face0318a front-0318a">1</div>
 <div class="face0318a back--0318a">2</div>
 <div class="face0318a right-0318a">3</div>
 <div class="face0318a left--0318a">4</div>
 <div class="face0318a top---0318a">5</div>
 <div class="face0318a bottom0318a">6</div>
 <div class="rotate_cube M_Cube_2">
  <div class="face0318a front-0318a">a1</div>
  <div class="face0318a back--0318a">b2</div>
  <div class="face0318a right-0318a">c3</div>
  <div class="face0318a left--0318a">d4</div>
  <div class="face0318a top---0318a">e5</div>
  <div class="face0318a bottom0318a">f6</div>
  <div class="rotate_cube S_Cube_3">
   <div class="face0318a front-0318a">31</div>
   <div class="face0318a back--0318a">32</div>
   <div class="face0318a right-0318a">33</div>
   <div class="face0318a left--0318a">34</div>
   <div class="face0318a top---0318a">35</div>
   <div class="face0318a bottom0318a">36</div>
  </div>
 </div>
</div>
</section>
</div>

Cube 7 css

既出のcss分は、省略しています。

.rotate_cube {
    position:relative; 
    transform-style:preserve-3d;
    top:calc(var(--size) / 2 * 1px);  /*各Cubeの--sizeの半分の上部余白*/
    left:calc(var(--size) / 2 * 1px); /*各Cubeの--sizeの半分の左側余白*/
    width:calc(var(--size) * 1px);    /*各Cubeの--size*1pxの幅 */
    height:calc(var(--size) * 1px);   /*各Cubeの--size*1pxの高さ*/
    animation:rotate--duration var(--duration) linear infinite; } /*各Cubeの回転速度--durationの値 */
@keyframes    rotate--duration {
    0%  {transform:rotateX(0) rotateY(0);} 
    100%{transform:rotateX(-360deg) rotateY(360deg);} 
}
/* Cube毎の、回転速度、サイズ、透明度 */
.L_Cube_1 {--duration:32s;--size:280;--opacity:0.25; top:0;left:0;}/*L_Cubeの変数(速度,サイズ,透明度)と余白*/
.M_Cube_2 {--duration:16s;--size:140;--opacity:0.50; }             /*M_Cubeの変数(速度,サイズ,透明度)*/
.S_Cube_3 {--duration: 4s;--size: 75;--opacity:1.00; }             /*S_Cubeの変数(速度,サイズ,透明度)*/
/* Cube-face */
.face0318a   {
    width: 100%; 
    height:100%; 
    position:absolute; 
    font-size:45px; 
    font-weight:900; 
    color:#fff; 
    text-align:center; 
    backface-visibility:inherit; 
}
/* 
.L_Cube_1{--opacity:0.25;--size:280;},
.M_Cube_2{--opacity:0.40;--size:140;},
.S_Cube_3{--opacity:1.00;--size: 75;} */
.front-0318a {
    background:rgba(128,128,000,var(--opacity)); 
    color:rgba(255,127,127,1.0); 
    transform:                translateZ(calc(var(--size) / 2 * 1px)); }
.back--0318a {
    background:rgba(000,255,000,var(--opacity)); 
    color:rgba(255,127,255,1.0); 
    transform:rotateY(180deg) translateZ(calc(var(--size) / 2 * 1px)); }
.right-0318a {
    background:rgba(000,000,255,var(--opacity)); 
    color:rgba(127,127,255,1.0); 
    transform:rotateY( 90deg) translateZ(calc(var(--size) / 2 * 1px)); }
.left--0318a {
    background:rgba(000,255,255,var(--opacity)); 
    color:rgba(127,255,255,1.0); 
    transform:rotateY(-90deg) translateZ(calc(var(--size) / 2 * 1px)); }
.top---0318a {
    background:rgba(255,255,000,var(--opacity)); 
    color:rgba(191,255,127,1.0); 
    transform:rotateX( 90deg) translateZ(calc(var(--size) / 2 * 1px)); }
.bottom0318a {
    background:rgba(128,000,128,var(--opacity)); 
    color:rgba(255,191,127,1.0); 
    transform:rotateX(-90deg) translateZ(calc(var(--size) / 2 * 1px)); }

Cube 8

■❏■□ ■❏■□ ■❏■□ ■❏■□ ■❏■□ ■❏■□ ■❏■□

今回は、<div>タグに「contenteditable」を使用し、配下のコンテナ内に配置したカード内のテキストを編集できる様にしました。
カードで隠された背景画像を、表示／非表示にする為に、
カード上のテキストを「DEL」キーや「Back Space」キーで削除したり、
「F5」キーで再表示できる様にした「デザイン」の「デモ」表示です。

Code欄に👍(カーソル)を置くことで現れる、のクリックでクリップボードにCopyできます。

編集できる

Editable:1

水辺の鳥たち

背景画像付きコンテナに、半透明カード

背景画像は、
D7000 + TAMRON 大口径望遠ズームレンズ(SP 70-300mm F4-5.6 Di VC USD)で、橋の真上から撮影した翡翠です。
カードのテキストは、編集できます。

HTML 1

HTMLは、のクリックでクリップボードにCopyできます。

<div class="container-kawasemi">  
 <!--　　　                  　contenteditable グローバル属性は、ユーザーによる要素の編集が可能にする列挙型属性です。 -->
 <div class='card_transparent' contenteditable>翡翠 カワセミ<br>Kawasemi<br>Kingfisher<br>　　</div>
</div>

CSS 1

cssは、のクリックでクリップボードにCopyできます。

例示している.cssは、各プロパティ部分に/**/で、解説を入れています。

/* カワセミ・コンテナ */
.container-kawasemi {
  min-height: 100%; /*要素最小高を親要素の高さの100%に。コンテンツが少ない場合に要素が縮みすぎるのを防ぐ*/
  height: 100vh;    /*要素高をビューポート高さの100%に設定。画面全体を覆う要素を作成する際に使用*/
  box-sizing: border-box;
  display: grid;    /* グリッドレイアウトを適用 */
  place-items: center; /* グリッドアイテムを中央に配置（垂直方向と水平方向） */
  place-content: center;
  /* グリッドコンテナ内のコンテンツを中央に配置（垂直方向と水平方向）。コンテナ内に余白がある場合に有効 add */
  grid-gap: 1.75em; /* グリッドアイテム間のギャップを設定 */
/*grid-template-columns: repeat(auto-fit, Min(100%, 10em)); 下の指定に変更 */
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 
/*列のテンプレートを設定（自動フィット、最小幅10em、最大幅1fr） 
  repeat(auto-fit, ...): 列の数を自動的に調整。auto-fitは、空のトラックを削除。
  minmax(10em, 1fr): 各列の最小幅を10em、最大幅を1fr（利用可能なスペースの1単位）に設定。
  これにより、レスポンシブな列配置を実現。*/

  font: 300 clamp(.875em, 5vw, 2.5em) saira, sans-serif;
/* フォント設定: 300: フォントの太さを300に設定。
    clamp(.875em, 5vw, 2.5em): フォントサイズを可変に。
    最小サイズを0.875em、推奨サイズを5vw（ビューポート幅の5%）、最大サイズを2.5emに設定。
    saira, sans-serif: フォントファミリーを「saira」に設定、代替フォント「sans-serif」を指定。*/  
  color: #dedede;   /* #fff;真っ白でなく */
  text-align: center; /* テキストを中央揃え */
  text-wrap: balance; /*  テキストの折り返しを調整し、よりバランスの取れた表示に */
  text-shadow: 1px 1px 2px; 
/* テキストに影を設定。影の水平方向のオフセットを1px、垂直方向のオフセットを1px、ぼかしを2pxに設定 */
/* 背景の設定 background: #1d031f;*/
  background-blend-mode: multiply;
/*background-blend-mode: multiply;: 背景画像のブレンドモードを「乗算」に設定。
  これにより、背景画像と背景色が組み合わさって表示される。*/
  background: url(https://xn--ecka7j.biz/wp-content/uploads/2025/03/kawasemi-1450-773-432kb.jpg) 50% 50% /cover transparent;
/*url(...): 背景画像のURLを指定。
  背景画像の水平/垂直方向の位置を50%/50%に設定。
  cover: 背景画像が要素全体をカバーするように拡大縮小。
  transparent: 背景色を透明に設定。*/
  background-repeat: no-repeat; /*画像を繰り返さないように*/
}	

/* クラス.card_transparent */
.card_transparent {
  /* 疑似要素を絶対配置するために必要 */
  position: relative; /* 相対配置を基準にする */
  max-width: 15em;    /* 最大幅を15emに設定 コンテンツや親要素のレイアウトで寸法が与えられない場合にのみ寸法を設定 */
  aspect-ratio: 3/2;  /* アスペクト比を3:2に設定 */
  border: solid 16px rgba(0,0,250,0.0350); /* 境界線を設定し、透明度を与える 透明にしてスペースを確保するだけ */
  padding: 0.75em;    /* 境界線とテキストの間にスペースを設ける */
  border-radius: 1em; /* 角を丸くする */
  background: rgba(0,120,255,0.25313);
  /* 半透明の背景色を設定し、透明なストップを持つグラデーションも可能 */
  /* 疑似要素のレイヤーを光彩にする */
  z-index: 10;        /* 背景よりも大きい値を設定 */
  display: flex;      /* フレックスボックスを使用 */
  flex-direction: column; /* 垂直方向に要素を配置 */
}

.card_transparent::before, 
.card_transparent::after {
  /* ボックス全体を完全に覆う */
 --full: conic-gradient(red 0 0); /* 完全な円錐グラデーションを定義 */
 /* グリッドは、積み重ねられたアイテムがテキストノードの場合、積み重ねには機能しない */
 position: absolute;      /* 絶対配置にする */
 /* 境界線の幅と同じ値でマイナスにする */
 inset: -6px;             /* 親要素の境界線から内側に配置 */
 /* 親要素のボックスモデルと角の丸みを継承 */
 border: inherit;         /* 親要素の境界線を継承 */
 border-radius: inherit;  /* 親要素の角の丸みを継承 */
 /* 光彩のためにクリップされないスペースを確保 */
 box-shadow: 0 0 6em rgba(0, 0, 0, 0.001); /* 影を設定し、光彩効果を出す */
 background: conic-gradient(from var(--alpha), #f94144, #f3722c, #f8961e, #f9844a, #f9c74f, #90be6d, #43aa8b, #4d908e, #277da1, #577590, #f94144) border-box;
 /* 円錐グラデーションの背景を設定し、アニメーションの開始角度をカスタムプロパティ--alphaから取得 */
 /* パディングボックスをノークリップボックスから減算して、パディングボックス内のすべてを透明にする */
 mask: var(--full) no-clip subtract, var(--full) padding-box; /* マスクを設定し、内側を透明にする */
 /* テキストの選択を妨げないようにする */
 pointer-events: none;  /* ポインターイベントを無効にする */
                        /* グラデーションの開始角度をアニメーション化 */
 content: "";           /* 疑似要素に内容を設定しない */
 animation: alpha4s 4s linear infinite;/* アニメーションを適用し、4秒ごとに線形で無限に繰り返す */
}

@keyframes   alpha4s {
 to {--alpha: 1turn ; } /* アニメーションの終了時に--alphaを1回転させる */
}

/* カスタムプロパティ--alphaを登録し、アニメーション可能にする */
@property --alpha {
  syntax: "<angle>";    /* 値の型を角度に指定 */
  initial-value: 0deg;  /* 初期値を0度にする */
                        /* 疑似要素でのみ使用され、継承されないようにする */
  inherits: false;      /* 継承を無効化し、パフォーマンスを向上させる */
}

.card_transparent::after {
  filter: blur(2em); /* ぼかしフィルターを適用し、光彩効果を強調 */
}

Editable:2

水辺の鳥たち2

絶妙のシャッターチャンスでした。

何が隠れている？➡テキストは編集できます。➡テキストを編集して隠れているものを確認できます。
テキストを「DEL」キーで削除するか、←「Back Space」キーを押すことで、背景が現れます。
「F5」キーで元の表示に戻ります。

HTML 2

<div class="container-jyoubitaki">
 <div class="rounded_corners3" contenteditable>ジョウビタキ
  <div class="rounded_corners2" contenteditable>jyoubitaki............................./
   <div class="rounded_corners1" contenteditable>Daurian<br>redstart</div>
  </div>
 </div>
</div>

CSS 2

cssは、のクリックでクリップボードにCopyできます。

/* ジョウビタキ・コンテナ */
.container-jyoubitaki {
  min-height: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  place-content: center;
  grid-gap: 1.75em;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 
  font: 300 clamp(.875em, 5vw, 2.5em) saira, sans-serif; 
  color: #dedede;
  text-align: center;
  text-wrap: balance;
  text-shadow: 1px 1px 2px;
  background-blend-mode: multiply;
  background: url(https://xn--ecka7j.biz/wp-content/uploads/2025/03/jyoubitaki-1450-976-328KB.jpg) 55%/cover transparent;
}	

/* クラス.rounded_corners1 */
.rounded_corners1 {
	--list1: rgba(255,188,0,0.55), rgba(255,0,88,0.05);
  /* カスタムプロパティ--list1(orange&red)を定義し、グラデーションの色リストを設定 */
	--grad1: linear-gradient(45deg, var(--list1)); 
  /* カスタムプロパティ--gradを定義し、45度の線形グラデーションを設定。--list1の値を参照 */
	position: relative; /* 相対配置を設定し、疑似要素の絶対配置の基準にする */
	border: solid 4px #0000;/* 透明な4pxの境界線を設定。スペース確保用 */
	aspect-ratio: 7/ 10; /* アスペクト比を7:10に設定 */
	border-radius: 1em; /* 角を1emで丸くする */

/* conic-gradient円錐グラデーションをpadding-boxに設定し、背景のベースにする */
/* カスタムプロパティ--gradの線形グラデーションをborder-boxに設定し、境界線部分の背景にする */
	background: conic-gradient(rgba(2, 74, 243, 0.29) 0 0) padding-box,var(--grad1) border-box; 
	&:nth-child(2) { --list1: #03a9f4, #ff0058 } 
           /* 2番目の.box要素にのみ適用  --listの値を上書きし、別のグラデーション色を設定 */
	&:nth-child(3) { --list1: #4dff03, #00d0ff } 
           /* 3番目の.box要素にのみ適用 --listの値を上書きし、別のグラデーション色を設定 */
	/* 疑似要素::beforeにスタイルを適用 */
	&::before {
		position: absolute;       /* 絶対配置を設定 */
		inset: 0;                 /* 親要素のpadding-box全体を覆うように配置 */
		z-index: -1;              /* 親要素よりも背面に配置 */
		background: var(--grad1);  /* 背景にカスタムプロパティ--grad1のグラデーションを設定 */
		filter: blur(.75em);      /* 0.75emのぼかしフィルターを適用し、光彩効果を出す */
		content: "";              /* 疑似要素の内容を空にする */
	}
}

/* クラス.rounded_corners2 */
.rounded_corners2 {
	--list2: rgba(0,255,255,0.55), rgba(0,0,255,0.05);
	--grad2: linear-gradient(45deg, var(--list2)); 
	position: relative; 
	border: solid 4px #0000;
	aspect-ratio: 7/ 10;
	border-radius: 1em;
	background: conic-gradient(rgba(2,74,243,0.29) 0 0) padding-box,
		var(--grad2) border-box;
	&:nth-child(2) { --list2: #03a9f4, #ff0058 }
	&:nth-child(3) { --list2: #4dff03, #00d0ff } 
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--grad2);
		filter: blur(.75em);
		content: ""; 
	}
}

/* クラス.rounded_corners3 */
.rounded_corners3 {
	--list3: rgba(0,255,0,0.55), rgba(0,128,0,0.05);
	--grad3: linear-gradient(45deg, var(--list3));
	position: relative;
	border: solid 4px #0000;
	aspect-ratio: 7/ 10;
	border-radius: 1em;
	background: conic-gradient(rgba(2, 74, 243, 0.29) 0 0) padding-box,var(--grad3) border-box;
	&:nth-child(2) { --list3: #03a9f4, #ff0058 }
	&:nth-child(3) { --list3: #4dff03, #00d0ff }
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--grad3);
		filter: blur(.75em);
		content: "";
	}
}

Editable:3

ズームレンズで撮影したシオカラトンボ

編集できます。➡テキストを削除して透き通ったトンボの羽根を見てみませんか？

dragonfly

HTML 3

HTMLは、のクリックでクリップボードにCopyできます。

<div class="container-ShiokaraTonbo">
 <div class="rounded_corners2" contenteditable>シオカラトンボ ･･････････････････････････････</div>
</div>

CSS 3

cssは、のクリックでクリップボードにCopyできます。

(CSS 2)で既に定義済のものは省略しています。

/* シオカラトンボ・コンテナ */
.container-ShiokaraTonbo {
  min-height: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  place-content: center;
  grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); 
  font: 300 clamp(.875em, 5vw, 2.5em) saira, sans-serif; 
  color: #dedede;
  text-align: center;
  text-wrap: balance;
  text-shadow: 1px 1px 2px;
  background-blend-mode: multiply;
  background: url(https://xn--ecka7j.biz/wp-content/uploads/2025/03/Dragonfly-1450-960-664kb.jpg) 55%/cover transparent;
}

ハイライト

ブロックテーマにさらなるデザインオプション

• カラーやフォントのセットを作成して、1つのテーマでデザインの組み合わせを増やすことができます。デザインの可能性を広げ、サイトの幅広いスタイルガイドラインの中で視覚的な多様性を可能にします。

サイトエディタで新ページレイアウトによるワークフローの簡素化

• サイトエディターの新しいサイドバイサイドレイアウトで、すべてのページと、選択したページのプレビューを確認できます。

安心のプラグイン自動更新

• プラグインの自動更新の利便性と、何か問題が発生した際のロールバックの安心感を同時に享受できます。サイトに新しいレベルのセキュリティを確保しつつ、利用可能になるたびに機能は拡張されます。その実現には時間も帯域幅もほとんど必要ありません。

同期パターンのコンテンツのカスタマイズ

• 全体で一貫したスタイルを維持しながら、同期パターンの各インスタンスでコンテンツを変更できます。コンテンツの上書きは、同期パターン内の見出し、段落、ボタン、画像ブロックに対して設定できます。

パフォーマンス

• WordPress 6.6では、冗長な WP_Theme_JSON 呼び出しの削除、大きなオプションの自動ロードの無効化、不要な polyfill 依存の削除など、重要な更新が行われました。その他のハイライトには、投稿の埋め込みの遅延読み込み、新しい data-wp-on-async ディレクティブ、エディター内のテンプレートの読み込み全体で約35%の速度向上、などがあります。

アクセシビリティ

• このリリースにはアクセシビリティに関する58件の修正と機能強化が含まれています。これらは WordPress 体験の根本部分に焦点を当てており、特に新しいサイト編集体験を提供するデータビューコンポーネントや、ブロックやパターンの操作で重要な手段を提供するインサーターのような領域に重点を置いています。

WordPress 6.6 の新機能

デザインとレイアウト

パブリッシングと編集

• 洗練されたパブリッシュフロー: パブリッシュ時の重要な情報が強調され、編集するすべての要素に対して標準化されたインスペクタが表示されます。
• クラシックテーマのモダンなパターン管理: クラシックテーマでもサイトエディタのパターン機能が利用できるようになり、パターンをより機能的でモダンに管理・作成できます。
• ブロックグループのスタイル設定: テーマ作成者はブロックのセクション用のスタイルオプションをパッケージ化し、ユーザーが美しい統一感のあるデザインと柔軟性を追加できるようにすることができます。
• カスタムフィールドの編集: ブロックバインディングAPIを使用してカスタムフィールドを持つ接続されたブロックを作成し、後でエディタ内で直接カスタムフィールドを編集できます。
• 編集ショートカット: 選択したブロックをグループ化するには⌘G（Mac）またはCtrl+G（Windows）、リストアイテムをインデントするにはTabキーを使用できます。

開発者向け

• 統一された拡張性API: wp.editorグローバル変数の下で利用可能なスロットにより、エディタ間で拡張機能を統合できます。

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>

3D

hoop:輪っか

輪っか：正転

<div class="main_wrapper_sj">
 <div class="sphere_wrapper_sjy">
  <img alt decoding="async" class="img-300_sj" src="/wp-content/uploads/2021/12/circle_900-900-12.png">
 </div>
</div>

<style type="text/css">
.img-300_sj { width: 300px;}

.main_wrapper_sj {
  display:flex;
  position:relative;
  transform-style:preserve-3d;
  perspective:300px;
  left:0;top:0;bottom:0;right:0;
  align-items: center;  justify-content: center;
}
.sphere_wrapper_sjy {
  transform-style:preserve-3d;
  width:300px;height:300px;
  position:relative;
  animation:rotate3d_10sjy 10s linear infinite; }
 @keyframes rotate3d_10sjy {
  0%   {transform: rotateX(0) rotateY(0); }
  100% {transform: rotateX(0) rotateY(360deg); }
}
</style>

疑似球体に近づける

輪っかを疑似球体に近づける為に回転させる為に、複数の輪っかを15度毎に配置して回転を付けました。（Y軸：0～360）

輪っかの反転

輪っかの周りに簡単な飾りをつけて、X軸：0～-360deg、Y軸：０～360degで、反転させています。

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

15度・75度・135度で交差

概要

輪っか3枚の画像を60度で交差させ反転させて
輪っかの内外周には、飾りを設けRainbow表示をさせています。
この部分のSource Codeの内容は、それぞれ下の　部分で公開しています。
➡ Codeエリアのマウスホバーで アイコンが表示されます。この アイコン　クリックでSourceをクリップボードにコピーできます。

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

・●●◎〇

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

_____

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

｜｜｜｜｜

Source 公開

HTML Source

概要に戻る

上記回転図形と内容(HTML ＆ CSS)を少し変更しています。

<div class="background_custom9 pt_x">

<div class="main_wrapper_xy">
  <div class="sphere_wrapper_xy">
    <div class="plane_xy plane_01"><!--15度-->
      <img alt decoding="async" class="img-300_xy" src="https://xn--ecka7j.biz/wp-content/uploads/2021/12/circle_900-900-12.png">
      <div class="spoke_xy spoke_01"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_02"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_03"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_04"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_05"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_06"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_07"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_08"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_09"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_10"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_11"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_12"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_13"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_14"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_15"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_16"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_17"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_18"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_19"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_20"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_21"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_22"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_23"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_24"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_25"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_26"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_27"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_28"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_29"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_30"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_31"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_32"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_33"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_34"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_35"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_36"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
    </div>
    <div class="plane_xy plane_05"><!--75度-->
      <img alt decoding="async" class="img-300_xy" src="https://xn--ecka7j.biz/wp-content/uploads/2021/12/circle_900-900-12.png">
      <div class="spoke_xy spoke_01"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_02"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_03"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_04"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_05"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_06"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_07"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_08"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_09"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_10"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_11"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_12"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_13"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_14"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_15"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_16"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_17"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_18"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_19"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_20"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_21"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_22"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_23"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_24"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_25"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_26"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_27"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_28"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_29"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_30"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_31"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_32"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_33"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_34"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_35"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_36"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
    </div>
    <div class="plane_xy plane_09"><!--135度-->
      <img alt decoding="async" class="img-300_xy" src="https://xn--ecka7j.biz/wp-content/uploads/2021/12/circle_900-900-12.png">
      <div class="spoke_xy spoke_01"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_02"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_03"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_04"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_05"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_06"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_07"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_08"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_09"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_10"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_11"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_12"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_13"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_14"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_15"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_16"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_17"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_18"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_19"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_20"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_21"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_22"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_23"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_24"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_25"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_26"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_27"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_28"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_29"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_30"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_31"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_32"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_33"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_34"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_35"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_36"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
    </div>
  </div>
</div>
<div>
<p class="text_3x Rainbow_t">
  <i class="bi bi-filetype-css"></i>  CSSでDesign</p>
</div>

</div>

.css Source

概要に戻る

<style>
.background_custom9 {

      color: white;
      background-color: #1111b2;
      font-size: 1.5em;
}
.pt_x {
  padding-top:100px;
  margin-left: 10px;
  }

.img-300_xy {width:300px; height:300px;}

.main_wrapper_xy {
  display:flex;
  position:relative;
  transform-style:preserve-3d;
  perspective:300px;
  left:0;top:0;bottom:0;right:0;
  align-items: center;  justify-content: center;}

.plane_xy{
  position:absolute;
   transform-style:preserve-3d;
   top:0; right:0; bottom:0; left: 0; }

.plane_xy.plane_01 { transform: rotateY(15deg);}
.plane_xy.plane_02 { transform: rotateY(30deg);}
.plane_xy.plane_03 { transform: rotateY(45deg);}
.plane_xy.plane_04 { transform: rotateY(60deg);}
.plane_xy.plane_05 { transform: rotateY(75deg);}
.plane_xy.plane_06 { transform: rotateY(90deg);}
.plane_xy.plane_07 { transform: rotateY(105deg);}
.plane_xy.plane_08 { transform: rotateY(120deg);}
.plane_xy.plane_09 { transform: rotateY(135deg);}
.plane_xy.plane_10 { transform: rotateY(150deg);}
.plane_xy.plane_11 { transform: rotateY(165deg);}
.plane_xy.plane_12 { transform: rotateY(180deg);}

.spoke_xy{
  transform-origin: 0% 0%;
  transform-style:preserve-3d;
  position:absolute;
  color: rgba(127, 255, 255, 0.5);  /*水色*/
  left:  50%;  top: 50%;  height:150px;  width: 0px;
}
.spoke_xy.spoke_01 { transform: rotateZ(10deg);}
.spoke_xy.spoke_02 { transform: rotateZ(20deg);}
.spoke_xy.spoke_03 { transform: rotateZ(30deg);}
.spoke_xy.spoke_04 { transform: rotateZ(40deg);}
.spoke_xy.spoke_05 { transform: rotateZ(50deg);}
.spoke_xy.spoke_06 { transform: rotateZ(60deg);}
.spoke_xy.spoke_07 { transform: rotateZ(70deg);}
.spoke_xy.spoke_08 { transform: rotateZ(80deg);}
.spoke_xy.spoke_09 { transform: rotateZ(90deg);}
.spoke_xy.spoke_10 { transform: rotateZ(100deg);}
.spoke_xy.spoke_11 { transform: rotateZ(110deg);}
.spoke_xy.spoke_12 { transform: rotateZ(120deg);}
.spoke_xy.spoke_13 { transform: rotateZ(130deg);}
.spoke_xy.spoke_14 { transform: rotateZ(140deg);}
.spoke_xy.spoke_15 { transform: rotateZ(150deg);}
.spoke_xy.spoke_16 { transform: rotateZ(160deg);}
.spoke_xy.spoke_17 { transform: rotateZ(170deg);}
.spoke_xy.spoke_18 { transform: rotateZ(180deg);}
.spoke_xy.spoke_19 { transform: rotateZ(190deg);}
.spoke_xy.spoke_20 { transform: rotateZ(200deg);}
.spoke_xy.spoke_21 { transform: rotateZ(210deg);}
.spoke_xy.spoke_22 { transform: rotateZ(220deg);}
.spoke_xy.spoke_23 { transform: rotateZ(230deg);}
.spoke_xy.spoke_24 { transform: rotateZ(240deg);}
.spoke_xy.spoke_25 { transform: rotateZ(250deg);}
.spoke_xy.spoke_26 { transform: rotateZ(260deg);}
.spoke_xy.spoke_27 { transform: rotateZ(270deg);}
.spoke_xy.spoke_28 { transform: rotateZ(280deg);}
.spoke_xy.spoke_29 { transform: rotateZ(290deg);}
.spoke_xy.spoke_30 { transform: rotateZ(300deg);}
.spoke_xy.spoke_31 { transform: rotateZ(310deg);}
.spoke_xy.spoke_32 { transform: rotateZ(320deg);}
.spoke_xy.spoke_33 { transform: rotateZ(330deg);}
.spoke_xy.spoke_34 { transform: rotateZ(340deg);}
.spoke_xy.spoke_35 { transform: rotateZ(350deg);}
.spoke_xy.spoke_36 { transform: rotateZ(360deg);}

.Rainbow_t {
  width:      100%;
   color: transparent;
   -webkit-background-clip: text;   /* -webkit-が無いと、虹色グラデーションにみになる 2022/01/10 */
   background-clip: text;
   background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
   animation : animation_Rainbow32 32s linear infinite;}
  @keyframes   animation_Rainbow32 {
    0% {background-position: 0 0 }
    100%{ background-position: 600px 0px }}

.text_3x {
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 3em;
  font-weight: bolder;}

.Background_Text17 {
   width:      100%; 
   color: transparent; 
   -webkit-background-clip: text;
   background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
  animation : animation_Rainbow17 17s linear infinite;}

  @keyframes  animation_Rainbow17 {                    
     0% { background-position: 0 0 } 
   100% { background-position: 600px 0px }
}

/* 次は、平面円形を回転させるための.cssの一部*/
.sphere_wrapper_xy {
  transform-style:preserve-3d;
  width:300px;height:300px;
  position:relative;
  animation:rotate3d_10s-xy 10s linear infinite; }

 @keyframes rotate3d_10s-xy {
  0%   {transform: rotateX(360deg) rotateY(0); }
  100% {transform: rotateX(0) rotateY(360deg); } }
/*　x軸0～0deg：y軸0～360deg
 @keyframes rotate3d_10s-xy が無いと静止した状態 */  


</style>

平面円形

角度を付け複数配置

同じ平面円形をY軸に10度毎ずらして配置

@keyframesで回転

.css定義の.sphere_wrapper_sjy-x {内に定義した
animation:rotate3d_10sjy-x 10s linear infinite; 部分「rotate3d_10sjy-x」に対して
@keyframes で、
「rotate3d_10sjy-x」の動き「x軸0～0deg：y軸0～360deg」を定義する。
@keyframesが無いと静止した状態になります。

.sphere_wrapper_sjy-x {
　transform-style:preserve-3d;
　width:300px;height:300px;
　position:relative;
　animation: rotate3d_10sjy-x 10s linear infinite; }
@keyframes rotate3d_10sjy-x {
　0% {transform: rotateX(-45deg) rotateY(0); }
　100% {transform: rotateX(-45deg) rotateY(360deg); } }
※．ｘ軸は-45degで固定　（前方向に傾ける）　

dot sphere 10s

ドット（点）で球体を表してみました。

.cssデザインの改善を聞いてみて分かったこと　.1

※．ここと、他の記事で”ChatGPT“と書いているものは、正式には（GPT-4搭載したマイクロソフトEdge「Copilot」です。）

　今回の場合、提供された回答（スケルトン）を少し修正・変更するだけで、実用になる（使える）ものを入手することができました。

以下に、操作方法も含め「執筆分野」に対する

• 　「回答」
• 　提示された「Codeを表示」
• 　提示されたCodeでの実行結果
• 　Codeの変更後の表示

　など、
「現状」を、お伝えできたらと、想って（思って）います。

※.アイコンは、Bootstrap および FontAwesome5 のアイコンをそのまま（又は編集して）使用しています。実際のアイコンとの相違はご了承ください。

この記事は、Edgeから、Copilotを使用して得た情報を元にして編集した（書いた）ものです。

追記23/06/03：Copilotの利用制限　
➡　両方のCopilotに聞いてみた「Copilotの利用制限事項はありますか？」

起動

Edgeを起動
Edgeの右上にある b をクリックすると、
右ペインに が表示されます。
※．これが「Copilot」です。正式には（GPT-4搭載したマイクロソフトEdge「Copilot」です。）

チャット の隣の　 作成アイコンをクリックして起動します。

執筆～回答

「執筆分野」に、以下の内容を記入して。

以下の私のサイトの、回転するCubeのコードを参考にして、
　より良いコーディングを示してください。

・ 参考するサイトのURLは以下です。
　 https://xn--ecka7j.biz/

・ 但し、.jsは使用しないで、.cssだけで実現する方法でお願いします。
　（私のサイトでも.jsは使用していません。）

執筆分野に記入以降の操作

各セクションの「ボタン」色が、選択したボタン操作です。

トーン
プロフェッショナル　 カジュアル　 熱狂的
ニュース　 面白い

　形式

段落　
メール　
ブログの投稿　
アイデア

長さ
短い　 中　 長い

執筆分野にある程度の文字数を入力すると、

「　　下書きの生成　　」　が、
「　　下書きの生成　　」　に変わり、クリックできる様になります。

「　　下書きの生成　　」 をクリック

処理進行中（途中）は、「　　下書きの生成　　」　に戻ります。

プレビュー内に回答が、かえって来はじめます。

「　　下書きの生成　　」

が

「　　下書きの生成　　」

になったら

プレビュー内の下側の アイコンクリックで、クリップボードにコピーされます

参照先（元）のCube

改善の為に提示したCubeは、以下のものです。

回答

以下のコードは、CSSだけで回転するキューブを作成する方法です。参考にしたサイトのURLは https://xn--ecka7j.biz/site-operation/design/3515/ です。まず、HTMLでキューブの各面をdiv要素として定義します。クラス名は前、後、上、下、左、右とします。

次に、CSSでキューブのスタイルとアニメーションを設定します。キューブの親要素に perspective プロパティを指定して視点を設定し、 transform-style: preserve-3d を指定して子要素に3D変形を適用します。キューブの各面には transform プロパティを使って位置と角度を調整します。また、 border や background-color などで見た目を整えます。キューブの回転は animation プロパティと @keyframes ルールで定義します。以下はその例です。

回答にあったCubeを表示

正しいCubeに見えますか？・・・
元々の記述にはなかった・・・　perspective:400px;視点が追加されています。

　回答のHTMLと.cssから、複数のCubeを定位置に表示させる為に、
　.cube {position:absolute;・・・・は、
　.cube {position:relative;・・・に、表示位置調整の為変更しました。
　.cube {
　に、margin-left:100px; margin-bottom:120px;を追加しています。

　※．視点の位置： perspective:400px;　

　rotateは10秒です。

改善

回答Cubeを少し改造・改善

　各Cubeの面に、background-color:rgba() で半透明カラーを指定。
各Cobe面(face)の文字をBootstrapアイコンに置換えてセンタリング

　※．改善：視点の位置を、perspective:400px; から
➡ perspective:800px;　にしてみました。
　
参照元Cubeは”perspective”を使っていません。

　”bi bi-gear-fill” と “bi bi-plugin”　は、回転を付けています。

　角丸、border-radius:20px;を、border-radius: 5px;に変更。

　rotateを12秒に変更しています。

まとめ

Copilot

Copilotに聞いてみた（２）

EdgeのChatとCopilotの両方で聞いてみた

Copilotの利用制限事項？

Chatで聞いてみる

Copilotの利用制限事項はありますか？

Copilotで聞いてみる

Copilotの利用制限事項はありますか？

聞いてみてわかったこと

• Copilotは開発途上にあること
• Copilotで得られた答えが完全でない理由
• 利用者が主体で責任を持って運用すること。
  （Copilot「副操縦士」という名前の所以(由来)。利用者がPilot）
• Copilotは、便利で有用なツールであること。