Webページを読みやすくするために欠かせないのが
「リスト（箇条書き）」と「表（テーブル）」 です。
文章だけのページより、
情報が整理されているページのほうが読者はストレスなく理解できます。
この記事では、HTMLで使える 3種類のリスト, 表の基本タグ,
実際のコード例までわかりやすくまとめます。
リストとは？（3種類ある）
HTMLで書けるリストは以下の3種類です。
| 種類 | タグ | 説明 |
|---|---|---|
| 順序なしリスト | <ul> | 箇条書き（・） |
| 順序付きリスト | <ol> | 番号付き（1. 2. 3.） |
| 定義リスト | <dl> | 用語と説明をセットで書く |
順序なしリスト（ul）
「・」で並ぶ一般的な箇条書きです。
▶ 書き方
<ul>
<li>Java</li>
<li>HTML/CSS</li>
<li>Python</li>
</ul>▶ 表示例
・Java
・HTML/CSS
・Python
順序付きリスト（ol）
番号が自動で付くリスト。手順紹介などに最適。
▶ 書き方
<ol>
<li>環境構築をする</li>
<li>コードを書く</li>
<li>動作確認をする</li>
</ol>▶ 表示例
- 環境構築をする
- コードを書く
- 動作確認をする
定義リスト（dl）
用語の説明を書きたいときはこれが最適。
▶ 書き方
<dl>
<dt>HTML</dt>
<dd>Webページの骨組みを作る言語</dd>
<dt>CSS</dt>
<dd>Webページの見た目を装飾する言語</dd>
</dl>dt＝用語（Term）
dd＝説明（Definition）
表（table）の基本構造
表（テーブル）は以下のタグで構成されます。
| タグ | 意味 |
|---|---|
<table> | 表全体 |
<tr> | 行（row） |
<th> | 見出しセル |
<td> | 通常のセル |
表の作り方（table）
▶ 例：学習進捗表を作る
<table border="1">
<tr>
<th>言語</th>
<th>学習状況</th>
<th>学習時間</th>
</tr>
<tr>
<td>Java</td>
<td>基礎〜実践</td>
<td>200時間</td>
</tr>
<tr>
<td>HTML/CSS</td>
<td>基礎</td>
<td>50時間</td>
</tr>
</table>▶ 表示イメージ
| 言語 | 学習状況 | 学習時間 |
|---|---|---|
| Java | 基礎〜実践 | 200時間 |
| HTML/CSS | 基礎 | 50時間 |
表に枠線をつける方法
今のHTMLでは
枠線はCSSでつけるのが推奨 です（border=”1″ は古い書き方）。
例：
<table class="sample-table">
<tr>
<th>項目</th>
<th>内容</th>
</tr>
<tr>
<td>名前</td>
<td>山田</td>
</tr>
</table>.sample-table,
.sample-table th,
.sample-table td {
border: 1px solid #333;
border-collapse: collapse;
padding: 8px;
}CSSを書く際、今までなら<style></style>の中に書いていたのを覚えていますか？
これを<html></html>内に記載することでページをデザインできます（内部CSS）。
今回はなぜか分かれています。
これを外部CSSといいます！
こちらのほうが実務的で便利なのでさらっと紹介しますね。
まずは画像のように「~~.css」というファイルを作りましょう。
「.css」が末尾で、名前がアルバイトなら自由です。
次にこのコードがあります。
これを<head></head>の中に書いてあげましょう！
これを書くことで外部のCSSファイルを読み込めるので、HTMLのコードがごちゃごちゃしない。
さらにHTMLとCSSをファイルごとに役割分担できているので、分かりやすいです！
あとは例を参考に、HTMLのコードはHTMLのファイルに、CSSはCSSのファイルに書くだけです。
ちょこっと補足
.sample-table,
.sample-table th,
.sample-table td {
border: 1px solid #333;
border-collapse: collapse;
padding: 8px;
}先ほどのこれ、どういうことなのか混乱された方いるんじゃないでしょうか。
実はHTML側の要素タグ内に
<table class="sample-table">このように「class=”名前”」とすることで名前を指定してCSSを指定できます。
他にも「id=”名前“」というのもありますので、頭の片隅にでもおいておいてください。
何が便利なの？と思うかもしれませんので以下のコードを見てみてください。
<p>これは赤色</p>
<p>これは青色</p>
<p>これは緑色</p>さあ、テキスト通りに色を変えるとなるとどうすればいいでしょうか？
p{
color: red;
}上記のCSSではすべての行が赤くなってしまいます。
そんな時に下記のように「class=””」を使うのです！
<p class="red-text">これは赤色</p>
<p class="blue-text">これは青色</p>
<p class="green-text">これは緑色</p>.red-text{
color: red;
}
.blue-text{
color: blue;
}
.green-text{
color: green;
}こうすることで同じ「ｐ」であっても、区別してＣＳＳでデザインできます！
またclassで指定した名前をＣＳＳで使う場合は「.~~」のように
先頭の「.」を忘れないでください！
もし「id=”名前”」ならＣＳＳ側では「#名前」のように先頭に「#」を付けます！
表にすると以下のような感じです。
| html | css | 備考 |
| <p></p> | p{ color: red; など } | 要素名をそのまま使う。 |
| <p class=”test”></p> | .test{ color: red; など } | 「.」を忘れないように！ |
| <p id=”test”></p> | #test{ color: red; など } | idの場合は、同じID名は他の要素には使えない。 |
まとめ（この記事のポイント）
- HTMLのリストは ul, ol, dl の3種類
- 箇条書き、番号付き、用語説明で使い分ける
- 表は table / tr / td / th の組み合わせで作る
- 枠線などの装飾は CSS が基本
リストと表を使えるようになると、
あなたのブログ記事・Webサイトがぐっと読みやすくなります！
ではでは！次回！：HTML入門⑤ フォーム要素
コメント