HTML5とCSS3で作成する魅力的なリストデザイン

author photo

Byinfobloger

リストデザイン

以前の記事で定義リストについては記事を書きましたが、今回のテーマはリストデザインについて紹介していきたいと思います。

定義リストとリストって違うの?
そんな疑問を持つ方も多いのではないでしょうか。

実は定義リストとリストは使い方が全く異なります。

定義リストとリストの違いについて
定義リストとは?
今ここで使っているのが定義リストです。
サブタイトルに対して説明を書いていくのが主な使い方になります。
リストとは?
リストとはブレッドとも言われますが箇条書きのことです。
・ 箇条書き1
・ 箇条書き2
このようにリストマークが表示されるものと
1 番号付き箇条書き1
2 番号付き箇条書き2
このようにリストマークではなく数字が表示される2種類のリストが存在します。

定義リストとリストの使い方については別の記事で紹介しますので、今回はリストのデザインにテーマを絞って紹介していきます。

スポンサーリンク

CSSで装飾しないリストの種類

リストにはCSSで装飾しなくても、いくつかの種類があります。

ただし最近はブラウザ毎の表示の差異をなくすためにリセットCSSを使うことが多くなりました。

リストのスタイルは通常は3種類あります。

リストスタイルの種類
  • なにも指定しない場合はこのように表示されます
  • 「ul」に「type="circle"」を指定した場合は○が表示されます
  • 「ul」に「type="square"」を指定した場合は■が表示されます
番号付きリスト
  1. 「ul」を「ol」に変えると番号付きのリストが表示されます
  2. 「ol」にも「type="a"」や「type="A"」などがあります
  3. その他にも「type="i"」や「type="I"」などがあります

リセットCSSを使用している場合は通常の「●」、番号も「1~」しか表示されません。

もちろん通常のリストスタイルで問題はないのですが、これだけでは味気ないのでCSS3でリストを装飾してみましょう。

CSS3で装飾したリストデザイン

CSS3で装飾することで様々なデザインのリストを作成することができます。
左に青系色ボーダー付箋風のリスト
  • 基本の「ul」に「class="Tag-blue"」クラス指定
  • 背景色は派手にならないように薄いグレー
HTML
<ul class="Tag-blue">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ul>
左に緑系色ボーダー付箋風のリスト
  • 基本の「ul」に「class="Tag-orange"」クラス指定
  • 背景色は派手にならないように薄いグレー
HTML
<ul class="Tag-orange">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ul>
左にオレンジ色ボーダー付箋風のリスト
  • 基本の「ul」に「class="Tag-green"」クラス指定
  • 背景色は派手にならないように薄いグレー
HTML
<ul class="Tag-green">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ul>

下に点線付きノート風の装飾リスト

見た目はシンプルですが意外に見やすかったりします。

ウェブアイコンを使用して何種類か作ってみました。

ノート風リスト其の壱
  • リストの下に点線、ノート風に見えますか?
  • リストマークはウェブアイコンで作成
HTML
<ul class="BottomLine1">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ul>
ノート風リスト其ノ弐
  • リストマークをスクウェアチェックマークに変えてみました
  • リストマークの色も変えてみました
HTML
<ul class="BottomLine2">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ul>
ノート風リスト其の三
  • リストマークをチェックマークに変えてみました
  • リストマークの色も変えてみました
HTML
<ul class="BottomLine3">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ul>

ナンバー付き装飾リスト厳選4種類

リストのナンバーを●で囲んでみました
  1. 丸で囲むのは簡単そうに見えて意外に難しい
  2. シンプルに丸で囲んだだけのナンバーリストです
HTML
<ol class="Circle1">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ol>
●で囲んだナンバーをノート風にアレンジ
  1. 丸で囲んだナンバーリストをノート風に
  2. 下線を付けたほうが見やすい印象ですね
HTML
<ol class="Circle2">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ol>
ナンバーリストを四角で囲んでみました
  1. 丸と四角、好みが分かれる所ですね
  2. どちらかに統一して使ったほうが良いと思います
HTML
<ol class="Square1">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ol>
四角で囲んだナンバーリストをノート風にアレンジ
  1. またまたノート風にアレンジしてみました
  2. 個人的には丸も四角もノート風の方が見やすいですね
HTML
<ol class="Square2">
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
 <li><!-- ここに本文 --></li>
</ol>

まとめ

無理をして装飾リストを使う必要はありません。
あくまでも記事のアクセントだと思ってください。

今回紹介した装飾リストは全てテンプレートのCSSに組み込まれています。

HTMLをコピペして使うだけで同じ様に表示されるようになっています。

何度も言いますが通常のリストでも充分に読者が読みやすい記事を作成することはできるでしょう。

お好みによって使い分けてください。
さようなら!

関連記事
Share

Comments 0

Leave a reply