目次やレシピで使用する文字の間の点線について

実現したいこと

目次等の、内容とページ数の間を埋める点線について、
レスポンシブ対応させたいのですが、
可変するとブラウザ幅によっては点が半分に切れたりしてしまうので、それを解消したいです。
・点の位置は縦が揃っているようにしたい（ページ数の方にスタートを寄せる）
・点の個数が、1個単位で変わるようにしたい（０.５個（ちょっとだけ見切れている等）は無し）

該当のソースコード

html
1<dl>
2　<div class="item">
3　　<dt>内容1について</dt><dd>1ページ</dd>
4　</div>
5　<div class="item">
6　　<dt>内容の文章が長いバージョン</dt><dd>100ページ</dd>
7　</div>
8</dl>

css
1.item {
2　display: flex;
3  justify-content: space-between;
4  align-items: center;
5　position: relative;
6}
7.item::after {
8　position: absolute;
9　top: 50%;
10　transform: translateY(-50%);
11　display: block;
12　width: 100%;
13　background-image : linear-gradient(to right, #000 2px, transparent 2px);
14　background-size: 10px 2px;
15}
16dt {
17　position: relative;
18　background-color: #fff;
19　z-index: 1;
20}
21dd {
22　position: relative;
23　background-color: #fff;
24　z-index: 1;
25}

試したこと

調べて、上記のように疑似要素を背景にし、文字は重ねる方法で実装しました。
重ねず、dtとddの間にspan などを入れて、
疑似要素にcontent:"・";
を入れる方法も試しましたが、レスポンシブに対応できなかったのでとりやめました。

yambejp

2023/11/20 04:08

「目次やレシピで使用する文字の間の点線」とはどこの何を指していますか？それと全角スペースでcssのインデントはNGです

f_e_beginner

2023/11/20 04:14

説明が上手くできずすみません。タブリーダーというのでしょうか。内容・・・・・・・・・1ページ長い内容・・・・・・・100ページこのような「・・・・・」の部分です。ブラウザ幅によって、この点の数が可変してほしいと思っています。

shamsham

2023/11/20 13:28

CSSのみでの記述でしょうか？ JavaScriptを使うと、もっとシンプルにできると思うのですが…

f_e_beginner

2023/11/20 13:36

cssのみにこだわっているわけではないので、jsでも大丈夫です。何かヒントでも良いのでjsでの方法を教えていただけないでしょうか。

shamsham

2023/11/21 22:39

1.内容とページ数の間にspan要素を入れる。 2.while文を使ってspanの中に全角の「・」を一つずつ入れていく。 3.内容の要素のwidth、ページ数の要素のwidth、span要素のwidthを取得して、それらの合計が画面の横幅を超える一つ前でループを止める。こんな感じで作ってみてはいかがでしょうか。もし、サンプルコードが欲しかったり、わかりにくいところがあったら遠慮なく言ってください！

shamsham

2023/11/21 22:43

追加 widthの取得はclientWidthやoffsetWidthを使ってください。

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

回答6件

ベストアンサー

CSS数学関数のround()は任意の値で丸めることができます。
これをwidthに適用すると「100%を10px単位で丸める」などとして、200px,210px,220px...などという非連続的な幅を持つことができます。
背景でリーダーを10px単位で繰り返すのであれば、構成要素をすべて10pxで丸めれば、理屈の上では途中で途切れることはないはずですし、当方の環境（Firefox119）では途切れませんでした。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        dl {
10            width: round(down, 100%, 10px);
11        }
12
13        .item {
14            display: flex;
15            justify-content: space-between;
16            align-items: center;
17            position: relative;
18        }
19
20        .item::after {
21            content: '';
22            position: absolute;
23            top: 50%;
24            transform: translateY(-50%);
25            display: block;
26            width: 100%;
27            background-image: linear-gradient(to right, #000 2px, transparent 2px);
28            background-size: 10px 2px;
29            height: 2px;
30        }
31
32        dt {
33            position: relative;
34            z-index: 1;
35
36            & div {
37                background-color: #fff;
38                width: round(up, 100%, 10px);
39            }
40        }
41
42        dd {
43            position: relative;
44            z-index: 1;
45            display: grid;
46            justify-items: end;
47
48            & div {
49                background-color: #fff;
50                width: round(up, 100%, 10px);
51            }
52        }
53    </style>
54</head>
55
56<body>
57    <dl>
58        <div class="item">
59            <dt>
60                <div>内容1について</div>
61            </dt>
62            <dd>
63                <div>1ページ</div>
64            </dd>
65        </div>
66        <div class="item">
67            <dt>
68                <div>内容の文章が長いバージョン</div>
69            </dt>
70            <dd>
71                <div>100ページ</div>
72            </dd>
73        </div>
74    </dl>
75</body>
76
77</html>

問題は、CSS数学関数は最近実装が始まったもののため、ブラウザの対応がよくないことです。
Browser compatibility | round() - CSS: Cascading Style Sheets | MDN

投稿2023/11/22 04:57

編集2023/11/22 04:58

Lhankor_Mhy

総合スコア36117

f_e_beginner

2023/11/22 05:34

ありがとうございます。この方法が一番わかりやすく使いやすいと感じました。調べた所ではブラウザも最新であれば結構対応しているようでしたが、そのURLではchromeも対応していないようですね。

Lhankor_Mhy

2023/11/22 07:51

そのようですね。Chromium だけが遅れているようです。 Issue を見ると、実装をしようとしているようですが、Chrome の方では Dev にも入っていなさそうです。 https://bugs.chromium.org/p/chromium/issues/detail?id=1407473&q=CSS%20round&can=2

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

以前私が質問したこの方法とかどうでしょうか？

メニュー表のような間をナカグロで埋めるリストを書きたい
https://teratail.com/questions/128721

投稿2023/11/28 01:18

TemmeiYamada

総合スコア17

現在のCSSでは背景画像の繰り返しで1単位が見切れないように表示する機能はないかと思うので、JavaScript でなんとかするか文字で表現するかしかないと思います。以下は文字で表現する例です。

html
1<dl>
2<div class="item">
3<dt>内容1について</dt><dd>1ページ</dd>
4</div>
5<div class="item">
6<dt>内容の文章が長いバージョン</dt><dd>100ページ</dd>
7</div>
8</dl>

css
1.item {
2  display: flex;
3}
4
5.item::after {
6  /* サポートしている最大の幅に足りる長さのテキスト */
7  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; 
8  display: block;
9  flex: 1 1;
10  order: 2;
11  overflow-wrap: anywhere; /* どこでも改行できるように */
12  text-align: right;
13  height: 1lh; /* １行ぶんの高さにして、 */
14  overflow: hidden; /* はみ出たぶんは非表示 */
15}
16dt {
17  white-space: nowrap;
18  flex: 0 0;
19}
20dd {
21  margin-inline-start: 0px;
22  white-space: nowrap;
23  flex: 0 0;
24  order: 3;
25}

投稿2023/11/21 00:19

編集2023/11/21 00:43

int32_t

総合スコア20884

かなりアドホックになっちゃいますが、サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/8wf0agmt/

css
1    * {
2      margin: 0;
3      padding: 0;
4      font-family: Meiryo;
5    }
6
7    dl {
8      display: grid;
9      grid: repeat(2, 1em) / repeat(auto-fill, 1em);
10      grid-auto-flow: column dense;
11      width: 100%;
12      line-height: 1;
13      overflow: hidden;
14    }
15
16    .item {
17      display: contents;
18    }
19
20    dt {
21      grid-column-start: 1;
22    }
23
24    dd {
25      grid-column-end: -1;
26      justify-self: end;
27    }
28
29    .item:nth-child(1) {
30      & dt {
31        grid-column-end: span 7;
32      }
33
34      & dd {
35        grid-column-start: span 4;
36      }
37    }
38
39
40    .item:nth-child(2) {
41      & dt {
42        grid-column-end: span 13;
43      }
44
45      & dd {
46        grid-column-start: span 5;
47      }
48    }
49
50    .dummy {
51      grid-column-start: -1;
52    }

html
1  <dl>
2    <div class="item">
3      <dt>内容1について</dt>
4      <dd>1ページ</dd>
5    </div>
6    <div class="item">
7      <dt>内容の文章が長いバージョン</dt>
8      <dd>100ページ</dd>
9    </div>
10    <div class="item">
11      <span class="dummy">　</span>
12      <span class="dummy">　</span>
13      <span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span>
14      <span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span>
15      <span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span>
16      <span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span>
17      <span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span><span>・</span>
18    </div>
19  </dl>

投稿2023/11/20 07:38

Lhankor_Mhy

総合スコア36117

f_e_beginner

2023/11/20 09:27

gridで配置するという事でしょうか？実際には2つ以上あるのでhtmlがこの内容になるのは難しいのですが、やはり他に方法はないですかね。

Lhankor_Mhy

2023/11/21 01:14

2つ以上だと動かない、ということはないかと思います。

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

点の位置は縦が揃っているようにしたい（ページ数の方にスタートを寄せる）
点の個数が、1個単位で変わるようにしたい（０.５個（ちょっとだけ見切れている等）は無し）

background-repeat: space;ではどうでしょうか。

https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat

余白が画像同士の間に均一に分配されます。

とのことなので、縦がそろっているようにはならないでしょうが、見切れはしないかと。

diff
1 background-image : linear-gradient(to right, #000 2px, transparent 2px);
2 background-size: 10px 2px;
3+background-repeat: space;

文字の量に結構差があるので、均一に分配されるとバラバラ感が出てしまうのと、縦はそろっている必要があるので難しいです。

いっそ、dashedなボーダーにしてみる、とか。

diff
1 .item::after {
2  ...
3   width: 100%;
4-  background-image : linear-gradient(to right, #000 2px, transparent 2px);
5-  background-size: 10px 2px;
6+  border-top: gray 1px dashed;
7+  content: ''
8 }

投稿2023/11/20 05:25

編集2023/11/20 05:56

shiketa

総合スコア3971

f_e_beginner

2023/11/20 05:30

ありがとうございます。文字の量に結構差があるので、均一に分配されるとバラバラ感が出てしまうのと、縦はそろっている必要があるので難しいです。

f_e_beginner

2023/11/20 09:16

ありがとうございます。デザインは決まっているので、dashedに変更はできないのです。やはり見切れない方法は難しいですよね。。

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

姑息でよいならこんな感じ

css
1<style>
2.right-body__item{
3background-Image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="18"><text x="0" y="15" fill="black" >・</text></svg>');
4background-repeat: repeat-x;
5background-Color:white;
6}
7dt,dd{
8background-Color:inherit;
9display:inline-block;
10}
11dd{
12float:right;
13}
14</style>
15<dl class="right-body__list">
16<div class="right-body__item">
17<dt class="item1">内容1について</dt>
18<dd class="item2">1ページ</dd>
19</div>
20<div class="right-body__item">
21<dt class="item1">内容の文章が長いバージョン</dt>
22<dd class="item2">100ページ</dd>
23</div>
24</dl>

text内の「・」を別の文字に変えればそれで埋められます
widthの調整で間隔を調整できます

投稿2023/11/20 05:13

yambejp

総合スコア114848

f_e_beginner

2023/11/20 05:31 編集

ありがとうございます。姑息というのはどうしてでしょうか？実務で使用するので、ご迷惑でなければ教えていただきたいです。

yambejp

2023/11/20 05:33

>姑息私の方法がDLの背景を設定して、DT.DDの背景色をつけることで実現していることです質問者さんはあくまでDTとDDの間を埋めるにはというご質問でしたので結果は同じでもアプローチの仕方が違うので「その場しのぎ」の方法ということです

f_e_beginner

2023/11/20 07:02

元々調べていた方法も、dlではないですが疑似要素で背景を設定して、dt.ddに背景色を付けて重ねる方法でしたので、重ねるのは問題ないです。記載いただいた方法で試してみましたが、やはりブラウザ幅を縮めていくと、端っこの・が半分とかの欠けた状態で表示される所が出てくるのですが、解決する方法があるでしょうか？

yambejp

2023/11/20 07:10

点々の上に被せるだけですから、切れるのは調整こんなんですねかりに繰り返し処理じゃなくても結局は重ねると切れますので

f_e_beginner

2023/11/20 09:16

見切れが発生しない方法はやはりないでしょうか。

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

あなたの回答