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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

3回答

223閲覧

CSS テキスト外側の縁取りのガタつきで困っています

manmaru

総合スコア31

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2024/02/08 06:11

編集2024/02/08 18:59

実現したいこと

CSSで文字の縁取りを表現した際に角にガタつきが生じており
解消したいので色々試してはいるものの行き詰まっており困っています。。
イメージ説明

発生している問題・分からないこと

デザインソフトで作成されたようにスムーズな縁取り線をCSSで表現したいです。

該当のソースコード

HTML

1 <h1 class="member"><span class="memberCntM">1234</span><div class="small">人</div></h1>

CSS

1 position: absolute; 2 top: min(calc((733 / 750) * 100vw), 733px); 3 left: 50%; 4 transform: translateX(-50%); 5 color: #3DAADF; 6 text-align: center; 7 text-shadow: 8 3px 3px 0px #ffffff, 9 -3px -3px 0px #ffffff, 10 -3px 3px 0px #ffffff, 11 3px -3px 0px #ffffff, 12 3px 0px 0px #ffffff, 13 -3px 0px 0px #ffffff, 14 0px 3px 0px #ffffff, 15 0px -3px 0px #ffffff; 16 font-family: "Noto Sans JP"; 17 font-size: min(calc((110.999/ 750) * 100vw), 110.999px); 18 font-style: normal; 19 font-weight: 900; 20 line-height: 172.419px; /* 155.334% */ 21 letter-spacing: -2.995px;

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

■HTMLをSVGで記述するよう変更したが、変数が挟まっているからかCSSが反映されてなくなり断念

HTML

1<svg viewBox="0 0 100 50"> 2 <text x="0" y="50%"><span class="memberCntM">33333</span>人</text> 3</svg>

CSS

1svg { 2 width: 100%; 3 height: auto; 4 overflow: visible; 5} 6text { 7 fill: #000; 8 stroke: #FFF; 9 stroke-width: 1; 10 stroke-linejoin: round; 11}

■CSSを以下の記述に変更したが、添付のように文字自体が細くなり線も交差していたりと
見た目がおかしくなったため断念

CSS

1 color: #000; 2 -webkit-text-stroke: 1px #FFF; 3 text-stroke: 1px #FFF;![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-02-08/a4cb340b-82ec-4c19-8e38-5eacbf2ff59a.png)

イメージ説明

補足

特になし

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

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

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

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

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

guest

回答3

0

svg

1 <text x="0" y="50%"><span class="memberCntM">33333</span></text>

SVGのタグである <text> の中に HTML のタグである <span> を入れることはできません。入れるとしたら、<tspan> を使います。

テキストコンテンツの子要素

投稿2024/02/08 06:52

int32_t

総合スコア20761

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

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

manmaru

2024/02/08 08:27

回答ありがとうございます。 仰る通りですね、調べていくうちに私もそちらの誤り気が付きました。 ガタツキは解決できていないのですが参考になりました。 ご指摘ありがとうございます。
guest

0

文字の縁取りを表現する際に角のガタつきが生じるのは、text-shadow の影の位置が原因かもしれません。text-shadow の位置を微調整することで、この問題を解消できる場合があります。

以下は、微調整された text-shadow のプロパティです。影の位置を少し調整して、角のガタつきを軽減することができます。一度、トライしてみてください。

text-shadow: 2px 2px 0px #ffffff, -2px -2px 0px #ffffff, -2px 2px 0px #ffffff, 2px -2px 0px #ffffff, 2px 0px 0px #ffffff, -2px 0px 0px #ffffff, 0px 2px 0px #ffffff, 0px -2px 0px #ffffff;

このコードは、影を斜めに配置し、角のガタつきを緩和します。適切な影の位置は、デザインや要件によって異なる場合がありますので、必要に応じて微調整してください。

投稿2024/02/08 06:15

shoshinsha123

総合スコア213

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

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

manmaru

2024/02/08 06:41

迅速に回答ありがとうございます。試してみましたがガタツキは解決できませんでした。。 ここに画像添付ができないようなのでお見せすることができないのですがmm 外線がほそくなった分多少ガタツキは見えづらくなりましたが、 ガタツキの度合いとしては変わらないような状況です。。 頂いた改善コードを元に調整ためしてみます!ありがとうございました!!
guest

0

ベストアンサー

投稿2024/02/08 09:47

Lhankor_Mhy

総合スコア36046

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

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

manmaru

2024/02/08 09:59

回答ありがとうございます。 試したところ問題が解決しました! ベストアンサーに選ばせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問