質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

解決済

JavaScriptで擬似要素にCSSを適用させたい

wkbsyt
wkbsyt

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

1回答

0評価

1クリップ

202閲覧

投稿2022/07/05 02:30

編集2022/07/06 09:09

実現したいこと

HTMLにて目次を作成しています。
目次の文字列と、ページ番号が重なる部分だけ、ページ番号をtransformで縮小かけて見た目を整えたいです。
※ページ番号は位置を右端揃えとするために擬似要素を使っています。

実現イメージです。
イメージ説明

再現環境等

再現環境:vivliostyle cli のpreviewコマンドで表示

※vivliostyleでpreviewを実行して、sample.htmlを読込む
①htmlの内容が読み込まれ、cssが適用されて目次体裁が出来上がる。
⇒javascriptにて目次文字列とページ番号から重なるpタグに対してクラス名を追加
⇒javascriptでpタグに追加したクラス名で擬似要素:afterに対して、transformにてページ番号を縮小かける

②目次の文字列とページ番号が重なる段落は、ページ番号が縮小される。
⇒ページ番号が縮小される対象のpタグには追加したクラス名が入っているが、表示されたページ番号にはtransformが適用されていない。

発生している問題

cssで目次体裁を整えてから、javascriptにて目次文字列とページ数を取得して重なった部分に対して擬似要素のページ番号を縮小させるためのクラスを追加しました。
目次すべてをチェック後に、https://teratail.com/questions/101337を参考にCSSコードを<style><head>に直接挿入するJavaScriptを作成しましたが、擬似要素であるページ番号の部分が縮小されません。

headにはstyleが追加されていますが、以下のようにページ番号にはcssが適用されません。
イメージ説明

ソース

html

<html> <head> <meta charset="utf-8"> <title>目次</title> <link rel="stylesheet" href="./css/mokuji_default.css"> <link rel="stylesheet" href="./css/syomei.css"> <link rel="stylesheet" href="./css/template_a5_h38.css"> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script> <script type="text/javascript" src="js/script.js" defer></script> </head> <body> <h1>目次</h1> <div> <p class="mokuji" data-hou-cd="H325901010029" data-nombre="000000の00000の00000"><span class="hyoudai jourei">〇ああああああああ</span><span class="hatsurei">(いいいいいいいいいいいいいいいいい)</span></p> <p class="mokuji afure2" data-hou-cd="H421902100032" data-nombre="000000の00000の00000"><span class="hyoudai">〇あああああああああああああ</span><span class="hatsurei">(いいいいいいいいいいいいいいいい)</span></p> <p class="mokuji" data-hou-cd="H333909220004" data-nombre="000000の00000の00000"><span class="hyoudai">〇あああああああああああああああああああ</span><span class="hatsurei">(いいいいいいいいいいいいいいいいいい)</span></p> <p class="mokuji afure1" data-hou-cd="H334902210011" data-nombre="000000の00000の00000"><span class="hyoudai">〇あああああああああ</span><span class="hatsurei">(いいいいいいいいいいいいいいいいいいい)</span></p> </div> </body> </html>

css

@charset "UTF-8"; html { /* フォントの指定 */ font-weight: normal; font-family: "mincho"; widows: 1; orphans: 1; text-size-adjust: none; } /* フォント明朝 */ .font-mincho { font-family: "mincho"; } /* フォントゴシック */ .font-gothic { font-family: "gothic"; } /* フォント欧文明朝 */ .font-latin-mincho { text-orientation: sideways; } /* フォント欧文明朝イタリック */ .font-latin-mincho-italic { font-style: italic; text-orientation: sideways; } /* 目次作成用 */ h1 { font-size: 2rem; inline-size: 5em; padding: 0; margin: 0; margin-block-start: 2rem; margin-block-end: 4rem; margin-inline-start: auto; margin-inline-end: auto; text-align-last: justify; } /* 見出し */ .mokuji_header_lv1 { font-size: 1.75rem; text-indent: -4em; padding: 0; margin: 0; padding-inline-start: 5em; margin-block-start: 4rem; margin-block-end: 3rem; break-after: avoid; } .mokuji_header_lv2 { font-size: 1.5rem; text-indent: -4em; padding: 0; margin: 0; padding-inline-start: 6em; margin-block-start: 4rem; margin-block-end: 3rem; break-after: avoid; } .mokuji_header_lv3 { font-size: 1.25rem; text-indent: -4em; padding: 0; margin: 0; padding-inline-start: 7em; margin-block-start: 4rem; margin-block-end: 3rem; break-after: avoid; } .mokuji_header_lv4 { font-size: 1.25rem; text-indent: -4em; padding: 0; margin: 0; padding-inline-start: 8em; margin-block-start: 4rem; margin-block-end: 3rem; break-after: avoid; } .mokuji_header_lv5 { font-size: 1.25rem; text-indent: -4em; padding: 0; margin: 0; padding-inline-start: 9em; margin-block-start: 4rem; margin-block-end: 3rem; break-after: avoid; } /* 目次情報 */ p.mokuji { text-indent: -1rem; margin: 0; padding-inline-start: 1rem; padding-inline-end: 8rem; position: relative; } p.mokuji::after { position: absolute; content: attr(data-nombre); display: block; padding-inline-end: 1rem; inset-block-end: 0; inset-inline-end: 0; } /* ゴシック */ .header_num, .jourei { font-family: "gothic"; } /* 体系情報の名称字取り */ .header_jidori { text-indent: 0; padding: 0; margin: 0; inline-size: 5em; display: inline-block; text-align-last: justify; }

