リストに1pxのラインを追加するだけで、印象がぐっとよくなる

個人的にもよく使ってますが、簡単なのでぜひご参考に。

リストに1pxのラインを加える

下にラインを引いたリストがあります。ここから色々付け加えていきたいと思います。

HTMLとCSSはこんな感じです。

  

    
サンプルリスト1
    
サンプルリスト2
    
サンプルリスト3
    
サンプルリスト4
    
サンプルリスト5
    
サンプルリスト6
  

#sample {
  width:500px;
  font-size: 16px;
  color:#333333;
  background:#d6e5f5;
  padding:20px;
}
#sample li {
  list-style-type : none;
  padding:5px 10px;
  border-bottom:1px solid #84b2e0;
}

1. 下に薄いラインを追加してみる

このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。

#sample {
  width:500px;
  font-size: 16px;
  color:#333333;
  background:#d6e5f5;
  padding:20px;
}
#sample li {
  list-style-type : none;
  padding:5px 10px;
  border-top:1px solid #f1f6fc;
  border-bottom:1px solid #84b2e0;
}
#sample li:first-child{
  border-top:0px;
}
#sample li:last-child{
  border-bottom:0px;
}

上のラインを背景より白い色、下のラインを背景より濃い色にして、最初のリストの上のラインと最後のリストの下のラインをなくしています。

1本ラインを足しているのに、なぜか細く見えてシャープな印象がします。

上下にも二重のラインを追加してみる

最初のリストの上と、最後のリストの下にも二重のラインを追加します。

ul要素の上下にラインを追加することで二重にしています。こちらはCSS3セレクタも使わないので無難です。

#sample {
  width:500px;
  font-size: 16px;
  color:#333333;
  background:#d6e5f5;
  margin:0 auto;
  padding:20px;
}
#sample ul {
  padding-left:0;
  margin-left:40px;
  border-top:1px solid #84b2e0;
  border-bottom:1px solid #f1f6fc;
}
#sample li {
  list-style-type : none;
  padding:5px 10px;
  color:#333333;
  border-top:1px solid #f1f6fc;
  border-bottom:1px solid #84b2e0;
}

3. 背景を画像にしてみる

ここからはタイトルとは関係ないのですが、せっかくですのでこのサンプルを使って色々してみます。

背景をテクスチャ系の画像にしてみるとあか抜けた感じがします。

#sample2 {
  width:500px;
  font-size: 16px;
  color:#333333;
  background: url(画像のURL);
  padding:20px;
}
#sample li {
  list-style-type : none;
  padding:5px 10px;
  border-top:1px solid #ffffff;
  border-bottom:1px solid #999999;
}
#sample li:first-child{
  border-top:0px;
}
#sample li:last-child{
  border-bottom:0px;
}

テクスチャ画像については、個人的に「Subtle Patterns | Free textures for your next web project」がおすすめです。

4. リンクにしてみる

今度はリンクにしてみます。最初からリンクのサンプルでよかったですね。。

こちらの方が実用的ですね。

  

    
サンプルリスト1
    
サンプルリスト2
    
サンプルリスト3
    
サンプルリスト4
    
サンプルリスト5
    
サンプルリスト6
  

#sample3 {
  width:500px;
  font-size: 16px;
  color:#333333;
  background: URL(画像のURL);
  padding:20px;
}
#sample3 li {
  list-style-type : none;
  color:#333333;
  border-top:1px solid #fff;
  border-bottom:1px solid #999;
}
#sample3 li:first-child{
  border-top:0px;
}
#sample3 li:last-child{
  border-bottom:0px;
}
#sample3 li a{
  text-decoration:none;
  color:#0e2236;
  display:block;
  padding:5px 10px;
}
#sample3 li a:hover{
  color:#ff0099;
  background:rgba(255,255,255,0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99ffffff', endColorstr='#99ffffff');
}

マウスを乗せたときは、RGBAカラーを使って背景画像が薄くなる感じにしています。

最後の行で一応IE8以下にも対応させています。いまいちきれいに見えませんが。。フォントカラーをピンクっぽくしているので、別になくてもいいと思います。

5. オンマウスでスムーズに動かしてみる

今度はマウスを乗せたときに、ちょっとだけスムーズに動きます。

#sample4 {
  width:500px;
  font-size: 16px;
  color:#333333;
  background: URL(../photo/first_aid_kit.png);
  padding:20px;
}
#sample4 li {
  list-style-type : none;
  color:#333333;
  border-top:1px solid #fff;
  border-bottom:1px solid #999;
}
#sample4 li:first-child{
  border-top:0px;
}
#sample4 li:last-child{
  border-bottom:0px;
}
#sample4 li a{
  text-decoration:none;
  color:#0e2236;
  display:block;
  padding:5px 10px;
  -moz-transition-property: all;
  -moz-transition-duration: 0.2s;
  -moz-transition-timing-function: linear;
  -webkit-transition: all 0.2s linear 0;
}
#sample4 li a:hover{
  color:#ff0099;
  padding:5px 8px 5px 12px;
  background:rgba(255,255,255,0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99ffffff', endColorstr='#99ffffff');
}

transitionについてはこんな感じです。

ということで、色々サンプルを紹介しました。1つでも参考になるものがあれば嬉しいです。

ラインの二重重ねはメニューやヘッダーの境目などリスト以外の様々なところでも使えますので、何か物足りないなと思ったときは、これを参考に試してみてはどうでしょうか。