スペイン観光ガイド - 見出し・箇条書き

見出しの設定

中見出し

• 「h2」で設定
• 一般的に、h2がありその下部にテキストコンテンツがある場合、h2を含むテキストを「section」タグで囲みます
• 今回は、h2を含むテキストをmainタグで囲んでいるため「section」は、記述しなくても結果は同じになります
• ページ全体の基調色「薄い緑青」の補色「濁った黄色系」を背景色に設定
• 文字色は「白」で、コントラストをつけて読みやすくする

/* ------------------------------------
  main
------------------------------------ */
h2 {
  margin-bottom: 30px;
  padding: 8px 0 6px;
  background-color: #ac9f49;
  color: #fff;
  text-align: center;
}

小見出し

• 「h3」で設定
• 「h2」の背景色は補色で、薄い色を選択（文字色を黒にするため）
• 「border-left」で背景色の濃い色を選択してアクセントにする

h3 {
  margin-bottom: 10px;
  padding: 8px 0 6px 20px;
  background-color: #c3e3ff;
  border-left: 12px solid #74a6d1;
  font-size: 18px;
}

箇条書き

• 文字を読みやすくpaddingを利用して、見出しの文字の頭揃えにする
• リセットして見えなくなった黒円を表示する

ul {
  margin-bottom: 20px;
  padding: 0 20px 0 50px;
  list-style: disc;
}