✨
アスキーアートでウェブUIを作る？
asciiflowというウェブサイトを使い、ウェブサイトのUIをChatGPTを使って作る方法を知りました。
こちらのウェブサイトに、アクセスします。
いきなり作成画面になりますので、びっくりします。
私は、Chromeで、試しました。
Edgeでは、テキストを選択して文字を入力したときに、文字が小さすぎたので、Chromeを使いました。
書き終わったら、赤丸のアイコンをクリックします。
そして、ウィンドウ下の赤丸の部分をクリックして、コピーします。
ChatGPTのプロンプト入力のところに、コピぺします。
そして、コードを書いてもらうと、下記のようにコードを生成できました。
<!DOCTYPE html>
<html>
<head>
<title>Web Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<img src="header-image.jpg" alt="Header Image">
<nav>
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
</ul>
</nav>
</header>
<main>
<section class="contents">
<h2>Contents 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non elit eget lacus varius facilisis. Fusce sollicitudin odio vel bibendum lacinia.</p>
</section>
<section class="contents">
<h2>Contents 2</h2>
<p>Maecenas auctor mi vel lacus congue, at efficitur velit elementum. Nullam semper ligula eu purus lacinia, vitae pharetra velit gravida.</p>
</section>
<section class="contents">
<h2>Contents 3</h2>
<p>Vivamus laoreet ante vel dui malesuada convallis. Quisque eleifend tellus at sapien bibendum, non facilisis velit malesuada.</p>
</section>
</main>
</body>
</html>
CSSは。こちらです。
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #eee;
padding: 20px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #333;
text-decoration: none;
}
main {
padding: 20px;
display: flex;
flex-wrap: wrap;
}
.contents {
flex: 1;
margin: 10px;
background-color: #f9f9f9;
padding: 20px;
box-sizing: border-box;
}
.contents h2 {
margin-top: 0;
}
.contents p {
margin-bottom: 0;
}
レスポンシブデザインなど考慮してほしいことは、プロンプトに書くと良いです。
HTMLの雛形を作る際は、便利だと思いました。
Discussion