箇条書きのが見やすいよな～と思うのがこれですね。
お馴染みのYahooのトップ画面です。
↓
出典:http://www.yahoo.co.jp/
これを横に並べてみると、
報道規制発言 幕引き狙う自民、ギリシャ議会 国民投票を承認、台湾爆発470人負傷 邦人2人も、紫式部像 パンフと実物大違い
見づらいしわかりづらいですよね。
ということで、ブログ記事の見やすさ・わかりやすさを追求してみたいと思います。
ＨＴＭＬタグで、箇条書きにする方法をまとめました。
ＨＴＭＬタグの箇条書き一覧
箇条書き（番号なし）
<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
表示結果
- 項目１
- 項目２
- 項目３
箇条書き（番号なし）にするには、ulタグを使います。
ulは、Ｕｎｏｒｄｅｒｅｄ List（アンオーダード リスト）の略です。
番号の付かないリストという意味です。
<ul>～</ul>タグの中に、項目を記入する<li>～</li>タグを入れていきます。
上の例では、項目１～項目３になっていますが、それ以上の項目になるときは<li>～</li>タグを増やしていけばOKです。
liは、List Item（リスト アイテム）の略です。
箇条書き（番号なし＋記号）
<ul style="list-style-type:記号の種類">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
記号の種類一覧
| 記号の種類 | 記号のスタイル |
|---|---|
| disc | 黒丸 |
| circle | 白丸 |
| square | 黒四角 |
| none | 記号なし |
記号のスタイルを黒丸にして箇条書きにしてみます。
<ul style="list-style-type:disc">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
表示結果
- 項目１
- 項目２
- 項目３
黒丸の箇条書きが完成です。
この黒丸は、１の箇条書き（番号なし）のときと同じ黒丸です。
ということは、黒丸の箇条書きにするときは、<ul style="list-style-type:disc">と長々とＨＴＭＬタグを入力しないで<ul>だけで良いということですね。
別の箇条書き記号でやってみます。
白丸の場合
<ul style="list-style-type:circle">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
表示結果
- 項目１
- 項目２
- 項目３
箇条書きの記号が白丸になりましたね。
箇条書き（番号あり）
<ul style="list-style-type:番号の種類">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
番号の種類一覧
| 番号の種類 | 番号のスタイル |
|---|---|
| decimal | 数字 |
| decunal-leading-zero | 桁を揃えた数字 |
| lower-alpha，lower-latin | 小文字のアルファベット |
| upper-alpha，upper-latin | 大文字のアルファベット |
| cjk-ideographic | 漢数字 |
| hiragana | ひらがな |
| katakana | カタカナ |
| hiragana-iroha | いろは順（ひらがな表示） |
| katanaka-iroha | いろは順（カタカナ表示） |
番号のスタイルを数字にして箇条書きにしてみます。
<ul style="list-style-type:decimal">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
表示結果
- 項目１
- 項目２
- 項目３
番号のスタイルを数字にするときは、<ul style="list-style-type:decimal">ではなくて、もっと簡単なＨＴＭＬタグがあります。
<ol>タグです。
olは、Oｒｄｅｒｅｄ List（オーダード リスト）の略です。
<ul>～</ul>ではなくて<ol>～</ol>を使います。
箇条書きを数字で表示するときは、<ol>タグを使います。
<ol>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ol>
表示結果
- 項目１
- 項目２
- 項目３
このように、ＨＴＭＬタグを使っての箇条書きは、記号・数字などいろいろな表示方法があります。
はじめにもお話ししましたが、記事の箇条書きには、見やすく・わかりやすくするという効果があります。
これは、読んでくれる方のことを考えてのことです。
さらに、箇条書きにするメリットがあります。
それは、検索エンジンに対しても効果があるということです。
箇条書きのＨＴＭＬタグは、リスト構造になっているので、検索エンジンが箇条書きのＨＴＭＬタグを見つけて、「おっ、箇条書きがあるな、何か大切なキーワードが書かれているんだな」と認識してくれるのです。
伝えたいことなど要点を書くときは、箇条書きにした方が良いということですね。
そうすることで、検索エンジンも「正しいＨＴＭＬ構文を使っているな」と評価してくれます。
ちょっとした、ＳＥＯ対策にもなるということです。
だからって、必要以上に箇条書きのＨＴＭＬタグを使わないようにしましょう。
ＨＴＭＬを使って箇条書きまとめ
- 記号を使う場合は、<ul style="list-style-type:記号の種類">を使う
- 番号を使う場合は、<ul style="list-style-type:番号の種類">を使う
- ※黒丸のときは<ul>～</ul>でOK
- ※数字のときは<ol>～</ol>を使う
最後まで読んでいただき、ありがとうございます。
カテゴリ
