CSSでリンクリストを装飾しよう（:last-child とボックスデザイン）

複数のリンクを箇条書き（リスト）で整理し、CSSでリンクリスト全体をカード風に装飾します。
また、セレクターの応用（:last-child）や(:hover)ホバー効果を使って、より実用的なリンクUIの作り方を学びます。

作成ファイル・保存場所

css-basic フォルダの中に以下の2つのファイルを用意してください：
- HTMLファイル：05.htmlHTMLファイルはコピーして使用可。
- CSSファイル：style05.css（今回新たに作成）

htmlは下記からコピー

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>課題05</title>

</head>

<body>
    <h1>リンクのサンプル集</h1>
    <ul class="link-list">
        <li><a href="https://www.google.co.jp" target="_blank">Google</a></li>
        <li><a href="https://www.yahoo.co.jp" target="_blank">Yahoo</a></li>
        <li><a href="https://www.bing.com" target="_blank">Bing</a></li>
        <li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
        <li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
        <li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
        <li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
        <li><a href="#">リンク未設定</a></li>
    </ul>


</body>

指示

以下の手順で、05.html に style05.css を読み込んでスタイルを適用してください。

<head> に以下の1行を追加して、外部CSSを読み込む： <link rel="stylesheet" href="style05.css">
HTMLの本文（<body>）内にあるリンクをすべて 1つの <ul> の中に <li><a></a></li> 形式で8つ程度にまとめてください。
style05.css ファイルに以下のスタイルを追加してください。
リセット、<body>、<h1> 要素は従来通りの内容で、任意の指定とします。

チェックポイント

外部CSSが正しく読み込まれているか
リスト全体が白いカード風の見た目になっているか
各リストアイテムに線が引かれていて、最後だけ線が消えているか
ホバー時の視覚効果が自然に動作するか
テキストやリンクの読みやすさ・配置が整っているか
widthとmargin:0 autoの理解
classを使ってみよう！

今回使うCSSプロパティのポイント

この課題では、リスト全体（ul.link-list）に対して、幅の調整や中央寄せを行っています。
それぞれのCSSプロパティが、どのような意味を持っているかを確認しましょう。

width: 90%;

親要素（ブラウザの幅など）に対して 90%の横幅で表示されます。
ウィンドウのサイズによって 柔軟に変化するため、スマホ表示にも対応しやすい設定です。

width: 90%;

max-width: 500px;

画面が広い場合でも、最大幅を500pxに制限します。
読みやすさを保つために、横に広がりすぎるのを防ぐ指定です。

max-width: 500px;

どれくらいの画面幅で制限されるの？

上記の場合、500px ÷ 0.9 ≒ 555.5px　となり、

親の幅が555px以下なら → width: 90% がそのまま使われる
親の幅が556px以上になると → max-width: 500px が効いて、それ以上広がらない

margin: 0 auto;

上下の余白を 0 に、左右の余白を auto にすることで、左右が均等になり中央に配置されます。
ブロック要素を 中央寄せするときによく使う書き方です

margin: 0 auto;

補足：擬似クラス（:hover と :last-child）とは？

CSSでは、ある条件のときだけ適用される「特殊な状態」を指定するセレクタを「擬似クラス」と呼びます。

`:hover`（ホバー）

マウスカーソルをのせたときにスタイルを変える擬クラスです。

a:hover {
  color: red;
  text-decoration: underline;
}

リンクボタンなどに動きをつけるときによく使います。

`:last-child`（最後の子要素）

親の中で「一番最後にある要素だけ」にスタイルを当てたいときに使います。

li:last-child {
  border-bottom: none;
}

例えば、リストに border-bottom をつけていく中で「最後の項目だけ線を消したい」ときに便利です

CSSの class 属性とは？は下記のページで詳しく解説をしています。

CSS class属性について付録をチェック！

スタイルの指定内容（style05.css）

ul.link-list に指定するスタイル
- 枠線：1px solid #ccc
- 角丸：border-radius: 8px
- 背景色：白
- 最大幅：max-width: 500px
- 通常の横幅：90%
- 中央寄せ：margin: 0 auto
li に指定するスタイル
- 内側余白：1em
- 下に線：border-bottom: 1px solid #eee
最後の li には下線を表示しない
- セレクター：.link-list li:last-child
- 指定：border-bottom: none
リンク（a）に指定するスタイル
- テキスト色：青系（例：#0066cc）
- 装飾なし：text-decoration: none
- ブロック要素にする：display: block
- ホバー時に背景色を変更（例：#f0f8ff）
- ホバー時の文字色変更（任意。例：color: #003366）

解答例（CSS）

<ul>要素にclass=link-listを指定します。

/* --- 全体リセット（必要に応じて） --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 背景や全体の文字設定など（任意） --- */
body {
    font-family: sans-serif;
    background-color: #f8f8f8;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
}

/* --- タイトルの装飾 --- */
h1 {
    text-align: center;
    margin-bottom: 1em;
    font-size: 24px;
    color: #333;
}

/* --- リンクリストボックス全体 --- */
.link-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 90%;
    max-width: 500px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
}

/* --- 各リンク項目 --- */
.link-list li {
    border-bottom: 1px solid #eee;
}

.link-list li:last-child {
    border-bottom: none;
}

/* --- リンク本体のスタイル --- */
.link-list a {
    display: block;
    padding: 1em;
    color: #0066cc;
    text-decoration: none;
}

.link-list a:hover {
    background-color: #f0f8ff;
}