箇条書きのが見やすいよな~と思うのがこれですね。
お馴染みのYahooのトップ画面です。
↓

出典:http://www.yahoo.co.jp/
これを横に並べてみると、
報道規制発言 幕引き狙う自民、ギリシャ議会 国民投票を承認、台湾爆発470人負傷 邦人2人も、紫式部像 パンフと実物大違い
見づらいしわかりづらいですよね。
ということで、ブログ記事の見やすさ・わかりやすさを追求してみたいと思います。
HTMLタグで、箇条書きにする方法をまとめました。
HTMLタグの箇条書き一覧
箇条書き(番号なし)
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
表示結果
- 項目1
- 項目2
- 項目3
箇条書き(番号なし)にするには、ulタグを使います。
ulは、Unordered List(アンオーダード リスト)の略です。
番号の付かないリストという意味です。
<ul>~</ul>タグの中に、項目を記入する<li>~</li>タグを入れていきます。
上の例では、項目1~項目3になっていますが、それ以上の項目になるときは<li>~</li>タグを増やしていけばOKです。
liは、List Item(リスト アイテム)の略です。
箇条書き(番号なし+記号)
<ul style="list-style-type:記号の種類">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
記号の種類一覧
記号の種類 | 記号のスタイル |
---|---|
disc | 黒丸 |
circle | 白丸 |
square | 黒四角 |
none | 記号なし |
記号のスタイルを黒丸にして箇条書きにしてみます。
<ul style="list-style-type:disc">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
表示結果
- 項目1
- 項目2
- 項目3
黒丸の箇条書きが完成です。
この黒丸は、1の箇条書き(番号なし)のときと同じ黒丸です。
ということは、黒丸の箇条書きにするときは、<ul style="list-style-type:disc">と長々とHTMLタグを入力しないで<ul>だけで良いということですね。
別の箇条書き記号でやってみます。
白丸の場合
<ul style="list-style-type:circle">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
表示結果
- 項目1
- 項目2
- 項目3
箇条書きの記号が白丸になりましたね。
箇条書き(番号あり)
<ul style="list-style-type:番号の種類">
<li>項目1</li>
<li>項目2</li>
<li>項目3</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>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
表示結果
- 項目1
- 項目2
- 項目3
番号のスタイルを数字にするときは、<ul style="list-style-type:decimal">ではなくて、もっと簡単なHTMLタグがあります。
<ol>タグです。
olは、Ordered List(オーダード リスト)の略です。
<ul>~</ul>ではなくて<ol>~</ol>を使います。
箇条書きを数字で表示するときは、<ol>タグを使います。
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
表示結果
- 項目1
- 項目2
- 項目3
このように、HTMLタグを使っての箇条書きは、記号・数字などいろいろな表示方法があります。
はじめにもお話ししましたが、記事の箇条書きには、見やすく・わかりやすくするという効果があります。
これは、読んでくれる方のことを考えてのことです。
さらに、箇条書きにするメリットがあります。
それは、検索エンジンに対しても効果があるということです。
箇条書きのHTMLタグは、リスト構造になっているので、検索エンジンが箇条書きのHTMLタグを見つけて、「おっ、箇条書きがあるな、何か大切なキーワードが書かれているんだな」と認識してくれるのです。
伝えたいことなど要点を書くときは、箇条書きにした方が良いということですね。
そうすることで、検索エンジンも「正しいHTML構文を使っているな」と評価してくれます。
ちょっとした、SEO対策にもなるということです。
だからって、必要以上に箇条書きのHTMLタグを使わないようにしましょう。
- 記号を使う場合は、<ul style="list-style-type:記号の種類">を使う
- 番号を使う場合は、<ul style="list-style-type:番号の種類">を使う
- ※黒丸のときは<ul>~</ul>でOK
- ※数字のときは<ol>~</ol>を使う
最後まで読んでいただき、ありがとうございます。
