CONTENTS
  1. HOME
  2. CSS
  3. CSS基礎
  4. リストや用語集にスタイルを追加しよう

リストや用語集にスタイルを追加しよう

リストや用語集にスタイルを追加しよう

リスト（ul, ol, dl）や定義リストの見た目をCSSで整え、装飾されたリストと枠線（border）の基本を学びます。また、前回同様に簡易リセットと基本的な全体スタイルも指定します。

作成ファイル・保存場所

  • css-basic フォルダの中に以下の2つのファイルを用意してください：
    • HTMLファイル：03.htmlHTMLファイルはコピーして使用可。
    • CSSファイル：style03.css（今回新たに作成）
htmlは下記からコピー
<!DOCTYPE html>
<html lang="ja">

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

<body>
    <h1>私の1日</h1>

    <h2>今日のやること</h2>
<ul>
    <li><a href="https://mail.example.com">メールのチェック</a></li>
    <li><a href="https://shopping.example.com">買い物に行く</a></li>
    <li><a href="https://webtraining.jp/html-basic/">HTMLの勉強</a></li>
</ul>

    <h2>作業手順</h2>
    <ol>
        <li>パソコンを起動する</li>
        <li>エディタを開く</li>
        <li>コードを書く</li>
    </ol>

    <h2>用語集</h2>
    <dl>
        <dt>HTML</dt>
        <dd>ウェブページの構造を記述するためのマークアップ言語</dd>
        <dt>CSS</dt>
        <dd>ウェブページの見た目を整えるためのスタイルシート言語</dd>
    </dl>
</body>

</html>

指示

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

  1. <head> に以下の1行を追加して、外部CSSを読み込む：
   <link rel="stylesheet" href="style03.css">
  1. style03.css ファイルに以下のスタイルを追加してください。
  2. 「任意」と書かれている箇所は自分の好きな色や適切なサイズになります。
  3. 簡易版のリセットCSSを適用しておきましょう。

チェックポイント

  • a要素に対してtext-decorationが指定できているか
  • list-style が設定できているか
  • list-style-position の理解ができているか
  • border を線の種類や太さなどの指定ができているか

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

リンクの装飾（text-decoration と :hover）

a 要素（リンク）にはデフォルトで下線が付きます。これを消すには text-decoration: none; を使い、マウスを乗せたとき（hover）に underline を指定すると自然な見た目になります。

