記事に美しい個性を持たせる簡易小技 "リスト"のカスタマイズサンプル

ブログカスタマイズなどweb系知識メモ、Illustratorで作った無料素材を公開しているブログ。

(newスーパーAIRRATブログーズは、【SAB-webカスタマイズ】に名前が変わりました)

記事に美しい個性を持たせる簡易小技 "リスト"のカスタマイズサンプル

カテゴリ : リスト
2008-09-17(Wed)

前回、リストの基本的な設定方法をメモしました。

「次回は表示位置について」と言っておりましたが、
リストのカスタマイズの具体例を先にメモしておこうと思います。

記事編集部(HTML部)に

と記述した際、

↑こんな感じで表示されるか、
●すら表示されないかだと思うのですが、

CSS部でスタイルを変更すると、こんな感じになります、
ということをザッと書いていきたいと思います。

PR by Google

＜li＞に下線を使った装飾テクニック

リストのそれぞれの文の下に、アンダーラインを引いて、
線で区切られた、ノートの罫線のような感じになります。

■ 余白をmarginで取った場合(破線の真下に余白が出来る)

■ 余白をpaddingで取った場合(文と破線の間に余白が出来る)

背景色を使ったリストのデザイン

リストに背景色を設定し、discのマーカーを付加したデザイン。
border-bottomで、白のラインを入れ、
リスト１つ１つを区切ってみました。

■ マーカーをinsideに設定した場合

■ マーカーをoutsideに設定した場合

背景色を使ったリストのデザイン②

リスト全体である ul に、
記事の表示部との余白であるmarginと、
中に入る li との余白となるpaddingに灰色を付けます。

li を、赤のborderで囲い、
背景色は白。リストとリストの間隔をmarginで取ります。
li のpaddingは、borderと文の間隔になります。

なんだか、tableにも似ています。

後から、やっぱりデザインを変更したいなーというときは、
CSS部でデザインを変更してしまえばOKです。CSSって便利です。

また、リストを使うことによって、
綺麗に整列した文字列のレイアウトを実現することもできますし、
リストを使って、ちょっとしたナビゲーションボタンも作れそうですね。
(マウスオーバーで背景色を変えたりして。)