ここ最近、干し野菜に凝っているエディター若栁です。干すための網も持ってます。お勧めは干しえのきです。

今まではJavaScriptに関することを本ブログで書いてきました。今回は、ブログ記事を書く際に学んだHTMLのタグについて調べました。

今回のお題

ブログやメールで手順や条件を相手に伝える場合、文章で説明するよりも箇条書きでぱしっと短く書いた方が伝わりやすい！というケースはよくあります。今回は、そういった時に使う、箇条書き・リストのタグについて調べました。

タグってなんでしょう？

HTML文書の中に置かれる目印のことで、”<“と”>”に囲まれた部分のこと。このタグを使って、文章構造や段落を指示する（＝マーク）する→タグでマークアップされる言語なので、HTMLは、Hyper Text Markup Languageなのです。

リストタグの種類

順番のつけられるリストのタグ（olタグ）と、単純な箇条書きのリストのタグ（ulタグ）があり、このタグで囲まれた中に、書きたい内容をアイテムのタグ(liタグ)で入れます。

• <ol>は、ordered list＝順番のあるリスト
• <ul>は、unordered list＝順番のないリスト
• <li>は、list item＝リスト（の中にある）項目・アイテム

必ず<ol>か<ul>タグで、ここからがリストです！と書きます。その中に<li>〜</li>で項目を書き、最後は</ol>か</ul>の閉じタグを使って閉じるのがルールです。

リストタグの例・順番が不要な場合

たとえば、料理のレシピ表記。料理に必要な材料そのものには、順番や優先度がないので、順番のないリストのulタグを使います。

えのきステーキの材料（1人前）

• えのき茸：1袋
• 醤油：小さじ1
• バター：20g
• 小麦粉：少々

リストタグの例・順番がある場合

続いて、料理の手順は、順番があるリストなのでolタグを使います。

1. えのきは石づきをカット、根元から3〜4cmくらいでさらにカットする
2. 両方の切り口に小麦粉をつける
3. 熱したフライパンにバターを溶かし、えのきを両面焼く
4. 最後に醤油を回し入れて、香ばしい香りが出たらできあがり

書く順番

liタグの直下には文字装飾のタグも置けますが、ulタグの直下にはliタグしか置けません。

タグを使う際の注意点（liタグに限らず、全般のおはなし）

次の2つは、豆腐とネギのお味噌汁を作る時の手順を、4つの項目で書いたものです。

1.鍋に水を入れて沸騰させる
2.その間に、豆腐とネギを切る
3.沸騰したら火を弱め、豆腐とネギを入れる
4.味噌を溶き入れて完成

1. 鍋に水を入れて沸騰させる
2. その間に、豆腐とネギを切る
3. 沸騰したら火を弱め、豆腐とネギを入れる
4. 味噌を溶き入れて完成

一見どちらもよさそうに見えますが、1番目の使い方はNGです。ソースを見比べてみると、NGの理由がわかります。

文章の段落を表すp要素とを使っているからです。p要素のpは、パラグラフ（paragraph）のp。文章の段落を表すタグなので、段落じゃないものに使うのはNGです。
タグはいっぱいありますが、それぞれこういう時に使う、という役割を持っているので、それ以外のことに使っちゃだめなんですね。コンピューター側でもタグを解釈しているので、上の使い方だと、pタグで囲まれた4つが、文章の段落と解釈されます。リストタグに限ったことではなく、見た目優先でタグを使うのは、ダメ、絶対。

リストを使って書きわけるべき内容は、長々と文章を書くよりも、リスト化した方がわかりやすい時。例えば、作業手順とか、持ち物とか。何でもリストで書けばよいわけではありません。リストにしなくても、見出し〜内容、と、1個ずつ分けて書けばすむこともあるので、本当にその内容、リストで書く内容ですか？今使っているタグは、書きたいことの構成と合っていますか？と確認する癖をつけた方がよさそうです。「遊び感覚でできる英語勉強法」の記事では、当初、その1〜その4までをリストで書く→そのあとに詳しい説明をつける、という構成にしていました。ただ、リストを使わずに1個ずつ見出し〜内容、と個別の構造にした方が書きたいことに沿った構造だし、見た目もすっきりしたのでリストは使いませんでした。
この記事を書きながら、長めのブログ記事では、1つの記事の中における目次を表す時にも使えるなーと思いました。積極的に使っていこうと思います。

今回は、HTMLのタグと、その中のリストのタグについてをお送りしました。