【CSS】レッスン3-8：リストとテーブルのスタイルを変更しよう
一つ前の章ではリックボタンの設置方法について学習しました。
今回はリストやテーブルのスタイルを変更する方法について見ていきましょう。
Lesson１：HTML入門編
Lesson２：CSS入門編
Lesson３：CSS応用編
・Lesson3-1：ボックス配置の基礎を理解しよう
・Lesson3-2：ボックスサイズを変更しよう
・Lesson3-3：ボックスを自在に配置しよう
・Lesson3-4：画像を自在に配置しよう
・Lesson3-5：画像のスタイルを変更しよう
・Lesson3-6：背景画像を設定しよう
・Lesson3-7：リンクボタンを設置しよう
・Lesson3-8：リストとテーブルのスタイルを変更しよう ◁今回はココ
・Lesson3-9：CSS変数を理解しよう
・Lesson3-☆1：コピペして使える！カードレイアウト集
・Lesson3-☆2：HTML/CSSテンプレート６選
・Lesson3-☆3：CSSのリセット＆ノーマライズとは？
Webページを作成する際、情報を見やすく整理するために欠かせないのが「リスト」と「テーブル」です。
リストは箇条書きで項目を整理するのに便利であり、テーブルはデータや情報を行と列で整理して表示するのに役立ちます。
しかしこれらの要素は初期状態（デフォルト）ではシンプルすぎて、Webサイト全体のデザインと調和しないこともあります。
本記事ではリストとテーブルのデフォルトスタイルをリセットし、デザイン性の高い表示に変更する方法を詳しく解説します。
初心者の方でも理解しやすいように、基本から順を追って説明していきますので、一緒に学んでいきましょう！
<<前のページ
HTML/CSSの記事一覧
次のページ>>
リストのスタイルを変更しよう
HTMLのリストには主に順序付きリスト、順序なしリスト、定義リストの3つの種類があります。
それぞれのリスト自体の細かい内容は Lesson1-4 で学習しました。
ブラウザによって多少の違いはありますが、デフォルトではこれらのリストに余白やマーカーが自動的に付与されています。
このままでも使用できますが、デザインに合わせて自由にカスタマイズすることが可能です。
デフォルト表示の整え方｜マーカーを隠す・余白を調整
多くのWebサイトではリストのデフォルトスタイルをリセットしてから独自のデザインを適用します。
リセットすることで余計なマージンやパディング、マーカーを取り除き、すっきりとした見た目にできます。
以下のCSSを読み込むことで、デフォルトスタイルをリセットできます。
ul, ol {
list-style: none; /* マーカー（●や番号）を削除 */
padding: 0; /* 内側の余白を削除 */
margin: 0; /* 外側の余白を削除 */
}これで、デザインのベースが整いました。
カスタムマーカーの作り方｜::marker と::beforeの活用
デフォルトのマーカーを削除した後は、独自のアイコンやマーカーを追加することができます。
::before疑似要素を使い、カスタムマーカーを追加。contentプロパティで任意の記号や文字をマーカーにできる。
シンプルな星形のカスタムマーカーを設定する例を見てみましょう。
以下のCSSコードを読み込んだHTMLコードを作成し、ブラウザ表示してみましょう。
<ul class="custom-list"> <li>特徴1</li> <li>特徴2</li> <li>特徴3</li> </ul>
.custom-list li::before {
content: "★"; /* 星マークを追加 */
color: orange; /* マーカーの色をオレンジに変更 */
margin-right: 8px; /* テキストとの間に余白を追加 */
}もし正しく表示されなかった場合は、デフォルトスタイルのリセットが正しくされているか確認しましょう。
また、「★」以外にもいろいろな文字を指定できますので試してみましょう。
ネストリストのデザインを工夫しよう
入れ子になったリスト（ネストリスト）のデザインは、以下のようなコードで設定できます。
ul ul {
padding-left: 20px; /* ネストしたリストのインデントを調整 */
list-style-type: circle; /* ネストリストのマーカーを丸に変更 */
}これにより階層ごとに異なるスタイルを適用できます。
情報の階層構造を視覚的にわかりやすくするための重要なポイントです。
テーブル装飾の基本｜見やすさを高める設定
HTMLのテーブルは、データや情報を行（row）と列（column）で整理して表示するために使用されます。
基本的なテーブルの構造は Lesson1-5 で学習しました。
このままでも使用できますが、デザインに合わせて自由にカスタマイズすることが可能です。
テーブル装飾の手順｜罫線・間隔・背景・配置
HTMLでシンプルなテーブルを作成すると、次のようなコードになります。
<table>
<tr>
<th>名前</th>
<th>年齢</th>
<th>出身地</th>
</tr>
<tr>
<td>山田 太郎</td>
<td>25</td>
<td>東京</td>
</tr>
<tr>
<td>鈴木 花子</td>
<td>30</td>
<td>大阪</td>
</tr>
</table>デフォルトスタイルのテーブルは以下のような特徴があります。
- 枠線が表示されない。
- セル同士の間に余白がある。
- テキストは左寄せになっていることが多い。
これを自由にカスタマイズしていきましょう。
枠線の指定｜border とborder-collapseの使い方
テーブルに枠線を追加するには borderプロパティ を使用します。
また、 border-collapse を指定することで枠線の重なりを防ぎ、すっきりしたデザインにできます。
以下のCSSコードを上記のHTMLコードに読み込ませてブラウザ表示してみましょう。
table {
border-collapse: collapse; /* 枠線を一つにまとめる */
width: 100%; /* テーブルの幅を親要素に合わせる */
}
th, td {
border: 1px solid #000; /* セルに黒い枠線を追加 */
padding: 8px; /* セル内の余白を追加して見やすく */
text-align: center; /* テキストを中央揃え */
}border-collapse: collapse;：枠線を結合して、二重線にならないようにします。border: 1px solid #000;：1ピクセルの実線で黒い枠線を表示。padding: 8px;：セル内に余白を追加し、見た目を整えます。
セル内余白とセル間隔｜padding とborder-spacing
デフォルトではセル間に余白がある場合があります。
border-spacing でセル間の間隔を調整しましょう。
table {
border-collapse: separate; /* セル間の余白を有効にする */
border-spacing: 10px; /* セル間に10pxの間隔を設定 */
}border-collapse: separate;：セル同士の間に余白を持たせるデザインに。border-spacing: 10px;：セル間に具体的な間隔を指定します。
背景色の指定｜background-color と可読性の確保
テーブルに背景色を追加するとデータの区切りが明確になります。
特にヘッダー部分や行ごとに色分けすると視認性が向上します。
th {
background-color: #f2f2f2; /* ヘッダー行に薄いグレーの背景色 */
color: #333; /* 文字色を濃いグレーに */
}
tr:nth-child(even) {
background-color: #f9f9f9; /* 偶数行に薄い背景色でストライプ効果 */
}nth-child(even)：偶数行だけにスタイルを適用することで、ストライプ状のデザインに。background-color：視認性向上やデザインの強調に便利です。
テキスト配置｜text-align とvertical-alignの使い方
テーブル内のテキストはtext-align で水平位置、vertical-align で垂直位置を調整できます。
th, td {
text-align: left; /* テキストを左揃え */
vertical-align: middle; /* テキストを上下中央揃え */
}text-align: left;：データの種類によって左揃え、中央揃え、右揃えを使い分けます。vertical-align: middle;：複数行のテキストがある場合も中央揃えが可能です。
テーブルのカスタマイズ例
以下のコードをブラウザ表示してみましょう。
<table class="custom-table">
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫状況</th>
</tr>
<tr>
<td>ノートパソコン</td>
<td>120,000円</td>
<td>在庫あり</td>
</tr>
<tr>
<td>スマートフォン</td>
<td>80,000円</td>
<td>残りわずか</td>
</tr>
</table>.custom-table {
width: 100%;
border-collapse: collapse;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* テーブルに影を追加 */
}
.custom-table th {
background-color: #4CAF50; /* ヘッダーの背景色を緑に */
color: white; /* ヘッダーの文字色を白に */
padding: 10px;
}
.custom-table td {
border: 1px solid #ddd; /* セルの境界線を薄いグレーに */
padding: 8px;
text-align: center;
}
.custom-table tr:nth-child(even) {
background-color: #f9f9f9; /* 偶数行に薄い背景色でストライプ効果 */
}
.custom-table tr:hover {
background-color: #f1f1f1; /* ホバー時に背景色を変更 */
}box-shadowで立体感のあるデザインに。nth-child(even)とhoverを組み合わせ、見た目の変化とインタラクティブ性を向上。- カラーバランスを整えることで、データが一目で見やすくなります。
まとめ｜リストとテーブル装飾の要点
このレッスンでは、リストとテーブルのスタイルをCSSでカスタマイズする方法について学びました。
- リストのカスタマイズ：マーカーの種類や配置、インデントの調整が可能
- テーブルのカスタマイズ：枠線、余白、背景色、ホバー効果で視認性アップ
ここまで学習を進めてきた皆さん、本当にお疲れさまでした！
CSSを活用することで、同じHTMLの構造でも見た目を大きく変化させることができる楽しさを感じていただけたでしょうか？
デザインの工夫次第でページ全体の印象も大きく変わります。ぜひ今回学んだテクニックを活用して、自分だけのオリジナルデザインに挑戦してみてください！
練習問題｜リストとテーブルを装飾しよう
今回学習した内容を復習する練習問題に挑戦しましょう。
問題｜簡単なメニュー表をデザインしよう！
以下のHTMLコードは、レストランのメニューを表示するシンプルなページであり、リストとテーブルが含まれています。
このコードにCSSを追加して、見やすくスタイリッシュなデザインにカスタマイズしてみましょう。
ファイル名はそれぞれ、training3-8.htmlとtraining3-8.cssにしてください。
<h2>🍽️ 本日のおすすめメニュー</h2>
<ul>
<li>パスタ</li>
<li>ピザ</li>
<li>サラダ</li>
</ul>
<table>
<tr>
<th>メニュー</th>
<th>価格</th>
<th>おすすめ度</th>
</tr>
<tr>
<td>マルゲリータピザ</td>
<td>1,200円</td>
<td>★★★☆☆</td>
</tr>
<tr>
<td>シーザーサラダ</td>
<td>800円</td>
<td>★★★★☆</td>
</tr>
<tr>
<td>カルボナーラ</td>
<td>1,100円</td>
<td>★★★★★</td>
</tr>
</table>- リストのカスタマイズ
- リストのデフォルトのマーカー（黒い丸）を消して、オリジナルのアイコン（例: ★）を表示してみましょう。
- リスト項目に余白（インデント）を追加して、見やすく整えましょう。
- テーブルのカスタマイズ
- テーブルに枠線を追加して、セルの境界をはっきりと表示しましょう。
- ヘッダー行に背景色（例: 薄いグレー）を設定して、項目名が目立つようにしましょう。
- 偶数行にだけ薄い背景色を追加して、見やすいストライプ模様にしてみましょう。
- テーブル全体にホバー効果を追加し、マウスを乗せたときに行の背景色が変わるようにしましょう。
この問題の解答例
模範解答は以下の通りです。
- 正解コード
-
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>レストランメニュー｜リスト＆テーブルの装飾</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="./training3-8.css" /> </head> <body> <h2>🍽️ 本日のおすすめメニュー</h2> <ul> <li>パスタ</li> <li>ピザ</li> <li>サラダ</li> </ul> <table> <tr> <th>メニュー</th> <th>価格</th> <th>おすすめ度</th> </tr> <tr> <td>マルゲリータピザ</td> <td>1,200円</td> <td>★★★☆☆</td> </tr> <tr> <td>シーザーサラダ</td> <td>800円</td> <td>★★★★☆</td> </tr> <tr> <td>カルボナーラ</td> <td>1,100円</td> <td>★★★★★</td> </tr> </table> </body> </html>@charset "utf-8"; /* ベース */ * { box-sizing: border-box; } body { margin: 24px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; color: #333; line-height: 1.7; } h2 { margin: 0 0 12px; } /* 1) リストのカスタマイズ */ /* マーカーを星に置き換え、見やすいインデントを付与 */ ul { padding-left: 1.6rem; /* インデント（条件1-2） */ margin: 0 0 16px; } ul li { margin: 4px 0; } ul li::marker { /* 条件1-1：黒い丸→★に置き換え */ content: "★ "; color: #ffb300; /* 星の色（お好みで調整可） */ font-size: 1.05em; } /* 2) テーブルのカスタマイズ */ table { width: 100%; border-collapse: collapse; /* 条件2-1：罫線をくっきり */ margin-top: 12px; background: #fff; } th, td { border: 1px solid #ddd; /* 条件2-1：枠線 */ padding: 12px; text-align: left; /* 条件2-4：配置（横） */ vertical-align: middle; /* 条件2-4：配置（縦） */ white-space: nowrap; } th { background: #f2f3f5; /* 条件2-2：ヘッダー背景（薄いグレー） */ font-weight: 700; } /* 条件2-3：偶数行をストライプ（ヘッダーは除外） */ table tr:nth-child(n + 2):nth-child(even) { background: #fafafa; } /* 条件2-4：行ホバー（ヘッダーは除外） */ table tr:not(:first-child):hover { background: #e8f4ff; transition: background-color 0.15s ease-out; }
<<前のページ
HTML/CSSの記事一覧
次のページ>>
初めてのWebサイトを作ろう3-8
このサイトの Lesson1-1（HTML学習の入り口） か Lesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
既に入手済みの場合はこのLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
練習問題の解答を保存しよう
練習問題3-8で作成した２つのファイルを学習フォルダの中に保存しましょう。
- training3-8.html ⇒ Lesson3フォルダに保存
- training3-8.css ⇒ Lesson3フォルダの中のstyleフォルダに保存
トップページからリンクで飛べるようになりますので確認しましょう。
今回のまとめノートを作成・保存しよう
下記のHTMLコードは、このLesson3-8で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite3-8.html」という名前で保存し、「lesson3（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson3-8</title> <link rel="stylesheet" href="style/styles-lesson3.css"> </head> <body> <header> <h1>Lesson3-8：リストとテーブルのデザインを変更しよう</h1> </header> <div class="container"> <section> <h2>はじめに</h2> <p>ウェブページでは、情報を整理し視認性を向上させるために「リスト」と「テーブル」が重要な役割を果たします。本記事では、HTMLのリストとテーブルのデフォルトスタイルをリセットし、CSSを用いてデザインをカスタマイズする方法を学びます。</p> </section> <section> <h2>レッスンの到達目標</h2> <p>リストやテーブルを見やすく整え、デザイン性を向上させるCSSの活用方法を習得することが目的です。</p> </section> <section> <h2>このレッスンで学習した内容</h2> <h3>リストのスタイル変更</h3> <ul> <li>ul・olのデフォルトスタイルをリセットする方法</li> <li><code>list-style: none;</code> を使ってマーカーを削除する</li> <li><code>::before</code> 疑似要素を利用して、カスタムマーカーを追加する</li> <li>ネストリストのデザインを調整する方法</li> </ul> <h3>テーブルのスタイル変更</h3> <ul> <li><code>border-collapse: collapse;</code> を使用して枠線の重なりを防ぐ</li> <li><code>border: 1px solid;</code> を使ってセルの枠線を調整する</li> <li><code>nth-child(even)</code> を利用したストライプ効果の追加</li> <li><code>text-align</code>・<code>vertical-align</code> を使ったテキストの整列方法</li> <li><code>box-shadow</code> を活用した立体的なテーブルデザイン</li> </ul> </section> <section> <h2>テーブルのデザイン例</h2> <p>以下の表では、リストやテーブルのデザインをカスタマイズする際に役立つCSSプロパティをまとめています。各プロパティの役割を理解し、デザインの調整に活用しましょう。</p> <table border="1"> <thead> <tr> <th>プロパティ</th> <th>説明</th> </tr> </thead> <tbody> <tr> <td>border-collapse</td> <td>枠線の重なりを制御</td> </tr> <tr> <td>nth-child(even)</td> <td>偶数行の背景色を変える</td> </tr> <tr> <td>text-align</td> <td>テキストの水平位置を指定</td> </tr> <tr> <td>box-shadow</td> <td>影を追加し立体的にする</td> </tr> </tbody> </table> </section> <section> <h2>トピック・豆知識</h2> <ul> <li><code>border-collapse: separate;</code> を使うとセル間のスペースを自由に調整できる。</li> <li><code>background-color</code> を使うと、行ごとの背景色を変更し視認性を向上させられる。</li> <li><code>cursor: pointer;</code> をリストのリンクボタンに適用すると、クリックできることを視覚的に伝えやすくなる。</li> </ul> </section> <section> <h2>まとめ</h2> <p>本レッスンでは、HTMLのリストとテーブルのデフォルトスタイルをリセットし、CSSを使ってデザインを改善する方法を学びました。見た目を整えることで、情報の整理がしやすくなり、ユーザーにとって視認性の高いデザインを実現できます。リストやテーブルのデザインを工夫し、より魅力的なウェブページを作成しましょう。</p> </section> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </div> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>これでLesson3-8の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
リストとテーブルのスタイル変更の疑問解消｜FAQとよくあるトラブル
初心者がつまずきやすいポイントをFAQとしてまとめ、よくあるトラブルとその解決法をわかりやすく整理しました。
理解を深めたいときや、ふと疑問に感じたときに役立ててください。
FAQ｜リストとテーブルのスタイル変更に関するよくある質問
今回の記事に関する「よくある質問」とその解答について、以下の内容を参考にしてください。
- Q1. リスト（ul/ol）のデザインはどこまで自由にカスタマイズできますか？
-
リスト要素は「list-style-type」や「list-style-position」を使うことで、記号の種類や配置を変えられます。また、疑似要素（::beforeや::after）を活用すれば、独自のアイコンや装飾も追加可能です。ただし、過度な装飾はユーザビリティや可読性を損なう場合があるので注意しましょう。
- Q2. テーブルの罫線（border）をきれいに見せるにはどのプロパティを使うべきですか？
-
テーブルの罫線をすっきり見せるには「border-collapse」や「border-spacing」を適切に設定するのがポイントです。特に「border-collapse: collapse;」を使うことで、隣接するセルの罫線が重ならずに表示されるため、より自然な見た目になります。デザインに応じて調整しましょう。
- Q3. スマホなど小さい画面でテーブルを見やすくする工夫はありますか？
-
標準のテーブルはスマホ表示で横に長くなりがちですが、「overflow-x: auto;」をテーブルの親要素に指定してスクロール可能にしたり、CSSで縦に並べ替えるレスポンシブデザインも有効です。重要なデータは優先表示するなど、情報設計も工夫しましょう。
よくあるトラブルと解決法｜リストとテーブルのスタイル編
今回の記事に関する「よくあるトラブル」とその原因、解決法について、以下の内容を参考にしてください。
リストのカスタムアイコンが表示されない
- トラブルの原因と対処法を見る
-
・トラブルの原因例
CSSの疑似要素（::before、::after）でアイコンを設定したが、
contentプロパティの値や、指定したクラス・セレクタに間違いがある場合。・トラブルの解決法
設定したセレクタやクラス名がHTMLと一致しているか確認し、
contentプロパティの記述ミスや、外部アイコンフォントの読み込み忘れがないか調べてみましょう。
テーブルの枠線が二重になってしまう
- トラブルの原因と対処法を見る
-
・トラブルの原因例
border-collapseプロパティの指定漏れ、もしくはセルごとに異なるborderスタイルが設定されていることが多いです。・トラブルの解決法
border-collapse: collapse;やborder-spacingの指定が正しくなされているか、また各セルやテーブル本体のborder指定に重複や矛盾がないかを順番にチェックしましょう。
テーブルの幅が意図せず広がりレイアウトが崩れる
- トラブルの原因と対処法を見る
-
・トラブルの原因例
テーブル内のセルに極端に長い単語や英数字が含まれている、または
table-layout: fixed;などのレイアウト設定が適切でないケース。・トラブルの解決法
各セルの内容に長い単語や改行しない文字列が含まれていないか確認し、必要に応じて
word-breakやoverflow系のCSSプロパティを調整してみてください。また、table-layoutやwidthの指定もチェックしましょう。
<<前のページ
HTML/CSSの記事一覧
次のページ>>