2022.07.27
【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~
その他
制作
2022.01.13
サイト内のちょっとしたリストのシンプルな見せ方のアイデアをまとめてみました!
コピペで使えるコードも掲載していますので、ぜひご活用ください!
目次
ul
タグのスタイルをリセットしなければデフォルトで丸がついたリストになりますが、before
を使うことで丸の大きさや色を自由にカスタマイズすることができます。
見え方サンプル
こちらは先程のリストの丸を四角に変えてみました。transform
を使うことでダイヤ型にすることもできます。
見え方サンプル
線だけを付けたリストにするとかなりシンプルな印象になります。
サイトマップやフッターなど、掲載するリンクの数が多い場合に良いかと思います!
見え方サンプル
アイコンを付けることで遊び心を出すことができます。
google fontのアイコンを使うことで自分でアイコンを作らなくても簡単に作ることができます。
見え方サンプル
順番が関係するリストの場合などはol
タグでマークアップし、番号を振ることもあると思います。
デフォルトのスタイルでも番号を付けることはできますが、デフォルトの設定をnone
にし、before
で置き換えることで色やフォントサイズを簡単にカスタマイズできるようになります。
見え方サンプル
先程のbefore
で置き換える方法を応用するとよりアレンジを加えたデザインにすることができます。span
で「POINT」と背景部分を作成し、before
に数字を表示させるように指定、両方の位置をposition
で調整して文字の前に配置するようにしています。
見え方サンプル