HTML内のテキスト部分のみマーカーを反映するには、どうしたら良いでしょうか？

前提・実現したいこと

最近HTMLの学習を始めたばかりの者です
やりたい事は、CSSでテキスト部分のみマーカーをつけたく、
ネットで検索してパソコンで作成してして実行してみた結果、
テキストのみならず空白の部分までマーカーついてしまいました

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML、CSS（HTML内に記入）
ソースコード

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width20,height=200" /> <title>トライ</title> <style> h3{text-align:center background: linear-gradient(transparent 0%, #c1e0ff 0%); font-weight: bold; } </style> </head> <body>

<h3>☆リンゴ☆</h3>

</body> </html> ※↑のコードですとテキストのみならず全体的（左右の空白部分も）マーカー　ついてしまい、試行錯誤した結果以下のようにすることで全体マーカーは回避できましたが　本来求めている物は**☆の部分も含めたテキストのみがマーカー**したいのです <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width20,height=200" /> <title>トライ</title> <link rel="stylesheet" href="text78.css" /> <style> h3{text-align:center} #kawaru{

background: linear-gradient(transparent 0%, #c1e0ff 0%);
font-weight: bold; }
</style>
<h3>☆**<span id=kawaru>リンゴ</span>**☆</h3>

</body> </html> ### 試したこと複数のサイトを参照し、実行してみたけど改善せず

補足情報（FW/ツールのバージョンなど）

Windows10
Microsoft Edge
メモ帳
を使用してます
初心者な者で説明が足りないところがあったら申し訳ありません
どうぞ宜しくお願い致します。

kei344

2020/01/09 14:06

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

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

回答2件

☆の部分も含めて<span>で囲めば大丈夫です。

<h3><span id=kawaru>☆リンゴ☆</span></h3>

投稿2020/01/09 12:53

編集2020/01/09 12:54

H40831

総合スコア973

Beginner27

2020/01/09 13:23

色々質問の際にミスがあったのに質問の意図を読み取って頂きありがとうございます試した結果思った通りになりました素早い回答ありがとうございました

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

ベストアンサー

H3要素はブロック要素なので親の幅一杯に広がります。
display: inline-block;を設定することで、ブロック要素の性質を残しながら幅を中身の幅にできます。

css
1h3 {
2  display: inline-block;
3  text-align: center;
4  background: linear-gradient(transparent 0%, #c1e0ff 0%);
5  font-weight: bold;
6}

参考リンク
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

追記

h3要素をセンタリングしたい場合は、下記のように囲むタグを追加することになりますね。

html
1<div class="wrapper"><h3>☆リンゴ☆</h3></div>

css
1.wrapper {
2  text-align: center;
3}
4h3 {
5  display: inline-block;
6  background: linear-gradient(transparent 0%, #c1e0ff 0%);
7  font-weight: bold;
8}

投稿2020/01/09 12:56

編集2020/01/09 13:30

hatena19

総合スコア33699

Beginner27

2020/01/09 13:23

色々質問の際にミスがあったのに質問の意図を読み取って頂きありがとうございます素早い回答ありがとうございました試した結果ですがｄisplay: inline-block;を付け加えた結果何も表示されなくなってしまいました度々質問して申し訳ないのですが、原因が分かりましたらお願いいたします H3要素はブロック要素なので親の幅一杯に広がるって初めて知りました本当に勉強になります。