大阪市中央区 システムソフトウェア開発会社

営業時間:平日09:15〜18:15
MENU

リスト:猫でもできるWebライティング18

株式会社クローバーフィールドの経営理念
著者:YOSHIDA Takayuki
公開日:2018/02/27
最終更新日:2018/02/27
カテゴリー:技術情報

Webサイトの運営の体制によっては、ブログや新着情報などをWebのプロではない人が書くことがあります。HTMLを学んだことのある人と学んだことがない人の違いは、コンテンツ内で「リスト」を使う意識があるかどうかです。現在のCMSはよくできているので、自由に書いてもおおむね問題のないようにみえてしまうのですが、リスト要素をきちんと使うとより伝わりやすい文章を書くことができます。

リストは同格の情報を並べる際に用います。大抵の文章はリストを使って書くこととができ、リストの方が伝わりやすく、わかりやすい文章になることが多いです。いわゆる「箇条書き」を想像すると腑に落ちやすいかもしれません。

HTMLでは大きく分けて3つのリストが準備されています。番号なしリスト(順序無しリスト)、番号ありリスト(順序付きリスト)、説明リスト(定義リスト)の3つです。それぞれについて、どのような使い方をすべきかを考えてみましょう。

まずは「番号なしリスト(ul)」です。番号なしリストは、その名前の通り番号をつけないリストです。英語では「Unordered List」なので、括弧書きで示した「順序無しリスト」や「順不同リスト」などの呼称のほうが適当かもしれません。リストは同格の情報を並べると書きましたが、同格なうえに情報を提示する順番に意味がないものに適用します。たとえば、買い物リストやToDoリストなどが該当します。

次に「番号ありリスト(ol)」です。こちらは英語では「Ordered List」なので、「順序付きリスト」と覚えたほうが良さそうです。同格の情報で、情報を提示する順番に意味があるものに適用できます。たとえばレシピのような手順書や、ランキングなどに使うことができます。

3つ目は「説明リスト(dl)」です。HTML4以前は「定義リスト(Definition List)」とされていましたが、HTML5以降は「説明リスト(Description List)」とされたようです。これまで紹介した2つとは異なり、情報を組みあわせてセットとして提示することができます。一番わかりやすい例が「辞書」です。ある単語とその説明との組み合わせをひとつのセットとして扱うことができます。

このように、リストを使うとで情報の構造や文脈をもたせることができます。段落中で中黒などの記号を使って視覚的に箇条書きをしているだけでは、ユーザーには伝わっても検索エンジンには伝わっていない可能性が高いです。リストが必要な場面では、きちんとリスト用のマークアップをするべきでしょう。

    上に戻る