ChatGPTで診断チャートのCSSを簡単に作り上げた話

/* 問題文表示エリア */
#question {
  background-color: #fff; 
  border: 1px solid #ccc; /* 四角で囲む */
  border-radius: 10px; /* 角を丸める */
  padding: 20px;
  margin: 20px auto; /* 中央揃え */
  width: 400px; /* 問題文表示エリアの幅 */
  position: relative; /* ボタンを重ねるために相対位置に設定 */
}


/* Yes/Noボタン */
#yesButton, #noButton {
  background-color: green; /* Yesボタンの背景色を緑に設定 */
  color: white; /* 文字色を白に設定 */
  border: none;
  padding: 10px 20px;
  margin: 30px auto; /* 中央揃えで少し空ける */
  border-radius: 30px; /* 角を丸める */
  cursor: pointer;
  display: block; /* ボタンを縦に並べるためにブロック要素に設定 */
}

/* Noボタン */
#noButton {
  background-color: red; /* Noボタンの背景色を赤に設定 */
}

/* ボタンのhover効果 */
#yesButton:hover, #noButton:hover {
  opacity: 0.8; /* 透明度を変更してhover効果を表現 */
}

/* resultContainerのスタイル */
#resultContainer {
  border: 1px solid #ccc; /* 四角で囲む */
  border-radius: 10px; /* 角を丸める */
  padding: 20px;
  margin: 20px auto; /* 中央揃え */
  width: 400px; /* resultContainerの幅 */
  background-color: white; /* 背景色を白に設定 */
  display: none;
}

/* questionTextのスタイル */
.questionText {
  font-size: 20px; /* フォントサイズを大きめに設定 */
  font-weight: bold; /* 太字に設定 */
  text-align: center; /* questionTextを中央揃えに設定 */
  margin: 10px auto;
  display: block; /* 文字の前後で改行するためにブロック要素に設定 */
}

.resultTextSuffix {
  text-align: right; /* "です"を右揃えに設定 */
}

#startContainer button {
  background-color: #ffa500; /* 背景色をオレンジ色に設定 */
  color: #ffffff; /* 文字色を白に設定 */
  border: none; /* ボーダーをなしに設定 */
  border-radius: 10px; /* 角を丸める */
  padding: 10px 20px; /* パディングを設定 */
  font-size: 16px; /* フォントサイズを設定 */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* ポップな影を付ける */
  cursor: pointer; /* カーソルをポインターに設定 */
}

/* スタートボタンのホバーエフェクト */
#startContainer button:hover {
  background-color: #ff8c00; /* ホバー時の背景色をやや薄いオレンジ色に設定 */
}