メニュー表のような間をナカグロで埋めるリストを書きたい

前提・実現したいこと

オレンジジュース・・・・・・350円
レモンスカッシュ・・・・・・450円
トマトジュース・・・・・・・300円
欧州カレーセット・・・・・1,000円

レスポンシブでこのような表を作りたいです。

条件

間のナカグロ（・）は自動で埋める（レスポンシブのためナカグロの数は可変する）
外枠は100％にし、商品名は左揃え、価格は右揃えにする

該当のソースコード

html
1<dl>
2<dt>オレンジジュース</dt><dd>350円</dd>
3<dt>レモンスカッシュ</dt><dd>450円</dd>
4<dt>トマトジュース</dt><dd>300円</dd>
5<dt>欧州カレーセット</dt><dd>1,000円</dd>
6</dl>
7
8or
9
10<ul>
11<li>オレンジジュース<span>350円</span></li>
12<li>レモンスカッシュ<span>450円</span></li>
13<li>トマトジュース<span>300円</span></li>
14<li>欧州カレーセット<span>1,000円</span></li>
15</ul>
16

試したこと

ググったんですが、キーワードが分からず見つけることができませんでした。。。
flexboxと:afterなどを使ってやるのかと思いますが。。。

5分考えても分からなかったので、何卒よろしくお願いいたします。

行動規範の内容に同意します

回答2件

質問者さんが実現したい動作は、flexboxを使用することで以下のように行うことが出来ると思います。今回は点線にborderプロパティを使っていますが、もし点線のスタイルを細かく調整したい場合はradial-gradientを使用すると良いと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .container {
13            padding: 50px;
14        }
15
16        .ingredients {
17            display: flex;
18            align-items: center;
19        }
20
21        .ingredients::after {
22            content: '';
23            border-top: 5px dotted;
24            flex: 1 1 auto;
25            order: 1;
26        }
27
28        .ingredientPrice {
29            order: 2;
30        }
31    </style>
32</head>
33<body>
34<div class="container">
35    <h2>ul要素で行う場合</h2>
36    <ul class="materialBox">
37        <li class="ingredients">
38            <span class="ingredientName">オレンジジュース</span>
39            <span class="ingredientPrice">350円</span>
40        </li>
41        <li class="ingredients">
42            <span class="ingredientName">レモンスカッシュ</span>
43            <span class="ingredientPrice">450円</span>
44        </li>
45    </ul>
46    <h2>dl要素で行う場合</h2>
47    <dl class="materialBox">
48        <div class="ingredients">
49            <dt class="ingredientName">トマトジュース</dt>
50            <dd class="ingredientPrice">300円</dd>
51        </div>
52        <div class="ingredients">
53            <dt class="ingredientName">欧州カレーセット</dt>
54            <dd class="ingredientPrice">1,000円</dd>
55        </div>
56    </dl>
57</div>
58</body>
59</html>

radial-gradientを使う場合、以下のように行うことが出来ると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .container {
13            padding: 50px;
14        }
15
16        .ingredients {
17            display: flex;
18            align-items: center;
19        }
20
21        .ingredients::after {
22            height: 15px;
23            content: '';
24            background: radial-gradient(#000 10%, transparent 0) center/ 15px 15px;
25            flex: 1 1 auto;
26            order: 1;
27        }
28
29        .ingredientPrice {
30            order: 2;
31        }
32    </style>
33</head>
34<body>
35<div class="container">
36    <h2>ul要素で行う場合</h2>
37    <ul class="materialBox">
38        <li class="ingredients">
39            <span class="ingredientName">オレンジジュース</span>
40            <span class="ingredientPrice">350円</span>
41        </li>
42        <li class="ingredients">
43            <span class="ingredientName">レモンスカッシュ</span>
44            <span class="ingredientPrice">450円</span>
45        </li>
46    </ul>
47    <h2>dl要素で行う場合</h2>
48    <dl class="materialBox">
49        <div class="ingredients">
50            <dt class="ingredientName">トマトジュース</dt>
51            <dd class="ingredientPrice">300円</dd>
52        </div>
53        <div class="ingredients">
54            <dt class="ingredientName">欧州カレーセット</dt>
55            <dd class="ingredientPrice">1,000円</dd>
56        </div>
57    </dl>
58</div>
59</body>
60</html>

投稿2018/05/30 11:37

編集2018/05/30 11:39

s8_chu

総合スコア14731

TemmeiYamada

2018/05/31 01:09

radial-gradientはこういう使い方もあるんですねー。勉強になります。 orderも使ったことがなかったので参考になります。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

中黒は円形グラデーションで処理しています。
dt、ddには、bodyとか外側の背景色を指定する必要があります。

html
1<dl class="dlnormal">
2	<dt>オレンジジュース</dt><dd>350円</dd>
3	<dt>レモンスカッシュ</dt><dd>450円</dd>
4	<dt>トマトジュース</dt><dd>300円</dd>
5	<dt>欧州カレーセット</dt><dd>1,000円</dd>
6</dl>

css
1.dlnormal {
2  overflow: hidden;
3}
4.dlnormal dt {
5  background: #fff;
6  clear: both;
7  float: left;
8  position: relative;
9  padding-right: .25em;
10}
11.dlnormal dt:before {
12  background-image: radial-gradient(2px 2px, CurrentColor, rgba(0,0,0,0));
13  background-position: .5em center;
14  background-size: 1em 100%;
15  content: '';
16  display: block;
17  position: absolute;
18  top: 0;
19  left: 100%;
20  width: 100vw;
21  height: 100%;
22  z-index: -1;
23}
24.dlnormal dd {
25  background: #fff;
26  float: right;
27  padding-left: .25em;
28}
29

下記から確認できます。
ちなみにdl直下にdivつけれるので、その構造でもやってみました。
https://codepen.io/sleepzzz/pen/rKaOoL

ulの分を追記

html
1<ul>
2	<li><span>オレンジジュース</span><span>350円</span></li>
3	<li><span>レモンスカッシュ</span><span>450円</span></li>
4	<li><span>トマトジュース</span><span>300円</span></li>
5	<li><span>欧州カレーセット</span><span>1,000円</span></li>
6</ul>
7

css
1ul {
2  list-style: none;
3  margin: 0;
4  padding: 0;
5}
6li {
7  display: -webkit-flex;
8  display: flex;
9  justify-content: space-between;
10  overflow: hidden;
11}
12li span:first-child{
13  background: #fff;
14  padding-right: .25em;
15  position: relative;
16}
17li span:first-child:after{
18  background-image: radial-gradient(2px 2px, CurrentColor, rgba(0,0,0,0));
19  background-position: center;
20  background-size: 1em 100%;
21  content: '';
22  display: block;
23  position: absolute;
24  top: 0;
25  left: 100%;
26  width: 100vw;
27  height: 100%;
28  z-index: -1;  
29}
30li span:last-child{
31  background: #fff;
32  float: right;
33  padding-left: .25em;
34}
35