これを、AIに書いてもらった。もともと、「box css」で出てきたサイトの、装飾boxを採用したのだが、そのcssは、タイトル部分が、本文の上borderに串刺しになっている位置にあった。それよりも、現行のようにタブみたいになっている方がいいかもと思い、geminiに、「タイトル部分が本文の上borderにぴったり出るようにして」と頼んで、そこから何度何度もやったのだが。どうもいまいち。
「ちょっとずれる」とか「やたらCSS」が複雑とか。
結局、ChatGPTに「これシンプルにして」と直してもらい。現行の形になった。
採用したCSS（ChatGPT）
<style>
.box {
margin: 20px 0;
font-size: 1em;
}
.box-title {
padding: 8px 20px;
background: #689;
color: #fff;
font-size: 1.1em;
border-radius: 8px 8px 0 0;
display: inline-block;
line-height: 1;
}
.box-content {
border: 2px solid #689;
border-radius: 0 10px 10px 10px;
padding: 15px;
background: rgba(240, 248, 255, 0.3);
}
</style>
<div class="box">
<div class="box-title">■タイトル</div>
<div class="box-content">ここに本文</div>
</div>
すんごい時間かけてやり取りしたのにGeminiではシンプルなCSSにならなかった
いかにも人が作った感じの、突貫工事や場当たり対応のCSSができて、令和の時代にやたら長いCSSとdiv入れ子のhtmlができてしまった。昔だったらまだしも、いまさら見た目はシンプルなのに、中はぐちゃぐちゃの構造はダメだろうということで不採用。
なお、CSSとhtmlが、どういう表示になるかは下記のJSFiddle（英語サイト）で確認しました
