HTMLのリストタグを使って様々なリストを作成してみる

HTMLのリストタグを使って様々なリストを作成してみる

ブログなどでテキストをリストで表示したいときHTMLのリストタグを使うとリストで表示することが出来ます。
使うタグの種類を変えることでデザインすることも出来るので今回ブログなどでも使えるリストのデザインパターンを紹介したいと思います。

標準のリストタグ

通常リストで表示するときは、はulやolタグの中にliタグ使用し表示します。

ulタグの場合

  • バナナ
  • リンゴ

ulタグは同じ情報を入れたり箇条書きした情報を入れるのに適しています。

olタグの場合

  1. 鈴木
  2. 田中

作業手順や順位など順序があるものを入れるのに適しています。

olタグには[start属性][reversed属性][type属性]というものがあります

start属性
数値を入れることでその数値が開始番号になります。
reversed属性
reversedを追加することで開始番号の数値が大きい順からになります。
type属性
1、A、a、I を入れることで数値以外のもでリストを表示できます。

まとめ

HTMLだけではなくCSSを使えばさらにデザインの幅を広げることができます。
私のブログのテーマとCSSの相性が悪いのか追加するとデザインが崩れるケースがあるので今後ブログのテーマを変え次第いろんなCSSを紹介したいと思います。