ブックマークアイコンの並べ方
2009年04月30日
さっき『ブックマークアイコン作ってみた』を書いたけど、CSSコードを書いてなくて、あとから書こうと思ったけど、まぁ難しいもんでもないのでさっさと書くことに。
ならべかた色々なんだけど、僕がよくやるのは、リスト表示してそれを横並びにする方法。
float使うのとdisplay使うのあるけど、無難に横並びならdisplayかな。と思うので、そっち。
float知りたい方は、調べればすぐ出ると思います。
display: inline;を指定すれば簡単横並び。
なので、例えば列車アイコンの場合は
<ul class="sbmIcon">
<li><img src="/train/sbm_top.gif" alt="ソーシャルブックマーク" /></li>
<li><img src="/train/sbm_h.gif" alt="はてなブックマーク" /></li>
<li><img src="/train/sbm_l.gif" alt="livedoorクリップ" /></li>
<li><img src="/train/sbm_b.gif" alt="Buzzurl" /></li>
<li><img src="/train/sbm_d.gif" alt="delicious" /></li>
<li><img src="/train/sbm_y.gif" alt="Yahooブックマーク" /></li>
<li><img src="/train/sbm_t.gif" alt="twitter" /></li>
<li><img src="/train/sbm_y2.gif" alt="Yahooブックマークその2" /></li>
</ul>
<li><img src="/train/sbm_top.gif" alt="ソーシャルブックマーク" /></li>
<li><img src="/train/sbm_h.gif" alt="はてなブックマーク" /></li>
<li><img src="/train/sbm_l.gif" alt="livedoorクリップ" /></li>
<li><img src="/train/sbm_b.gif" alt="Buzzurl" /></li>
<li><img src="/train/sbm_d.gif" alt="delicious" /></li>
<li><img src="/train/sbm_y.gif" alt="Yahooブックマーク" /></li>
<li><img src="/train/sbm_t.gif" alt="twitter" /></li>
<li><img src="/train/sbm_y2.gif" alt="Yahooブックマークその2" /></li>
</ul>
こんなコード書いて、ulに適当なクラス名つけて
.sbmIcon li {
display: inline;
}
display: inline;
}
ってやれば出来上がり。
ちゃんと横並びになるはず。
できあがりはこっち。
『ソーシャルブックマークアイコン：列車風』
※追記
スタイルシート書いてみたけど、多分足りてない気がした。
.sbmIcon li {
margin: 0;
padding: 0;
display: inline;
}
margin: 0;
padding: 0;
display: inline;
}
って、marginとpaddingも念のため書いておくといいかも。
スポンサードリンク
タグ:
CSS , アイコン , ソーシャルブックマークトラックバック
このエントリーのトラックバックURL:http://www.sriproot.net/mt/mt/mt-tb.cgi/267
