【ChatGPTの使い方】HTMLとCSSの囲み枠デザイン生成【無料版でもできる】

はじめに

Webページやブログを書く人にとって便利なChatGPTの使い方をご紹介します。それがHTMLとCSSを使ったデザイン要素の生成です。前回はページ内のセクションを区切る見出し（H2）の例で作り方の解説を行いました。今回は、見出しと同じ用に使用機会の多い文字の囲み枠のデザインを作ってみます。今回の内容も無料版のChatGPTでもできるので、本ページの内容も無料版で実践したものとなります。

 

ChatGPTで囲み枠デザインを作ってみよう

1.ChatGPTへのアクセス
まずOpenAIの公式ウェブサイトにアクセスします。
https://chat.openai.com/

2.HTMLとCSSで囲み枠生成の依頼文を送信する
今回は下記の依頼文で送ってみました。時折背景などに使用する画像の準備が必要なものも生成されるので、今回がは「画像なし」で作るよう指示に示しています。

HTMLとCSSでコンセプトが異なるテキストの囲み枠デザインを3案作ってください。画像なしで。

すると下記のメッセージが返ってきました。

もちろんです。以下は3つの異なるコンセプトのテキスト囲み枠デザインの提案です。

 

  1. モダンなボックス:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Box</title>
<style>
.modern-box {
border: 2px solid #3498db;
border-radius: 10px;
padding: 20px;
background-color: #f2f2f2;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="modern-box">
<p>This is a modern box design.</p>
</div>
</body>
</html>

 

  1. レトロなフレーム:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retro Frame</title>
<style>
.retro-frame {
border: 4px solid #ff6b6b;
border-radius: 20px;
padding: 15px;
background-color: #ffeead;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
}
</style>
</head>
<body>
<div class="retro-frame">
<p>This is a retro frame design.</p>
</div>
</body>
</html>

 

  1. シンプルなストライプ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Stripe</title>
<style>
.simple-stripe {
border: 1px dashed #2ecc71;
border-radius: 5px;
padding: 10px;
background: linear-gradient(45deg, #3498db, #9b59b6);
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="simple-stripe">
<p>This is a simple stripe design.</p>
</div>
</body>
</html>

これらのコードは、それぞれ異なるデザインコンセプトを示しています。お好みのものを選んで、必要に応じてカスタマイズしてください！

3.生成されたコードの確認
生成されたコードをHTMLとCSSに記述してみると、下記のようなデザインが生成されていました。求めていたものと違った場合は、ガチャを回すように当たりが出るまで生成を繰り返しても良いですし、もう少し具体的な指示を追加して生成するのも良いでしょう。

・モダンなボックス

モダンでシンプルな外観を持つボックスデザイン。鮮やかな青色の境界線で囲まれ、角丸の形状を持つ。内部は明るいグレーで塗りつぶされ、影が付けられている。
・レトロなフレーム

レトロな雰囲気を持つフレームデザイン。太い赤い境界線で囲まれ、四角い形状を持つ。背景色は淡いクリーム色で、古いスタイルの書体が使用されている。
・シンプルなストライプ

シンプルでモダンなストライプデザイン。破線の緑色の境界線で囲まれ、角丸の形状を持つ。背景には青と紫のグラデーションが使用され、白いテキストが対照的に表示される。

 

 

デザインの方向性を指示する

見出しデザインの方向性を指示することで生成される内容のコントロールができます。要素、形状、色、コンセプトなど様々な組み合わせで試してみてください。一例としてここでは下記のように依頼文を送ってみました。

HTMLとCSSでポップでキュートなテキストの囲み枠のデザインを3案作ってください。画像なしで。

すると下記のメッセージが返ってきました。

こちらの3つのポップでキュートなテキストの囲み枠のデザイン案を提案します。それぞれ異なるスタイルで、HTMLとCSSで実装可能です。

1. カラフルな波模様

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Text Border - Design 1</title>
<style>
.text-border {
padding: 20px;
border: 2px solid #f0f0f0;
border-radius: 20px;
position: relative;
overflow: hidden;
}
.text-border::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 30px;
background: linear-gradient(45deg, #ff8a65, #ff7043, #ff5722, #f4511e);
}
</style>
</head>
<body><div class=“text-border”>
<p>Cute Text Here</p>
</div>

</body>
</html>

2. ポップなハート模様

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Cute Text Border – Design 2</title>
<style>
.text-border {
padding: 20px;
border: 2px solid #ff4081;
border-radius: 20px;
position: relative;
}
.text-border::before {
content: ”;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: url(‘data:image/svg+xml;utf8,<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″ fill=”%23ff4081″><path d=”M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z”/></svg>’);
background-size: cover;
}
</style>
</head>
<body><div class=”text-border”>
<p>Cute Text Here</p>
</div></body>
</html>

 

3. ドット模様の楽しいボーダー

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Cute Text Border – Design 3</title>
<style>
.text-border {
padding: 20px;
border: 2px dashed #2196f3;
border-radius: 20px;
position: relative;
}
.text-border::before {
content: ”;
position: absolute;
top: -5px;
left: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
background-image: radial-gradient(circle, #fbc02d 10%, transparent 10.01%);
background-size: 20px 20px;
}
</style>
</head>
<body><div class=”text-border”>
<p>Cute Text Here</p>
</div></body>
</html>

これらのデザインは、HTMLとCSSで実装でき、ポップでキュートなテキストを囲むのに楽しいエフェクトを提供します！

 

生成されたコードの確認
生成されたコードをHTMLとCSSに記述してみると、下記のようなデザインが生成されていました。このように提示したコンセプトに合うようなデザインを提案してくれます。


・カラフルな波模様

明るくカラフルな波形のパターンが特徴です。ウェーブのエフェクトは、オレンジと赤の色調を使用したリニアグラデーションによって作成されており、テキストの周囲をダイナミックに彩ります。

・ポップなハート模様

愛らしいハートの形を前面に出したデザインです。鮮やかなピンク色の固定ボーダーが特徴で、その中央に大きなハートが配置されています。このハートはSVG画像を用いて表現されており、感情を動かすようなビジュアル効果を創出します。

・ドット模様の楽しいボーダー

明るく楽しいドット模様が特徴です。背景にはラジアルグラデーションを用いたドットが散りばめられており、カジュアルでフレンドリーな雰囲気を演出します。

 

このように様々なデザインのHTMLとCSSを瞬時に生成することができます。

 

おわりに

AIを使ったデザインの生成というと画像や動画などが目立ってしまいますが、このようなウェブページの要素の生成も実用的に使うことができます。今回は、囲み枠のデザインをテーマにその作り方とプロンプト例をご紹介しましたが、その他にもいろんな表現を作ることができるので、また追って記事にしてご紹介します。

関連記事