生成AI：Copilot（GPT-4）に .cssデザインの改善を尋ねてみた（無料）

追記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要素として定義します。クラス名は前、後、上、下、左、右とします。

<div class="cube">
　<div class="face">
　　<div class="front">前</div>
　　<div class="back">後</div>
　　<div class="top">上</div>
　　<div class="bottom">下</div>
　　<div class="left">左</div>
　　<div class="right">右</div>
　</div>
</div>

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

.cube {position:absolute;top:100px;left:100px;font-size:70px;perspective:400px;}
.cube > .face {position:relative;width:100px;height:100px;
　transform-style:preserve-3d; /* 子要素に3D変形を適用 */
　animation:rotate 10s linear infinite; /* 回転アニメーション */
}
.cube > .face > * { position:absolute;　top:0;left:0;width:100%;height:100%;border:10px double silver;border-radius:20px;}
.cube > .face > .front {transform: translateZ(50px); /* 前面を手前に移動 */ }
.cube > .face > .back {transform: translateZ(-50px) rotateY(180deg); /* 後面を後方に移動して裏返す */ }
.cube > .face > .top {transform: translateY(-50px) rotateX(90deg); /* 上面を上に移動して上向きにする */ }
.cube > .face > .bottom {transform: translateY(50px) rotateX(-90deg); /* 下面を下に移動して下向きにする */ }
.cube > .face > .left {transform: translateX(-50px) rotateY(-90deg); /* 左面を左に移動して左向きにする */ }
.cube > .face > .right {transform: translateX(50px) rotateY(90deg); /* 右面を右に移動して右向きにする */ }
@keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg); /* 初期状態 */ }
　to {transform: rotateX(360deg) rotateY(360deg); /* 最終状態 */ } }

---

回答にあった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は、便利で有用なツールであること。