ブログなどでテキストをリストで表示したいときHTMLのリストタグを使うとリストで表示することが出来ます。
使うタグの種類を変えることでデザインすることも出来るので今回ブログなどでも使えるリストのデザインパターンを紹介したいと思います。
標準のリストタグ
通常リストで表示するときは、はulやolタグの中にliタグ使用し表示します。
ulタグの場合
- バナナ
- リンゴ
ulタグは同じ情報を入れたり箇条書きした情報を入れるのに適しています。
olタグの場合
- 鈴木
- 田中
作業手順や順位など順序があるものを入れるのに適しています。
olタグには[start属性][reversed属性][type属性]というものがあります
- start属性
- 数値を入れることでその数値が開始番号になります。
- reversed属性
- reversedを追加することで開始番号の数値が大きい順からになります。
- type属性
- 1、A、a、I を入れることで数値以外のもでリストを表示できます。
まとめ
HTMLだけではなくCSSを使えばさらにデザインの幅を広げることができます。
私のブログのテーマとCSSの相性が悪いのか追加するとデザインが崩れるケースがあるので今後ブログのテーマを変え次第いろんなCSSを紹介したいと思います。
