HTML・CSS 100日チャレンジ、5日目。
今回のテーマは、**「リストタグ」と「テーブルタグ」**でした。
学んだのは、主にこの4つです。
ul（順序なしリスト）ol（順序ありリスト）li（リスト項目）table（表）
普段何気なく見ているWebサイトの箇条書きや料金表、比較表などが、実はこうしたHTMLタグを使って作られているんだと知り、「なるほど、こういう仕組みだったのか！」と新鮮な気持ちになった一日でした。
今回は、HTML初心者の私が実際にコードを書きながら感じたことも含めて、5日目の学びをまとめていきます。
この記事で学んだこと
今回の5日目では、主に次のことを学びました。
ulとolの違いliの役割tableで表を作る方法- リストと表をどう使い分けるのか
- 「・」を直接入力するのではなく、HTMLのリストタグを使う意味
- コードを書く前に下書きすることの大切さ
特に印象に残ったのが、**「見た目が同じなら何でもいいわけではない」**ということ。
HTMLは、ただ見た目を作るためだけのものではないんだと、少しずつ実感できるようになってきました。
HTMLのリストタグとテーブルタグをおさらい
まずは、今回学んだ4つのタグについて整理してみます。
ul・li｜順番のない箇条書き
ulは、順番に意味がない項目を並べるときに使うタグです。
たとえば、
- Web制作のメリット
- サービスの特徴
- 買い物リスト
- メニュー一覧
などがイメージしやすいと思います。
ulの中に、それぞれの項目をliで入れていきます。
つまり、
ul＝リスト全体
li＝リストの中の1項目
というイメージです。
実際にコードを書いてみると、「あ、この箇条書きはulとliでできているんだ」と、普段見ているWebサイトの見え方も少し変わってきました。
ol・li｜順番に意味があるリスト
olは、順番に意味がある項目を並べるときに使うタグです。
たとえば、
- Web制作の手順
- 料理の作り方
- ランキング
- 作業の流れ
などです。
「1番目、2番目、3番目……」という順番が重要な場合は、olを使います。
【ここに画像③：IMG_0801-1024×816.jpegを入れる】
ulとolはどちらもリストを作るためのタグですが、
順番に意味があるかどうか
という違いがあります。
最初は細かい違いに感じましたが、実際にコードを書いてみると「これはul」「これはol」と少しずつ判断できるようになってきました。
table｜情報を表形式で整理する
そして今回もう一つ学んだのが、tableタグです。
tableは、行と列を使って情報を整理するときに使うタグです。
たとえば、
- 料金表
- サービスの比較表
- 商品情報
- スペック表
- 営業時間などの一覧
などがあります。
実際に表を作ってみると、リストとは違って「行」と「列」を意識する必要があり、少し難しく感じました。
でも、料金や商品の情報など、複数の項目を比較して見せたいときには便利なタグだということが分かりました。
リストと表、どうやって使い分けるの？
ここで、私が実際にコードを書いていて一番迷ったポイントです。
「これってリスト？それとも表？」
最初はかなり悩みました。
例えば、2つの項目が並んでいるデータを見ると、
「2列になってるからtableかな？」
と思ってしまいます。
でも、ここで大切なのは見た目ではなく、情報の意味や関係性でした。
「見た目が2列だからtable」ではなくて、「行と列で情報を比較・整理する必要があるからtable」と考えると分かりやすい！
HTMLは見た目だけでタグを決めるのではなく、その情報がどんな意味を持っているのかを考えてタグを選ぶことが大切なんだと学びました。
実際にやってみて感じたこと｜頭の中だけで考えると混乱する！
正直に言うと、最初は「どのタグをどう使えばいいの？」と、頭の中がグチャグチャになりました。
ulとolの違いは理解できても、実際にコードを書き始めると、
「これはリストにするべき？」
「それとも表にするべき？」
と、手が止まってしまうことが何度もありました。
特に迷ったのが、項目が2列に並んでいるようなデータです。
見た目だけを見ると「表っぽい」と思ってしまうのですが、実際にはリストとして扱う場合もあります。
そこで今回、私なりに見つけた解決方法があります。
コードを書く前にノートに下書きする
それは、コードを書く前にノートに下書きをすることです。
頭の中だけで、
「ここはulで……」
「これはliで……」
「いや、tableかな？」
と考えていると、どんどん混乱してしまいます。
そこで、
「ここは箇条書き」
「ここは順番が必要」
「ここは表」
と、まず紙に書き出してみました。
すると、不思議なくらい頭の中が整理されました。
コードを書く前に完成イメージを作っておくことで、
「何を作るか考える」→「コードを書く」
という順番にできるからです。
これなら、コードを書きながら悩む時間もかなり減らせます。
今回の私の気づき
「いきなりコードを書くより、まずノートに書いて整理する！」
これだけで、かなり理解しやすくなりました。
これは今後のWeb制作の勉強でも、続けていきたい習慣です。
「・」を直接入力するのではなく、リストタグを使う
今回もう一つ意識したのが、
箇条書きにしたいからといって、「・」を直接入力しない
ということです。
たとえば、
・HTML
・CSS
・JavaScript
と入力すれば、見た目としては箇条書きに見えます。
でもHTMLでは、こうした内容をリストとして表現するなら、ulとliを使ってマークアップすることができます。
見た目だけを考えれば、「・」を入力するだけでも同じように見えるかもしれません。
でも、今回学んで感じたのは、
HTMLでは「どう見えるか」だけではなく、「どんな意味の情報なのか」を考えることが大切
ということでした。
HTMLは「見た目」だけを作るものではない
Webページを作っていると、つい、
「見た目が同じなら、どんな書き方でもいいんじゃない？」
と思ってしまいます。
でも、HTMLにはそれぞれ役割があります。
箇条書きならリストタグ、順番が必要なら順序付きリスト、表として整理する情報ならテーブル。
このように、内容に合ったHTMLタグを選ぶことが大切なんだと今回学びました。
そして、きちんと意味のあるHTMLで構造を作っておけば、後からCSSでデザインを変更するときにも扱いやすくなります。
初心者の私にとって、この「見た目と意味を分けて考える」という考え方はかなり新鮮でした。
リストタグとテーブルタグは実務でも使う？
「今回勉強したタグって、実際のWeb制作でも使うのかな？」
と思って調べてみたところ、リストタグやテーブルタグは、Webサイトのさまざまな場所で使われています。
たとえば、
| 用途 | 使うタグ |
|---|---|
| 料金表・比較表 | table |
| 商品一覧・メニュー | ulなど |
| サービスの特徴 | ul |
| 手順や作業フロー | ol |
| ランキング | ol |
このように考えると、今回学んだタグは単なる「練習問題」ではなく、実際のWebサイトを作るための基本的な知識なんだと分かります。
今まで何気なく見ていたWebサイトも、
「ここはulかな？」
「これはolだな」
「これはtableを使ってそう！」
と、HTMLの視点から見るようになってきました。
こうやって普段見ているWebサイトの見え方が少しずつ変わっていくのも、Web制作を学ぶ面白さなのかもしれません。
HTML・CSS 100日チャレンジ5日目のまとめ
今回の5日目では、HTMLのリストタグとテーブルタグについて学びました。
今回の学びをまとめると、
ul・ol・li・tableにはそれぞれ役割があるulは順番に意味がないリスト、olは順番に意味があるリストliはリストの各項目に使うtableは行と列で情報を整理するときに使う- 見た目だけではなく、情報の意味を考えてタグを選ぶ
- 「・」を直接入力するのではなく、適切なリストタグを使う
- コードを書く前にノートで下書きすると、頭の中が整理しやすい
まだまだ「これはどのタグを使えばいいんだろう？」と迷うこともあります。
でも、分からないたびに一つずつ調べて、実際にコードを書いてみる。
この繰り返しが、少しずつ自分の力になっている気がします。
100日チャレンジも、まだ5日目。
まだまだ先は長いですが、焦らず一つずつ「なぜこのタグを使うのか」まで理解できるようになりたいです。
HTML・CSS初心者からWeb制作ができるようになるまでの100日間。
これからも、できなかったことや迷ったことも含めて、リアルな学習記録として残していきます。
次は6日目。
引き続き、頑張ります！
。
コメント