list装飾
css3でlistを装飾するサンプル
サンプル1
1. 円1
- a
- abbr
- address
- area
- article
- aside
- audio
- b
- base
- bdi
- bdo
- blockquote
2. 円2
- body
- br
- button
- canvas
- caption
- cite
- code
- colgroup
- col
- data
- datalist
- dd
3. 四角1
- del
- dfn
- div
- dl
- dt
- embed
- em
- fieldset
- figcaption
- figure
- footer
- form
サンプル2
4. 四角2
- h1
- h2
- h3
- h4
- h5
- h6
- header
- head
- hr
- html
- i
- iframe
5. 四角3
- h1
- h2
- h3
- h4
- h5
- h6
- header
- head
- hr
- html
- i
- iframe
6. 角丸四角
- img
- input
- ins
- kbd
- keygen
- label
- legend
- li
- link
- main
- MathML
- map
サンプル3
7. 角丸四角2
- mark
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
8. 矢印
- pre
- progress
- q
- rb
- rp
- rt
- rtc
- ruby
- s
- samp
- script
- section
9. フキダシ
- select
- small
- source
- span
- strong
- style
- sub
- sup
- svg
- table
- tbody
- td
サンプル4
10. 矢印画像
- mark
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
11. 矢印画像2
- pre
- progress
- q
- rb
- rp
- rt
- rtc
- ruby
- s
- samp
- script
- section
12. 装飾円
- select
- small
- source
- span
- strong
- style
- sub
- sup
- svg
- table
- tbody
- td
サンプル5
13. 丸マーク
- abc
- def
- ghi
- jkl
- mno
- pqr
- stu
- vwx
- yz
- ABC
- DEF
- GHI
14. 四角MK
- JKL
- MNO
- PQR
- STU
- VWX
- YZ
- abc
- def
- ghi
- jkl
- mno
- pqr
15. 丸増殖
- stu
- vwx
- yz
- ABC
- DEF
- GHI
- JKL
- MNO
- PQR
- STU
- VWX
- YZ
サンプル6
16. 四角増殖
- 一
- 二
- 三
- 四
- 五
- 六
- 七
- 八
- 九
- 十
- 十一
- 十二
17. 丸矢印
- ich
- ni
- san
- si
- go
- roku
- nana
- hachi
- kyu
- zyu
- zyuici
- zyuni
18. 四角矢印
- 壱
- 弐
- 参
- 四
- 伍
- 録
- 七
- 鉢
- 九
- 拾
- 拾壱
- 拾弐
list装飾の考察
WEBサイトで応用的にメニューに使われる以外で、普通にlistなんて使うのかどうか、よくわからなくなってきた今日この頃。
主なcssやテクニック
- data-…
- 独自データ属性(又は、カスタムデータ属性)。すべての HTML 要素に自分で設定した属性名と値を指定することができる仕様。
- content:attr(属性名)
- 属性名の値を表示
ページトップへ