html　行頭をそろえたい

pタグ内でbrタグを使って改行をすると括弧の前に少し余白ができるのですが、これを直したいです。

アドバイス頂ければ幸いです。

m.ts10806

2020/06/06 08:41

まず、現象確認できるコードを提示してください。

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

回答4件

その余白は鍵括弧のフォントの一部です。
プロポーショナルフォントを使えば良いかと思います。

投稿2020/06/06 08:51

otn

総合スコア86055

dda

2020/06/06 09:32

文字によって幅が違うフォントと同じのものの二つがあるのですね！ありがとうございました！

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

半角が使いたいなら
｢｣
こちらをコピペ

投稿2020/06/06 08:31

編集2020/06/06 08:32

ForestSeo

総合スコア2722

dda

2020/06/06 09:33

ありがとうございます！

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

ベストアンサー

等角文字をつかっているので表示の通りが正しいです。
2文字目、3文字目の位置が一緒でしょ？

どうしても詰めて表示したいならこう

HTML
1<p style="font-family:MS PGothic">
2小麦やライ麦から起こした「自家培養発酵種」を使用する伝統的な製法と<br>
3「ヨーグルト酵母」などを使用する近代的な製法を組み合わせることで、<br>
4嗜好や年代を問わずに多くの人に愛される、<br>
5「日々の糧になるパン」を目指しています。
6</p>

※機種依存なので環境にあわせてfont-familyは要調整

投稿2020/06/06 08:29

編集2020/06/06 08:40

yambejp

総合スコア117011

dda

2020/06/06 09:31

ありがとうございました！　フォントが原因だったのですね。

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

フォント名を指定するだけでは、そのフォントが存在しない環境で望む表示にならないので、今回の問題の解決策としては不十分です。
フォントを変える手段を取るなら、Webフォントで確実に望むフォントが使われるようにすべきです。
また、括弧のみならずすべての文字がプロポーショナルになるのはデザイン的に望ましくない場合もあるでしょうから、括弧のみに当該フォントを適用するようにするのがおすすめです。CSSで可能です。
https://spyweb.media/2017/09/13/font-face-subset-synthesis/

なお、理想的にはフォントを変えず行頭1文字のみプロポーショナルにする手段があるのですが、現実的に使い物にならないようです。
将来的に安定して使えるようになるかもしれないので覚えておいてもよいかもしれません。
https://www.bricoleur.co.jp/blog/archives/3588
https://dskd.jp/archives/87.html

投稿2020/06/06 14:10