リストの使い方

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)のChapter6のSection2と3のまとめ

• ul：順序なしリスト
• ol：順序ありリスト

リストにはデフォルトでCSSが設定されている。(デフォルトCSS)

• list-style-typeで・や番号がつく
• marginとpaddingで・や番号を表示するための空白

レイアウトを作成するときにはいらないため、CSSでなくさないといけない

主な使い方

同じような種類の情報をまとめるときに使われる。

1. 普通のリスト
2. ナビゲーション
3. 最近の記事の表示
4. パンくずリスト

1.普通のリスト

通常の機能としてリストとして使う

2.ナビゲーション

See the Pen BrpMaY by tamago (@tamago324) on CodePen.

3.最近の記事の表示(画像とテキストとリンク)

これも同じような情報のまとまりのため、リストを使って実装する

ulとliを使う

4.パンくずリスト

パンくずリストもリストを使って実装できる

olとliを使う

この記事に書いた

参考文献

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)