🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

6回答

988閲覧

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

f_e_beginner

総合スコア4

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2023/11/20 04:00

編集2023/11/20 05:27

実現したいこと

目次等の、内容とページ数の間を埋める点線について、
レスポンシブ対応させたいのですが、
可変するとブラウザ幅によっては点が半分に切れたりしてしまうので、それを解消したいです。
・点の位置は縦が揃っているようにしたい(ページ数の方にスタートを寄せる)
・点の個数が、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ページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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を使ってください。
guest

回答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
Lhankor_Mhy

総合スコア36928

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

f_e_beginner

2023/11/22 05:34

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

0

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

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

投稿2023/11/28 01:18

TemmeiYamada

総合スコア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
int32_t

総合スコア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

Lhankor_Mhy

総合スコア36928

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

f_e_beginner

2023/11/20 09:27

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

2023/11/21 01:14

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

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
shiketa

総合スコア4052

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

f_e_beginner

2023/11/20 05:30

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

2023/11/20 09:16

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

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

yambejp

総合スコア116644

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問