質問: ### 前提・実現したいこと 最近HTMLの学習を始めたばかりの者です やりたい事は、CSSで**テキスト部分のみマーカー**をつけたく、 ネットで検索してパソコンで作成してして実行してみた結果、 テキストのみならず**空白の部分までマーカー**ついてしまいました ### 発生している問題・エラーメッセージ ``` エラーメッセージ ``` ### 該当のソースコード HTML、CSS(HTML内に記入) ソースコード トライ ☆リンゴ☆ ※↑のコードですとテキストのみならず全体的(左右の空白部分も)マーカー ついてしまい、試行錯誤した結果以下のようにすることで全体マーカーは回避できましたが 本来求めている物は**☆の部分も含めたテキストのみがマーカー**したいのです トライ ☆**リンゴ**☆ ### 試したこと 複数のサイトを参照し、実行してみたけど改善せず ### 補足情報(FW/ツールのバージョンなど) Windows10 Microsoft Edge メモ帳 を使用してます 初心者な者で説明が足りないところがあったら申し訳ありません どうぞ宜しくお願い致します。
回答: H3要素はブロック要素なので親の幅一杯に広がります。 `display: inline-block;`を設定することで、ブロック要素の性質を残しながら幅を中身の幅にできます。 ``` h3 { display: inline-block; text-align: center; background: linear-gradient(transparent 0%, #c1e0ff 0%); font-weight: bold; } ``` 参考リンク 【CSS】displayの使い方を総まとめ!inlineやblockの違いは? 追記 h3要素をセンタリングしたい場合は、下記のように囲むタグを追加することになりますね。 ``` ☆リンゴ☆ ``` ``` .wrapper { text-align: center; } h3 { display: inline-block; background: linear-gradient(transparent 0%, #c1e0ff 0%); font-weight: bold; } ```