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

先日書いた「配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう!」が予想外にたくさんのアクセスをいただきました。ありがとうございます。

そのなかで、1pxのラインがあるだけで印象は大きく変わってくる、という記事がありましたので、簡単を出来るリストのサンプルを紹介します。

1pxline000.png

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

今回別サーバーにサンプルを用意してみました。 - サンプル

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

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

1pxline01.png

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

html
  • サンプルリスト1
  • サンプルリスト2
  • サンプルリスト3
  • サンプルリスト4
  • サンプルリスト5
  • サンプルリスト6
CSS
#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本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。

1pxline02.png
CSS
#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本ラインを足しているのに、なぜか細く見えてシャープな印象がします。

last-childはIE8以下では対応していませんが、selectivizrを使えば対応可能です。こちらをご参考に。
IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」

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

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

1pxline04-1.png

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

CSS
#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. 背景を画像にしてみる

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

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

1pxline04.png
CSS
#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. リンクにしてみる

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

1pxline04.png

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

html
CSS
#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以下にも対応させています。いまいちきれいに見えませんが。。フォントカラーをピンクっぽくしているので、別になくてもいいと思います。

RGBAカラーについてはこちらをご参考に。
透明度を表す「opacity」 と 「RGBa」の違いと使い分け

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

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

1pxline04.png
CSS
#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についてはこんな感じです。

1pxline04.png
初めてという方は、こちらが分かりやすいです。
transition-CSS3リファレンス
前の記事ですが勉強にぜひ。
CSS3のtransitionとtext-shadowで作る様々なリンク装飾|Webpark

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
とても魅力的な記事でした!!
また遊びに来ます!!
ありがとうございます。。
【2012/04/25 20:19】 | 履歴書 #- | [edit]
いつもありがとうございます。
またお越しくださいね~
【2012/04/30 20:55】 | 管理人 #E2ywrYdA | [edit]
感謝です!とてもきれいで勉強になりました涙!!!
【2016/02/25 05:28】 | かな #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加