実現したいこと
目次等の、内容とページ数の間を埋める点線について、
レスポンシブ対応させたいのですが、
可変するとブラウザ幅によっては点が半分に切れたりしてしまうので、それを解消したいです。
・点の位置は縦が揃っているようにしたい(ページ数の方にスタートを寄せる)
・点の個数が、1個単位で変わるようにしたい(0.5個(ちょっとだけ見切れている等)は無し)
該当のソースコード
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:"・";
を入れる方法も試しましたが、レスポンシブに対応できなかったのでとりやめました。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/11/20 04:14
2023/11/20 13:28
2023/11/20 13:36
2023/11/21 22:39
2023/11/21 22:43
回答6件
0
ベストアンサー
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総合スコア36928
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/11/22 05:34
2023/11/22 07:51
0
以前私が質問したこの方法とかどうでしょうか?
メニュー表のような間をナカグロで埋めるリストを書きたい
https://teratail.com/questions/128721
投稿2023/11/28 01:18
総合スコア17
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
現在の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; /* 1行ぶんの高さにして、 */ 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総合スコア21668
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
かなりアドホックになっちゃいますが、サンプルを置いておきます。
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
総合スコア36928
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/11/20 09:27
2023/11/21 01:14
0
点の位置は縦が揃っているようにしたい(ページ数の方にスタートを寄せる)
点の個数が、1個単位で変わるようにしたい(0.5個(ちょっとだけ見切れている等)は無し)
background-repeat: space;
ではどうでしょうか。
余白が画像同士の間に均一に分配されます。
とのことなので、縦がそろっているようにはならないでしょうが、見切れはしないかと。
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総合スコア4052
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/11/20 05:30
2023/11/20 09:16
0
姑息でよいならこんな感じ
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
総合スコア116644
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/11/20 05:31 編集
2023/11/20 05:33
2023/11/20 07:02
2023/11/20 07:10
2023/11/20 09:16
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。