プロパティ内容
text-decoration: none;リンクの下線を消す
text-decoration: underline;リンクに下線を付ける（hover時に使用）
:hoverマウスを乗せたときにスタイルを変更できる擬似クラス
a {
  color: #0044cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

list-style-type（リストの記号スタイル）

リストの先頭マーク（●や■など）の種類を指定します。

🔹 ul（順不同リスト）で使える主な値

値表示例説明
disc●デフォルト（塗りつぶし円）
circle○枠だけの円
square■四角いマーク
noneマークを非表示
disclosure-open▶︎開いた状態の三角（対応ブラウザ限定）
disclosure-closed▼閉じた状態の三角（対応ブラウザ限定）

🔹 ol（順序付きリスト）で使える主な値

値表示例説明
decimal1, 2, 3…数字（デフォルト）
decimal-leading-zero01, 02, 03…先頭0つき数字
lower-alphaa, b, c…小文字アルファベット
upper-alphaA, B, C…大文字アルファベット
lower-romani, ii, iii…小文字ローマ数字
upper-romanI, II, III…大文字ローマ数字
japanese-formal壱, 弐, 参…日本の漢数字（対応ブラウザに注意）
japanese-informal一, 二, 三…通常の漢数字（同上）
katakanaア, イ, ウ…カタカナ順序（ol専用）
katakana-irohaイ, ロ, ハ…古典順（同上）

list-style-position（リストマークの位置）

値説明
outsideテキストの外側にマーク（デフォルト）
insideテキストの内側（インデント内）にマーク
ul {
  list-style-type: square;
}
ul {
  list-style-position: inside;
}
/*一括指定*/
ul {
  list-style-position: circle inside;
}

list-style-image

リストマークを画像に変更できます。
Googleアイコンサイト（https://fonts.google.com/icons）からPNG画像をダウンロードし、リストマークとして使えます

ul {
  list-style-image: url('check-icon.png');
}
  • アイコン画像は小さめ（16px〜24px）を推奨。
  • 表示されないときのために list-style-type を併用しておくと安心です
ul {
  list-style-type: disc;
  list-style-image: url('check-icon.png');
}

border（ボーダー＝枠線）

border は要素の外枠に線（ボーダー）をつけるためのCSSプロパティです。

/*四方全てボーダー*/
border: 1px solid #000;

/*下だけ・上だけ*/
border-bottom: 1px dashed red;
border-top: 3px double green;

/*太さ・種類・色を分けて書くことも可能*/
border-width: 2px;
border-style: dotted;
border-color: orange;
  • 1px → 枠線の太さ
  • solid → 枠線のスタイル（実線など）
  • #000 → 枠線の色

線の種類（border-style）

値表示例説明
solid―――実線（最もよく使われる）
dotted・・・・点線（ドット）
dashed─ ─ ─破線（ダッシュ）
double══二重線（太めの装飾）
groove3D風立体的にへこんだ線（ブラウザ依存）
ridge3D風盛り上がった線（grooveの逆）
inset内側影要素が凹んで見えるような線
outset外側影要素が浮き出るような線
noneなし線を非表示にする
hidden非表示表示上は none と同じ（テーブルレイアウトで使用）

※ 一部は古くなっており、solid / dotted / dashed / double がよく使われます。

スタイルの指定内容

  1. <body> に指定するスタイル
  2. <h1> に指定するスタイル
    • 文字色：任意
    • 下余白: 任意
    • 背景色:任意
  3. <h2> に指定するスタイル
    • 文字色：任意
    • 上下余白: 任意
  4. <a> に指定するスタイル
    • padding: 0.5em 0;
    • text-decoration: none;(アンダーラインなし)
  5. <a> :hoverに指定するスタイル
    • text-decoration: underline(アンダーラインあり)
  6. <ul> に指定するスタイル
    • リストスタイル：スクエア(square)
    • 左余白:1.5em
    • list-style-positionをinsideにする
  7. <ol> に指定するスタイル
    • リストスタイル：01 02 03(decimal-leading-zero)
    • 左余白:1.5em
    • list-style-positionをinsideにする
  8. <li> に指定するスタイル
    • color:任意
    • border-bottom:1px 点線 任意の色
  9. <dl> に指定するスタイル
    • border-left:4px solid 任意
    • padding-left:1rem;
  10. <dt> に指定するスタイル
    • font-weight : bold;
    • color : 任意
    • 上余白：1em;
  11. <dd> に指定するスタイル
    • color : 任意
    • 下余白：1em;

解答例（CSS）

リセットCSSも簡易版を使います。
/* --- リセットCSS --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 全体設定 --- */
body {
    font-size: 16px;
    line-height: 1.8;
    font-family: sans-serif;
    background-color: #fefefe;
    padding: 20px;
}

/* --- 見出し --- */
h1 {
    color: #ffffff;
    /* 任意：白文字 */
    background-color: #004466;
    /* 任意：濃紺 */
    margin-bottom: 1em;
    padding: 0.5em;
}

h2 {
    color: #006600;
    margin: 1.5em 0 0.5em;
}

p {
    color: #333333;
    margin-bottom: 1em;
}

/* --- リンクのスタイル --- */
a {
    color: #0044cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- リスト --- */
ul {
    list-style-type: square;
    margin-left: 1.5em;
    list-style-position: inside;
}

ol {
    list-style-type: decimal-leading-zero;
    margin-left: 1.5em;
    list-style-position: inside;
}

li {
    padding: 0.5em 0;
    border-bottom: 1px dashed #ccc;

}

/* --- 定義リスト --- */
dl {
    border-left: 4px solid #888888;
    padding-left: 1rem;
    margin-left: 1rem;
}

dt {
    font-weight: bold;
    color: #003366;
    margin-top: 1em;
}

dd {
    color: #555555;
    margin-bottom: 1em;
}

ステップアップ！

Google Fonts（Material Icons）を使ってリストにアイコンを設定してみよう！

Google Fonts では、文字フォントだけでなく Webアイコン（Material Icons） もダウンロードできます。
好きなアイコンを選んで、PNG形式で保存し、list-style-image で使ってみましょう！

やり方の流れ

  • CSSで list-style-image に設定！
  • Google Fonts – Icons にアクセス
  • 好きなアイコンを検索（例：check、star など）
  • サイズ：16px ぐらい　/ 色：文字の色に合わせて、 PNG形式でダウンロード
  • HTMLファイルと同じフォルダ内にimagesフォルダを作成し、そこに保存（例：check-icon.png）
ul {
  list-style-image: url('images/check-icon.png');
}

完成イメージ