2009年03月20日
両端をそろえたリストの表示にチャレンジしました
アフィリエイトサイトで、成分表示などで役に立ちそうなリスト表示方法を試してみました。
リストタグでマークアップして左右に振り分ける?
うまく文字で表現できないのですが、印刷物の目次ページや、加工食品の成分表示などでよく見かける表示をなんとかブログで表示できないかと考えていたところ「WebDesigning」を眺めていたらそれらしい紹介がされていましたので、これを少し変更して紹介します。
まず、XHTMLでは、左右を振り分けるためにstrong,emを使います。
strongは左に表示させ、emは右に寄せて表示したいので、CSSのtext-alignとfloatをうまく指定する必要があります。
「WebDesigning」では、リンク要素を使ってありましたので、<a>をはぶいたCSSを指定して少しだけ変更を加えました。
J.BradfordDillon
「WebDesigning」で紹介されていたサイトです。ページの右上の部分のCSSをピックアップしています。
整形されたリスト表示の例
XHTML
<div class="listbox">
<ul>
<li><strong>熱量</strong><em>66kcal</em></li>
<li><strong>たんぱく質</strong><em>1.4g</em></li>
<li><strong>脂質</strong><em>0.5g</em></li>
<li><strong>糖質</strong><em>12.9g</em></li>
<li><strong>食物繊維</strong><em>2.0g</em></li>
</ul>
</div>
CSS
#main .entry .listbox ul {
list-style: none;
}
#main .entry .listbox li {
display: bloc;
clear: both;
text-align: right;
background: url(dot.gif) repeat-x center;
}
#main .entry .listbox li strong {
float: left;
background: #fff ;
font-weight: normal;
}
#main .entry .listbox li em {
background: #fff ;
font-weight: normal;
}
これは、食品成分表の場合の例ですが、この他にも、ASP別アフィリエイト収入の表など、色んなリストで使えそうです。
ドット画像を作るのは簡単です。画像ソフトで縦1px×横2pxの白黒を書くだけです。
サンプルはこの様になります。
- 熱量66kcal
- たんぱく質1.4g
- 脂質0.5g
- 糖質12.9g
- 食物繊維2.0g
内容に対して横幅が広すぎの感じがしますので、widthを指定するとこうなります。
- 熱量66kcal
- たんぱく質1.4g
- 脂質0.5g
- 糖質12.9g
- 食物繊維2.0g
strongとemの部分は、spanにclassを付与する方法をとってもいいですね。更にCSS装飾を派手に加えてみても面白いデザインになると思います。
by affiliate10 at 05:55
以下の書籍が参考になります
Sponsored links