情報を整理し、見やすく、理解しやすくしたいときに効果的な手法です。
長文や難解な文章は、項目として列挙したり、塊を分解してみたり、階層を作ったりして読みやすくしてみましょう。
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>リストタグの例</title>
<style>
/* リスト全体に共通のスタイル */
ul {
/* 背景色や枠線は、リスト全体 (<ul>) に適用します */
background-color: #ffffff; /* 白い背景 */
border: 1px solid #ddd; /* 薄い灰色の枠線 */
padding: 20px 30px; /* 内側の余白 */
margin: 20px; /* 外側の余白 */
border-radius: 5px; /* 角を丸くする */
}
/* 各リスト項目 (<li>) のスタイル */
li {
font-family: sans-serif; /* 読みやすいフォント */
color: #333; /* 文字の色 */
margin-bottom: 8px; /* 各項目間の余白 */
line-height: 1.5; /* 行の高さ */
}
/* --- マーカーの種類を変える (<li>タグには直接指定しません) --- */
/* マーカーの種類は、<ul>タグに対して指定します */
/* マーカーなし */
.no-marker {
list-style-type: none; /* マーカーを完全に消す */
padding-left: 0; /* マーカーが消えた分、左の余白も無くす */
}
/* 四角いマーカー */
.square-marker {
list-style-type: square; /* ■ のマーカー */
}
/* 中抜きの丸いマーカー */
.circle-marker {
list-style-type: circle; /* ○ のマーカー */
}
/* リストの文字全体に色を付ける例 */
.blue-list li {
color: #007bff; /* 青い文字 */
}
</style>
</head>
<body>
<h1>リストタグの例</h1>
<h2>デフォルトの箇条書き</h2>
<ul>
<li>デフォルトは黒い丸（●）のマーカーです。</li>
<li>特にCSSを指定しないとこの見た目になります。</li>
</ul>
<h2>マーカーなしの箇条書き</h2>
<ul class="no-marker">
<li>このリストにはマーカーがありません。</li>
<li>`list-style-type: none;` で消しています。</li>
</ul>
<h2>四角いマーカーの箇条書き</h2>
<ul class="square-marker">
<li>四角いマーカー（■）に変わりました。</li>
<li>`list-style-type: square;` を使っています。</li>
</ul>
<h2>中抜きの丸いマーカーの箇条書き</h2>
<ul class="circle-marker">
<li>中抜きの丸いマーカー（○）です。</li>
<li>`list-style-type: circle;` を使っています。</li>
</ul>
<h2>青い文字の箇条書き</h2>
<ul class="blue-list">
<li>このリストの文字は青色です。</li>
<li>`li`タグに直接`color`プロパティを適用しています。</li>
</ul>
</body>
</html>
プレビュー
複数の階層（ネスト）を持てます
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ネストされたリストの例</title>
</head>
<body>
<h1>旅行の持ち物リスト</h1>
<ul>
<li>
衣類
<ul>
<li>Tシャツ</li>
<li>ズボン</li>
</ul>
</li>
<li>
洗面用具
<ul>
<li>歯ブラシ</li>
<li>シャンプー</li>
</ul>
</li>
</ul>
</body>
</html>
プレビュー
