CSSでリストを装飾してみる

リストと言うと、例えばリストのマークをアイコンにしたり、例えば横並びにしてメニューに利用したり色々と利用ができます。ulとliだけで一覧表示できる上に、リストの表示方法を変えるだけで色んな表現方法ができて非常に便利です。
そこで、単純なリストなんだけれども、ちょっと表現方法を変えていい感じにやってみたのが以下です。と、言っても前からある方法なんですけれども。

これもいつもどおり埋め込んでみようと思います。

javascriptあるいは、jQueryは使用していません。構造的にはulにbeforeで縦線を加えています。そのため、リストアイテムが増えて下に伸びていけば自動でラインも伸びていきます。
liの中にdivでブロックを作って最初のdivの下にアイコン用のdivを作り●をbeforeで付け加えます。これがいわゆるリストマークになります。

ここからこの●のdivの中に何かしらのアイコンを入れることで色々なマークを出すことができます。

上記はラインの部分のCSSですが、まずwidthで幅を設定して、background-colorで色を設定します。
後は位置の設定になります。topの部分で5pxとしてありますが、例えば0でも良い場合もあるのですが、今回の例でいくとtopを0にすると、●の上に先がはみ出してしまいます。そのため、若干topの位置を下げるために5pxに設定してあります。
ちなみにrgba()の数値は、255が最大(明るい)として、左から赤、緑、青、透明度(1で透過なし)となっています。

これは、●の部分のCSSです。widthとheightは丸の大きさになります。border-radius: 50%を設定することで●が描けます。widthを仮に40pxにすると、横広の楕円になります。
line-height: 20pxを仮に変更すると、●はそのまま描かれますが、divで囲んだ中身の上下位置が変わります。marginの部分は●の位置を変更します。pxでも設定できますが、今回はリストの中身、例で言うとこじはるの言葉が1remと言うサイズで書かれているのでだいたい0.5remぐらいだったらイイ感じになるんじゃないかという適当な設定です。きちんとあわせるのであればピクセルで設定したほうが良いかと思います。

box-shadow: 0 0 0 4px rgba(150, 150, 150, 1)の部分は、4pxの幅で●の外枠を描いています。rgbaは前述したように色と透明度の設定です。透明度を1にすることで透過なしにしてあります。透過すると線が透けて見えるようになります。

さて、これらのリストを今更書いたかというと、いわゆる通常のリスト表示は見にくい場合があります。どこからどこまでがいわゆる箇条書きであるのかをパッと見てすぐにわかるというのが一番良いかなと思うわけです。
リストの部分を何かしらのブロックで囲んで色を変えたり、あるいは色はそのままでもボーダーを入れてわかりやすくすると言うのもあるのですが、今回の方法で行くと、例えばliの中のdivを色々いじることで表現方法も変えることができます。その時は、●の位置やらを色々と設定し直す必要があります。

おまけ

※ 元ネタはこちら

スポンサーリンク

シェアする

フォローする