価格表CSS

飲食店などのwebページで価格表を表示するときのCSS

http://qitailang.small.jp/webtech/price_line/sample.html

<dl class="price">
  <dt>フィレステーキ</dt><dd>&yen;2,000</dd>
  <dt class="description">A5ランクの神戸牛を使っています</dt>
  <dt>フォアグラのソテー</dt><dd>&yen;2,000</dd>
  <dt>白身魚のムニエル</dt><dd>&yen;2,000</dd>
  <dt>伊勢エビのソテー甲殻類のソース</dt><dd>&yen;2,000</dd>
<dl>

dl.price {
  overflow: hidden;
  list-style: none;
  width:350px;
}

dl.price dt {
  clear:both;
  float: left;
  width: 100%;
  padding-right: 6em;
  background: url(dot.gif) repeat-x left center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

dl.price dt span {
  background-color: #FAF6DB;
}

dl.price dt.description {
  font-size: 80%;
  padding-right: 0;
  background: none;
}

dl.price dd {
  width: 6em;
  margin-left: -6em;
  float: right;
  text-align: right;
}

dl.price dd span {
  background-color: #FAF6DB;
}    

dot.gif 2px X 1px

dt,ddのテキストを<span>で括るのをjQueryで自動化した。

<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
  $("dl.price dt,dl.price dd").wrapInner("<span></span>");
});
</script>