説明のタグ記事一覧

ブログの記事を書いていると、文字を横にズラズラ並べるより、縦に並べた方がスッキリして見やすくなることがあります。


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

出典:http://www.yahoo.co.jp/


これを横に並べてみると、

報道規制発言 幕引き狙う自民、ギリシャ議会 国民投票を承認、台湾爆発470人負傷 邦人2人も、紫式部像 パンフと実物大違い

見づらいしわかりづらいですよね。


ということで、ブログ記事の見やすさ・わかりやすさを追求してみたいと思います。


ＨＴＭＬタグで、箇条書きにする方法をまとめました。

ＨＴＭＬタグの箇条書き一覧

1. 箇条書き（番号なし）


2. 箇条書き（番号なし＋記号）


3. 箇条書き（番号あり）

箇条書き（番号なし）

表示結果

• 項目１


• 項目２


• 項目３

箇条書き（番号なし）にするには、ulタグを使います。
ulは、Ｕｎｏｒｄｅｒｅｄ　List（アンオーダード　リスト）の略です。

番号の付かないリストという意味です。

<ul>～</ul>タグの中に、項目を記入する<li>～</li>タグを入れていきます。

上の例では、項目１～項目３になっていますが、それ以上の項目になるときは<li>～</li>タグを増やしていけばOKです。

liは、List　Item（リスト　アイテム）の略です。

箇条書き（番号なし＋記号）

記号の種類一覧

記号の種類	記号のスタイル
disc	黒丸
circle	白丸
square	黒四角
none	記号なし

記号のスタイルを黒丸にして箇条書きにしてみます。

表示結果

• 項目１


• 項目２


• 項目３

黒丸の箇条書きが完成です。

この黒丸は、１の箇条書き（番号なし）のときと同じ黒丸です。

ということは、黒丸の箇条書きにするときは、<ul style="list-style-type:disc">と長々とＨＴＭＬタグを入力しないで<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">ではなくて、もっと簡単なＨＴＭＬタグがあります。

<ol>タグです。

olは、Oｒｄｅｒｅｄ　List（オーダード　リスト）の略です。


<ul>～</ul>ではなくて<ol>～</ol>を使います。

箇条書きを数字で表示するときは、<ol>タグを使います。

表示結果

1. 項目１


2. 項目２


3. 項目３

このように、ＨＴＭＬタグを使っての箇条書きは、記号・数字などいろいろな表示方法があります。

はじめにもお話ししましたが、記事の箇条書きには、見やすく・わかりやすくするという効果があります。

これは、読んでくれる方のことを考えてのことです。

さらに、箇条書きにするメリットがあります。

それは、検索エンジンに対しても効果があるということです。


箇条書きのＨＴＭＬタグは、リスト構造になっているので、検索エンジンが箇条書きのＨＴＭＬタグを見つけて、「おっ、箇条書きがあるな、何か大切なキーワードが書かれているんだな」と認識してくれるのです。




伝えたいことなど要点を書くときは、箇条書きにした方が良いということですね。

そうすることで、検索エンジンも「正しいＨＴＭＬ構文を使っているな」と評価してくれます。
ちょっとした、ＳＥＯ対策にもなるということです。


だからって、必要以上に箇条書きのＨＴＭＬタグを使わないようにしましょう。



最後まで読んでいただき、ありがとうございます。