リストの使い方
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)のChapter6のSection2と3のまとめ
- ul:順序なしリスト
- ol:順序ありリスト
リストにはデフォルトでCSSが設定されている。(デフォルトCSS)
list-style-type
で・
や番号がつくmargin
とpadding
で・
や番号を表示するための空白
レイアウトを作成するときにはいらないため、CSSでなくさないといけない
主な使い方
同じような種類の情報をまとめるときに使われる。
- 普通のリスト
- ナビゲーション
- 最近の記事の表示
- パンくずリスト
1.普通のリスト
通常の機能としてリストとして使う
2.ナビゲーション
See the Pen BrpMaY by tamago (@tamago324) on CodePen.
3.最近の記事の表示(画像とテキストとリンク)
これも同じような情報のまとまりのため、リストを使って実装する
ul
とli
を使う
4.パンくずリスト
パンくずリストもリストを使って実装できる
ol
とli
を使う
この記事に書いた
参考文献
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2016/10/27
- メディア: 単行本
- この商品を含むブログ (1件) を見る