css2

@charset "UTF-8"; @font-face { font-family: "mincho"; src: local("Noto Serif JP"), local("IPAMincho"), local("IPA明朝"), local("MS 明朝"); font-weight: normal; } @font-face { font-family: "gothic"; src: local("Noto Sans JP"), local("IPAGothic"), local("IPAゴシック"), local("MS ゴシック"); font-weight: bold; }/*# sourceMappingURL=syomei.css.map */

css3

@charset "UTF-8"; html { font-size: 2.75mm; line-height: 4.75mm; writing-mode: horizontal-tb; text-orientation: upright; } /* フォントサイズ大 */ .font-size-large { font-size: 4.125mm; } /* フォントサイズ小 */ .font-size-small { font-size: 2.0625mm; } /*用紙設定*/ @page { size: 148mm 210mm; } @-epubx-page-template { @-epubx-page-master { -epubx-utilization: 1.3; /* 本文領域 */ @-epubx-partition { -epubx-flow-from: body; -epubx-enabled: -epubx-expr( page-number % 2 == 0 ); left: 20.68mm; top: 21mm; width: 109.32mm; height: 170.6mm; writing-mode: horizontal-tb; overflow: visible; position: absolute; /*段数*/ column-count: 1; /*段間*/ column-gap: 5.5mm; /*罫線*/ column-rule: solid 0.15mm #000; column-fill: auto; /* debug用の枠表示 */ border: dashed 1px; } /* 本文領域 */ @-epubx-partition { -epubx-flow-from: body; -epubx-enabled: -epubx-expr( page-number % 2 == 1 ); left: 18mm; top: 21mm; width: 109.32mm; height: 170.6mm; writing-mode: horizontal-tb; overflow: visible; position: absolute; /*段数*/ column-count: 1; /*段間*/ column-gap: 5.5mm; /*罫線*/ column-rule: solid 0.15mm #000; column-fill: auto; /* debug用の枠表示 */ border: dashed 1px; } } } /* A5 横書き 1段 11q 38字 38行 テンプレート(h38)*//*# sourceMappingURL=template_a5_h38.css.map */

javascript

var i =1; var classnode = document.getElementsByClassName('mokuji'); Array.prototype.forEach.call(classnode, element => { /* ページ跨ぎのデータを取り除く */ if (element.children.length == 3) { /* 目次テキストとノンブルを取得*/ var mokuji_text = (element.children[0].innerText + element.children[1].innerText).length; var nombre = (element.children[2].innerText).length; /* 目次文字列とノンブルの重なりを判定 */ var num = mokuji_text - nombre; if (num == 13) { element.classList.add('afure1'); } } }) let style = `<style> p.afure1[data-nombre]::after { transform: translateX(0.2rem) scale(0.5, 1); } </style>`; document.querySelector(`head`).insertAdjacentHTML('beforeend', style);

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yambejp

2022/07/05 03:16

疑似要素がマストなのでしょうか?
wkbsyt

2022/07/05 04:09

ページ番号を右端揃えにすることができるのであれば擬似要素がマストではありませんが、今の見た目を作る中で擬似要素を使うことでページ番号を揃えることができました。 擬似要素を使わず、このページ番号の見た目にする方法があればご教授いただきたいです。
Lhankor_Mhy

2022/07/05 04:47

ご提示のコードを試してみましたが、問題が再現しませんでした。 おそらく、ご提示の部分には原因はなさそうに思います。 ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。 問題再現の手順をもう少し詳しく書いていただけますか?
wkbsyt

2022/07/05 05:41

再現環境等を追加させていただきました。 vivliostyle cli というcss組版のossを使っております。
Lhankor_Mhy

2022/07/05 06:03

アンテナハウスのやつですね。 teratail の回答者に使ったことある人いるのかな……? 問題が再現するページを提示することはできますか?
Lhankor_Mhy

2022/07/05 06:06

あ、もしかして、出力結果は ePub ですか? ePub 上でスクリプトを実行することってできたんでしたっけ? そのあたり全然知識がないので、そうだとしたらお役には立てなさそうですね。
wkbsyt

2022/07/06 00:04

ありがとうございます。 再度現状のjavascriptを見直したところ、transformで縮小、位置修正が出来ました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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