【第10回】リストとリンクのデザイン｜CSS初心者ノート

📝 箇条書きを整える（list-style）

HTMLの <ul> や <ol> に使われる「・」や数字の部分を
CSSでデザインできます。

ul {
  list-style-type: square;
  padding-left: 20px;
}

👉 点の形を square（四角）に変更。左側に少し余白を取ります。

💡 主な list-style-type の種類

値	表示例	説明
disc	●	初期値（黒い点）
circle	○	白抜きの丸
square	■	四角
none	（なし）	記号を消す

---

🔗 リンクの色と装飾を変える（a:link / :visited）

リンクは 擬似クラス で状態ごとにスタイルを変えます。

a:link {
  color: #007bff;
  text-decoration: none;
}

a:visited {
  color: #6c63ff;
}

👉 初めてのリンクは青色、訪問後は紫色になります。
text-decoration: none; で下線を消しています。

---

🎨 ホバー時のデザインを変える（:hover）

カーソルを合わせたときの変化を作るのが :hover。

a:hover {
  color: #ff6699;
  text-decoration: underline;
}

👉 ふわっと色が変わり、下線がつきます✨
💡 ホバーはクリックする前に「どこが押せるか」を分かりやすくする役割です。

---

💻 実際のコード例

HTML部分：

<h2>リンク付きリストの例</h2>
<ul>
  <li><a href="#">ホーム</a></li>
  <li><a href="#">プロフィール</a></li>
  <li><a href="#">お問い合わせ</a></li>
</ul>

CSS部分：

ul {
  list-style-type: square;
  padding-left: 20px;
}

a:link {
  color: #007bff;
  text-decoration: none;
}

a:visited {
  color: #6c63ff;
}

a:hover {
  color: #ff6699;
  text-decoration: underline;
}

---

👀 実際の表示結果

四角マークのリストが表示され、
リンクにカーソルを合わせると色が変わり、下線が出ます✨

---

⚠️ よくあるミスと注意点

• a:link より先に a:hover を書くと反映されない（順番注意！）
  　→ 順番は link → visited → hover → active（LVHA）
• list-style-type: none; にすると、箇条書き記号が消える
  　→ ナビメニューなどに使うときに便利

---

✅ ポイントまとめ

📋 箇条書きの記号を変える → list-style-type
🔗 リンクの色や下線を変える → a:link / a:visited
🖱 ホバー時の変化でアクセントをつける → a:hover

---

HTMLやCSSの基礎をもっと学びたい方におすすめ👇

---

📌 次回予告

【第11回】クラスとIDを使ってみよう
→ .class / #id を使って、セレクタの基本を学びます💡

---

🔖 この回で出てきたプロパティ

#list-style #list-style-type #a-link #a-visited #a-hover