AI・オンライン英会話学校システム　１１話

１１話

今のところ、chat gpt にデザインして作っていただいたUIページがありますが、このままだと使えないので、現在修正中です。　デザイナー登場ですね。　シンプルなページなので、つくりかえたら報告します。

以下が　CHAT　GPTが作成してくれたUI　ページですね。

html マークアップ

CSSスタイリング (styles.css)

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

.container {
width: 80%;
margin: auto;
max-width: 600px;
}

header {
background: #007bff;
color: #fff;
padding: 10px 0;
text-align: center;
}

.input-area {
margin-top: 20px;
display: flex;
justify-content: space-between;
}

input[type="text"] {
flex: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

button {
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #007bff;
color: #fff;
}

button:hover {
background-color: #0056b3;
}

footer {
text-align: center;
margin-top: 20px;
padding: 10px 0;
background: #007bff;
color: #fff;
}



これをもう少し見やすくしてもらいます。