一つ前の章ではリックボタンの設置方法について学習しました。
今回はリストやテーブルのスタイルを変更する方法について見ていきましょう。
Lesson3-1：ボックス配置の基礎を理解しよう
Lesson3-2：ボックスサイズを変更しよう
Lesson3-3：ボックスを自在に配置しよう
Lesson3-4：画像を自在に配置しよう
Lesson3-5：画像のスタイルを変更しよう
Lesson3-6：背景画像を設定しよう
Lesson3-7：リンクボタンを設置しよう
Lesson3-8：リストとテーブルのスタイルを変更しよう ◁今回はココ
Lesson3-9：CSS変数を理解しよう
Webページを作成する際、情報を見やすく整理するために欠かせないのが「リスト」と「テーブル」です。
リストは箇条書きで項目を整理するのに便利であり、テーブルはデータや情報を行と列で整理して表示するのに役立ちます。しかしこれらの要素は初期状態（デフォルト）ではシンプルすぎて、Webサイト全体のデザインと調和しないこともあります。
そこで重要になるのが、CSSを活用してリストやテーブルの見た目をカスタマイズする方法です。
本記事ではリストとテーブルのデフォルトスタイルをリセットし、デザイン性の高い表示に変更する方法を詳しく解説します。
初心者の方でも理解しやすいように、基本から順を追って説明していきますので、一緒に学んでいきましょう！
<<前のページ
HTML/CSSの記事一覧
次のページ>>
リストのスタイル変更
HTMLのリストには主に順序付きリスト、順序なしリスト、定義リストの3つの種類があります。
それぞれのリスト自体の細かい内容はLesson1-4で学習しました。ブラウザによって多少の違いはありますが、デフォルトではこれらのリストに余白やマーカーが自動的に付与されています。
このままでも使用できますが、デザインに合わせて自由にカスタマイズすることが可能です。
デフォルトスタイルのリセット
多くのWebサイトではリストのデフォルトスタイルをリセットしてから独自のデザインを適用します。
リセットすることで余計なマージンやパディング、マーカーを取り除き、すっきりとした見た目にできます。
以下のCSSを読み込むことで、デフォルトスタイルをリセットできます。
ul, ol {
list-style: none; /* マーカー（●や番号）を削除 */
padding: 0; /* 内側の余白を削除 */
margin: 0; /* 外側の余白を削除 */
}これで、デザインのベースが整いました。
カスタムマーカーでリストを装飾
デフォルトのマーカーを削除した後は、独自のアイコンやマーカーを追加することができます。
::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>- 枠線が表示されない。
- セル同士の間に余白がある。
- テキストは左寄せになっていることが多い。
これを自由にカスタマイズしていきましょう。
テーブルのカスタマイズ方法
1. 枠線の追加（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;：セル内に余白を追加し、見た目を整えます。
2. 余白と間隔の調整（padding と border-spacing）
デフォルトではセル間に余白がある場合があります。border-spacing でセル間の間隔を調整しましょう。
table {
border-collapse: separate; /* セル間の余白を有効にする */
border-spacing: 10px; /* セル間に10pxの間隔を設定 */
}border-collapse: separate;：セル同士の間に余白を持たせるデザインに。border-spacing: 10px;：セル間に具体的な間隔を指定します。
3. 背景色の設定（background-color）
テーブルに背景色を追加するとデータの区切りが明確になります。特にヘッダー部分や行ごとに色分けすると視認性が向上します。
th {
background-color: #f2f2f2; /* ヘッダー行に薄いグレーの背景色 */
color: #333; /* 文字色を濃いグレーに */
}
tr:nth-child(even) {
background-color: #f9f9f9; /* 偶数行に薄い背景色でストライプ効果 */
}nth-child(even)：偶数行だけにスタイルを適用することで、ストライプ状のデザインに。background-color：視認性向上やデザインの強調に便利です。
4. テキストの配置（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でシンプルな要素をおしゃれに変身させるスキルが身についた
ここまで学習を進めてきた皆さん、本当にお疲れさまでした！
CSSを活用することで、同じHTMLの構造でも見た目を大きく変化させることができる楽しさを感じていただけたでしょうか？
デザインの工夫次第でページ全体の印象も大きく変わります。ぜひ今回学んだテクニックを活用して、自分だけのオリジナルデザインに挑戦してみてください！
FAQ｜リストとテーブルのデザインに関するよくある質問
- Q1. リストのマーカーを画像に変更するにはどうすればいいですか？
-
list-style-imageプロパティを使えば、リストのマーカーを好きな画像に変更できます。例えば、以下のCSSを適用すると、
bullet.pngという画像をリストのマーカーとして設定できます。ul { list-style-image: url('bullet.png'); }画像のサイズ調整が必要な場合は、
backgroundプロパティとpadding-leftを組み合わせるのもおすすめです。
- Q2. ネストリスト（入れ子のリスト）のデザインを変更するには？
-
入れ子になったリストのデザインは、
ul ulやol olのようなセレクタを使って調整できます。例えば、入れ子リストのマーカーの形を変更する場合、以下のように設定できます。
ul ul { list-style-type: square; }また、リストの階層ごとにインデントを調整したい場合は、
marginやpaddingを活用すると良いでしょう。
- Q3. テーブルのセルの間に余白を作るにはどうしたらいいですか？
-
テーブルのセル同士の間に余白を作るには、
border-spacingまたはpaddingを使用します。border-spacingを使う場合（セル間の隙間）table { border-spacing: 10px; }paddingを使う場合（セルの内側の余白）td { padding: 10px; }
- Q4. 偶数行・奇数行で背景色を変えるにはどうすればいいですか？
-
nth-child疑似クラスを使うことで、偶数行と奇数行のデザインを変えることができます。例えば奇数行を白、偶数行を薄いグレーにしたい場合、以下のように設定できます。
tr:nth-child(even) { background-color: #f2f2f2; }これにより、見やすいストライプデザインのテーブルが作成できます。
- Q5. テーブルをスマホ対応にするにはどうすればいいですか？
-
スマホで横スクロールできるようにするには、
overflow-x: auto;を利用するのが効果的です。テーブルを
<div>で囲んでスタイルを適用すると、画面が狭い場合に横スクロールできるようになります。.table-container { overflow-x: auto; }より詳しいボックスモデルや配置の概念については、「Lesson3-1：ボックス配置の基礎を理解しよう」 で学ぶことができます。
練習問題3-8：簡単なメニュー表をデザインしよう！
以下の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>- リストのカスタマイズ
- リストのデフォルトのマーカー（黒い丸）を消して、オリジナルのアイコン（例: ★）を表示してみましょう。
- リスト項目に余白（インデント）を追加して、見やすく整えましょう。
- テーブルのカスタマイズ
- テーブルに枠線を追加して、セルの境界をはっきりと表示しましょう。
- ヘッダー行に背景色（例: 薄いグレー）を設定して、項目名が目立つようにしましょう。
- 偶数行にだけ薄い背景色を追加して、見やすいストライプ模様にしてみましょう。
- テーブル全体にホバー効果を追加し、マウスを乗せたときに行の背景色が変わるようにしましょう。
初めてのWebサイトを作ろう3-8
このサイトの Lesson1-1（HTML学習の入り口） か Lesson2-1（CSS学習の入り口）から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1かLesson2-1のページ下部からダウンロードして下さい。
Lesson3-8のまとめノートと練習問題を追加しよう
この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も、引き続き頑張ってください^^
<<前のページ
HTML/CSSの記事一覧
次のページ>>
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。