cssの当て方について

2026/01/20 13:12

Windows 11のEdge,Chrome,Firefoxで確認しました。提示されたソースで、全角空白を半角空白に置換して試しましたが、縦棒は表示されませんでした。

2026/01/21 00:04

補足願います。 1. 「PDF出力」というのは具体的にはどのような操作ですか？　また、その出力されたPDFをなにで閲覧していますか？ 2. 「左側にマーク」と「左側の縦棒」は同じものですか？ 3. 「文字の中心」というのは具体的にはどの位置でしょうか？たとえば、この図で言うと、どのラインとどのラインの中心と考えていますか？　https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%BB%E3%83%B3%E3%83%80%E3%83%BC

yambejp

2026/01/21 02:54

イメージがわかないので完成形の画像を明示することはできますか？（適当なペイントツールで手書きでもかまわないので）

2026/01/21 12:55

▶hiroki-o 申し訳ありません、ChatGPTより提示されたソースは確かに縦棒の表示がされない状態のものを添付していました。下記が他に提示されたソースになります。 <h3 style={{ fontSize: "14px", fontWeight: "900", color: "#0f172a", display: "flex", alignItems: "center", gap: "10px", marginBottom: "10px", // 追加: デフォルトの余白と高さを完全にリセット margin: "0 0 10px 0", lineHeight: "1", padding: "0", }} > <span style={{ display: "block", width: "6px", height: "14px", // 文字サイズ(14px)と全く同じ高さにする backgroundColor: "#2563eb", borderRadius: "1px" }} /> <span style={{ display: "block" }}>MONTHLY STATISTICS</span> </h3> ▶Lhankor_Mhy 1. 「PDF出力」というのは具体的にはどのような操作ですか？　また、その出力されたPDFをなにで閲覧していますか？　⇒　jsPDF + html2canvasライブラリを使用してPDFを作成しています。　　　PDFの確認はAdobe Acrobat Reader、chromeを使用しています。 2. 「左側にマーク」と「左側の縦棒」は同じものですか？　⇒　ややこしくてすみません。同じものになります。 3. 「文字の中心」というのは具体的にはどの位置でしょうか？たとえば、この図で言うと、どのラインとどのラインの中心と考えていますか？　　⇒　サイトにありました図で一番近いのはmedianです。 ▶yambejp 画像の貼り付けが出来ないので説明しにくいですが、https://chie-pctr.c.yimg.jp/dk/iwiz-chie/que-14227520329?w=309&cch=709&up=0&exp=3600このようなものになります。

2026/01/22 00:22 編集

PDF出力時とWEB上のスクリーンショットで明らかにフォントが異なりますが、それぞれ何が使われていますか？　同じものにするとどうなりますか？また、html2canvas で canvas にしたものを jsPDF でPDFにしているということだと思うのですが、canvas の状態ではズレていない、ということでいいですか？

2026/01/22 09:11

react.development.js 上で jsPDF + html2canvasライブラリを使用してPDFを作成するサンプルを作ってみましたが、問題はなさそうでした。 https://jsfiddle.net/Lhankor_Mhy/dLcbam7n/

2026/01/22 13:14

▶Lhankor_Mhy フォントについてですが、WEBで確認する際は特に指定していません。 PDF版の時は"'Yu Gothic', 'YuGothic','Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif"にしています。 canvasにした状態のものをwebで確認したときは問題ありません。 PDFに出力したときにズレています。サンプル作成、確認ありがとうございます。確かにズレていないのでPDFに出力する部分でおかしくなっているということですね。下記が出力している内容になりますが特にズレる要因になりそうな部分は見当たらないと思いますが… try { const element = printRef.current; const canvas = await html2canvas(element, { scale: 2, useCORS: true, logging: false, }); const imgData = canvas.toDataURL("image/png"); const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4", }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight); pdf.save( `詳細一覧_${currentDate.getFullYear()}${currentDate.getMonth() + 1}.pdf`, ); } catch (error) { console.error(error); alert("PDFの生成に失敗しました"); } finally { setIsExporting(false); }

2026/01/22 14:31

Reactの質問なら、タイトルは「Reactのstyleプロパティの当て方について」、タグは「CSS」ではなく「React.js」にしてほしかったです。

2026/01/22 14:36

▶hiroki-o 申し訳ありません。以後注意します。また現在の質問も修正しておきます。

2026/01/23 00:42

> フォントについてですが、WEBで確認する際は特に指定していません。 > PDF版の時は"'Yu Gothic', 'YuGothic','Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif"にしています。 WEBの出力とPDFの出力を別のスタイルにしているということですね。であれば、同じ結果にならないのは自然のような気がします。同じフォントにするとどうなりますか？

2026/01/23 02:23

ご提示のコードで試してみましたが、やはり問題は起きないようです。 https://jsfiddle.net/Lhankor_Mhy/dLcbam7n/1/ おそらくご提示されている部分のコードには問題の原因がないのだと思います。問題が再現できるもっと小さなコードを作ってみてはいかがでしょうか。

2026/01/23 09:47

▶Lhankor_Mhy 丁寧に説明いただきありがとうございます。同じフォントにするとどうなりますか？　⇒　同様のフォント（"'Yu Gothic', 'YuGothic','Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif"）をweb版でも当ててみましたがずれておらず、PDFはズレていました。実際にh3タグに当てている部分以外の箇所かもということで、h3タグを囲っている下記も確認しましたが同様の現象となりWEB版での再現が取れていません。 <div style={{ backgroundColor: "#ffffff", color: "#334155", paddingTop: "5mm", paddingBottom: "10mm", paddingLeft: "15mm", paddingRight: "15mm", width: "210mm", minHeight: "297mm", fontFamily: "'Yu Gothic', 'YuGothic','Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif", boxSizing: "border-box", }} > <h3 style={{ fontSize: "12px", fontWeight: "800", marginBottom: "8px", color: "#1e293b", paddingLeft: "8px", borderLeft: "6px solid #2563eb", lineHeight: "1.5em", }} > MONTHLY STATISTICS </h3> </div>

2026/01/23 22:59

そのソースをLhankor_Mhyさんのリンク先のソースに組み込んでも、再現しませんでした。フォント指定を変えると、多少は中心線より上下しますが、画像のようにはズレませんでした。もっと親要素の影響か、PDF変換部分のソースの書き方か、環境か、切り分ける必要があります。とりあえず、リンク先のソースをローカルのHTMLに保存して、質問者さんの環境で開くと再現しますか？あと、タイトルとタグはReactの質問であることがわかるように変更したほうがよいです。もっと詳しい人に見てもらえるかも...いや、ここの常連でLhankor_Mhyさん、yambejpさんよりWeb系に強い人はいないか...

2026/01/23 23:52 編集

> three-butterfly おすすめしたのはより小さいコードで問題が再現させることでした。大きいコードを書くことではないです。たとえば、A、Ｂ、Cの部分があるコードがあったとして、C部分を削除しても問題が再現するのであれば、とりあえずAとBのどちらかには原因があると絞り込めます。そうして、これ以上削除をすると問題が再現できなくなるようなコードを作るといいのではないか、というご提案でした。回答者たちは誰も問題を再現することができないでいます。ですので、いわゆる「おま環」である可能性が否定できず、有効な回答が難しいです。小さいコードを作ることができれば、問題のコードを回答者に共有しやすくなりますから、そういう意味でもおすすめしています。 React はビルドをするため、どうしても環境差異が否定しにくい部分があります。パッケージ設定ごとgithubに全部アップロードするのであればともかく、そうでないならピュアHTMLで問題を再現させた方が回答は付きやすいでしょう。

2026/01/24 09:41

>Lhankor_Mhy そうだったのですね。勘違いしておりました。環境による違いもあるとのこと理解しました。一度現在のプロジェクトを見直して一からやり直してみます。タグ違いの質問にも関わらず、丁寧に教えていただきありがとうございます。

2026/01/24 09:42

コメントありがとうございました。ベストアンサーに選びたいのでさきのコメントを回答欄に投稿いただけますでしょうか？

2026/01/25 00:37

再検討を行うとのこと、かしこまりました。質問のクローズについては、自己解決で処理されるのが適当であると思います。お手数ですがよろしくお願いします。

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

回答3件

自己解決

たくさんの方にご教授いただきましたが、ズレる原因が単純なHTML/CSSではなく私自身の環境による可能性があるとのことでしたので一度現在のプログラムを見直していくことにします。

投稿2026/01/28 02:35

総合スコア13

Windows 11、Chrome、Acrobat Readerで確認しました。
提示されたソースで縦棒が表示されないのは変わらないので、似たようなHTMLを書いて試してみました。
Chrome標準のPDF変換機能では問題無かったので、それを試して変換ライブラリとHTMLのどちらが原因か切り分けてみてください。

html
1<style>
2.title {
3    position: relative;
4    padding-left: 15px;
5}
6
7.title::before {
8    content: "";
9    position: absolute;
10    left: 0;
11    top: 0;
12    width: 6px;
13    height: 100%;
14    background-color: blue;
15}
16</style>
17<h3 class="title">
18MONTHLY STATISTICS
19</h3>

Chrome表示

Chromeの印刷ダイアログで、送信先を「PDFに保存」、[詳細設定]-[オプション]-[背景のグラフィック]にチェックを付けて、[保存]押下。

Acrobat Reader表示

投稿2026/01/21 15:15

総合スコア1706

仮にこうすると縦位置真ん中になっていますよね？

html
1<h3 style="border-left: 6px solid #2563eb;line-height:2em;">
2MONTHLY STATISTICS
3</h3>

どの部分が想定と違うのでしょうか？

投稿2026/01/21 03:02

yambejp

総合スコア118305