CSS職人とは？

CSSで絵画を作ってしまう方々です。
有名なサイトはこちら。

https://diana-adrianne.com/

こんなのとか

こんなのとか

信じられないですよね？
CSSなんです。

サイトを訪れたら分かりますが、ちゃんとGitでも公開されてます。

いくらAIが優秀とは言え、いきなりこのレベルは無理ですよね。
私も指示の出し方が分かりません。

まずは、ゆるいイラストレベルになればOK、ということにしました

お題

12月なので、お題はサンタクロースに。
まずはサンタのイメージ画像を作ってもらいました。

いいですね！
なぜかトナカイが袋に入ってますが、そこはご愛嬌🎅

これをベースに、サンタクロースの顔をCSSで描いてもらいます。

第一弾

最初のコードはこちら。
イメージ画像をアップして、この画像を参考に、サンタクロースの顔をCSSで描いてください、と依頼しました。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Santa Claus Face with CSS</title>
<style>
/* CSS code for Santa Claus face - Previously provided */
.santa {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ffcccb; /* Light red for face */
  border-radius: 50%; /* Circular face */
  margin: 20px auto;
}
.santa-hat {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  top: -70px;
  left: 0;
}
.santa-hat-pom {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  top: -30px;
  left: 85px;
}
.santa-eye {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  top: 60px;
}
.santa-eye.left {
  left: 50px;
}
.santa-eye.right {
  right: 50px;
}
.santa-beard {
  position: absolute;
  width: 180px;
  height: 100px;
  background-color: white;
  bottom: 0;
  left: 10px;
  border-radius: 0 0 90px 90px;
}
</style>
</head>
<body>
<div class="santa">
    <div class="santa-hat"></div>
    <div class="santa-hat-pom"></div>
    <div class="santa-eye left"></div>
    <div class="santa-eye right"></div>
    <div class="santa-beard"></div>
</div>
</body>
</html>

ある程度のパーツに分けて作っているようです。

では、ブラウザで見てみましょう！

なるほど、気持ちは分かる！
クリスマス気分は伝わってきますね！

改良してみる

さて、ここからどう指示をすべきか。

この画像とイメージ画像の両方をアップして、コードを貼り付けて、もっとイメージ画像に近づけてください、というのを繰り返しお願いしました。
ちょこちょこ微修正も依頼してます。

その結果、まずはこうなって

もう少し細かく修正していこうと誓い合い

輪郭に収めず、別々のパーツで作ってね、とお願いして

帽子の形が逆ですよ、とアドバイスをし

さらに修正を重ねて、最終的なコードがこちら！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Updated Santa Claus Face with CSS</title>
<style>
body {
  background-color: #90ee90; /* Green background */
}

.santa {
  position: relative;
  width: 200px; /* Updated face width */
  height: 240px; /* Updated face height */
  background-color: #ffe0e0; /* Light skin tone */
  border-radius: 50%; /* Circular face */
  margin: 50px auto;
  overflow: visible; /* Allow for hat and beard overflow */
}

.santa-hat {
  position: absolute;
  bottom: 170px; /* Positioning the hat's base at the top of the face */
  left: 0; /* Aligning with the sides of the face */
  right: 0;
  height: 100px; /* Updated hat height */
  background-color: red;
  border-radius: 90% 90% 0 0; /* Rounded top for the hat */
  z-index: 1; /* Ensuring the hat is behind the brim */
}

.santa-hat-brim {
  position: absolute;
  bottom: 150px; /* Positioning the brim at the bottom of the hat */
  left: -5px; /* Extending beyond the width of the hat for visual effect */
  right: -5px;
  height: 25px; /* Brim height */
  background-color: white;
  z-index: 2; /* Above the red part of the hat */
}

.santa-hat-pom {
  position: absolute;
  bottom: 255px; /* Positioning the pom at the top of the hat */
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  width: 30px; /* Pom size */
  height: 30px;
  border-radius: 50%;
  z-index: 3; /* Ensuring the pom is above the brim */
}

.santa-eye {
  position: absolute;
  top: 90px; /* Eyes positioned below the hat */
  width: 30px; /* Eye width */
  height: 30px; /* Eye height */
  background-color: black;
  border-radius: 50%;
  z-index: 4; /* Above the face */
}

.santa-eye.left {
  left: 55px;
}

.santa-eye.right {
  right: 55px;
}

.santa-nose {
  position: absolute;
  top: 120px; /* Nose position */
  left: calc(50% - 15px);
  width: 30px; /* Nose width */
  height: 30px; /* Nose height */
  background-color: #aa0000;
  border-radius: 50%;
  z-index: 4;
}

.santa-cheek {
  position: absolute;
  top: 130px; /* Cheek position */
  width: 28px; /* Cheek width */
  height: 28px; /* Cheek height */
  background-color: #ffcccc; /* Cheek color */
  border-radius: 50%;
  z-index: 4;
}

.santa-cheek.left {
  left: 50px;
}

.santa-cheek.right {
  right: 50px;
}

.santa-beard {
  position: absolute;
  top: 140px; /* 髭の上端の位置 */
  left: 50%; /* コンテナの中央に配置 */
  transform: translateX(-50%); /* 左に50%移動して中央揃え */
  width: 200px; /* 髭の幅 */
  height: 270px; /* 髭の長さ */
  background-color: white;
  /* 下部を細くして髭の形に近づける */
  clip-path: ellipse(50% 45% at 50% 5%);
  z-index: 5; /* 他の要素の前面に表示 */
}

.santa-mouth {
  position: absolute;
  top: 160px; /* Mouth position */
  left: calc(50% - 20px);
  width: 40px; /* Mouth width */
  height: 7px; /* Mouth height */
  background-color: rgb(145, 96, 96);
  border-radius: 10px;
  z-index: 6; /* Mouth behind the beard */
}

</style>
</head>
<body>
<div class="santa">
  <div class="santa-hat"></div>
  <div class="santa-hat-brim"></div>
  <div class="santa-hat-pom"></div>
  <div class="santa-eye left"></div>
  <div class="santa-eye right"></div>
  <div class="santa-nose"></div>
  <div class="santa-cheek left"></div>
  <div class="santa-cheek right"></div>
  <div class="santa-mouth"></div>
  <div class="santa-beard"></div>
</div>
</body>
</html>

そして、出来上がったサンタクロースがこちらです！

どうでしょう、サンタっぽいですよね。

再度、イメージ画像との比較をどうぞ。

全然違いますが、サンタクロースであることは分かります。

画像を見せながらやりとりしただけでここまで来れたのは、凄いと思います

検証結果

CSSの知識は豊富ですが、いきなり職人レベルはやはり難しいです。

ただし、今回は画像を見せて依頼しただけなので、もっとパーツを細かくしたり、職人のコードを参考にしてもらったりすると、もっと精度の高いCSSを組めると思います。
あとは指示する側のレベルも重要です。

まとめ

今回は、AIを活用して、CSSでどこまでできるのかを試してみました。
簡単なやりとりだけでサンタと分かるものができたので、次回はもう一段レベルを上げて、もっと精度の高い成果物を目指そうと思います。

本当に便利な世の中になったので、AIを活用しながら、自分の引き出しも増やしていきましょう！