質問編集履歴
3
問合せ内容の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -5,6 +5,20 @@
|
|
|
5
5
|
|
|
6
6
|
実現イメージです。
|
|
7
7
|
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### 再現環境等
|
|
11
|
+
再現環境：vivliostyle cli のpreviewコマンドで表示
|
|
12
|
+
|
|
13
|
+
※vivliostyleでpreviewを実行して、sample.htmlを読込む
|
|
14
|
+
①htmlの内容が読み込まれ、cssが適用されて目次体裁が出来上がる。
|
|
15
|
+
⇒javascriptにて目次文字列とページ番号から重なるpタグに対してクラス名を追加
|
|
16
|
+
⇒javascriptでpタグに追加したクラス名で擬似要素：afterに対して、transformにてページ番号を縮小かける
|
|
17
|
+
|
|
18
|
+
②目次の文字列とページ番号が重なる段落は、ページ番号が縮小される。
|
|
19
|
+
⇒ページ番号が縮小される対象のpタグには追加したクラス名が入っているが、表示されたページ番号にはtransformが適用されていない。
|
|
20
|
+
|
|
21
|
+
|
|
8
22
|
|
|
9
23
|
### 発生している問題
|
|
10
24
|
cssで目次体裁を整えてから、javascriptにて目次文字列とページ数を取得して重なった部分に対して擬似要素のページ番号を縮小させるためのクラスを追加しました。
|
2
参照ソース修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
p.afure1[data-nombre]::after {
|
|
288
288
|
transform: translateX(0.2rem) scale(0.5, 1);
|
|
289
289
|
}
|
|
290
|
-
<style>`;
|
|
290
|
+
</style>`;
|
|
291
291
|
|
|
292
292
|
document.querySelector(`head`).insertAdjacentHTML('beforeend', style);
|
|
293
293
|
|
1
文章の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
HTMLにて目次を作成しています。
|
|
3
|
-
目次の文字列と、ページ番号が重なる部分だけ、ページ番号をtransformで縮小かけて見た目を整えたいです。
|
|
3
|
+
目次の文字列と、ページ番号が重なる部分だけ、ページ番号をtransformで縮小かけて見た目を整えたいです。
|
|
4
|
+
※ページ番号は位置を右端揃えとするために擬似要素を使っています。
|
|
4
5
|
|
|
5
6
|
実現イメージです。
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
### 発生している問題
|
|
9
|
-
|
|
10
|
+
cssで目次体裁を整えてから、javascriptにて目次文字列とページ数を取得して重なった部分に対して擬似要素のページ番号を縮小させるためのクラスを追加しました。
|
|
10
11
|
目次すべてをチェック後に、https://teratail.com/questions/101337を参考にCSSコードを<style>で<head>に直接挿入するJavaScriptを作成しましたが、擬似要素であるページ番号の部分が縮小されません。
|
|
11
12
|
|
|
12
13
|
headにはstyleが追加されていますが、以下のようにページ番号にはcssが適用されません。
|