google画像検索のように画像を表示させたい

質問

http://oshiete1.goo.ne.jp/qa4869855.html
で質問した者です。
「googleのように 画像」で検索したところ
http://okwave.jp/qa4567914.html　このページがHITしました。
そこでNo3の方のソースを元に画像を表示させてみました。

---ここから---
<style type="text/css">
<!--
p{ text-indent: 1em;}
body>h1,body>h2{ text-align:center;}
p.abstract{ margin-left: 20%; margin-right: 20%;}
div.ImageList{ position: relative; margin-left:20%;margin-right:10%;width: auto; border: solid 2px blue;}
div.ImageList ol{ display:block; margin:0px; padding:0px;}
div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;}
div.ImageList>ol>li>ol>li{display:block;font-size:0.8em;text-align:left;padding:0.2em;text-indent:1em;}
div.ImageList hr{ clear:both;visibility:hidden;}
div.ImageList div{ position: absolute; width: 21%; left: -23%;top: 0px;font-size:0.9em}
-->
</style>
---ここまで---

このスタイルシートについてなのですが、
画像のまわりについている黒の薄い線と、大きな青い線を消すことは出来ないでしょうか？
この二つの枠線を消してもっと画像どうしをギュッと詰め込みたいのです。

どの部分を削れば削除することが出来ますか？

回答No.1

neco1979 · ベストアンサー

（1）黒の薄い線を消す所は
div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;}
のborder:solid 1px grayの部分（グレーの線を1pxの太さで）という意味なのでコチラを削除すれば良いかと思います。（画像をリンクする場合はborder: 0px;）

（2）青い線を消す所は
div.ImageList{ position: relative; margin-left:20%;margin-right:10%;width: auto; border: solid 2px blue;}
のborder: solid 2px blue;の部分（青色の線を2pxの太さで）という意味なのでコチラを削除すれば良いかと思います。（画像をリンクする場合はborder: 0px;）

（3）画像どうしをギュッと詰め込みたい
div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;}
の部分で width:160px（横幅を160pxの大きさ）なのでここをお好きな数字に変更したら良いかと思います。

※marginやpaddingも設定されているので、こちらも変更してみたらいかがでしょうか？

タグの詳しい説明は下記を参照して見て下さい↓
http://www.tohoho-web.com/css/index.htm

お礼

詳しい解説ありがとうございます！とてもわかりやすかったです。
おかげですべて解決することが出来ました。

「とほほのスタイルシート入門」も見たいと思います。
どうもありがとうございました。