pタグの文字だけに背景色をつけたい

Question

Pタグの文字部分のみに背景色をつけたいです。
（PC版は実装できていたのですが、SP版ができず、原因がわかりません）

PC→display:flex
SP→flex-direction: columnに変更しました。

<ul>
	<li>
		<img src="img/" alt="イメージ画像">
		<div>
			<p>テキスト</p>
			<div class="hoge">
				<p>ここに背景色をつけたいです</p>
				<p>ここに背景色をつけたいです</p>
			</div>
		</div>
	</li>

@media(max-width:375px){
li{
  flex-direction: column;
}
li > div{
  width: 100%;
  margin: 0 auto;
}
li > div > p:first-of-type{
  font-size: 1.8rem;
  margin-bottom: 6px;
}
li:not(:last-of-type){
  margin-bottom: 56px;
}
li img{
  width: 330px;
  height: 230px;
  margin-bottom: 24px;
  margin: 0 auto 24px;
}
.hoge{
  flex-direction: column;
}
.hoge > p{
  display: inline;
  font-size: 1.2rem;
  background-color: #ccc;
  padding: 0px 10px;
  margin-bottom: 6px;
}

}

Comments

[niconic73027793]

メディアクエリの指定はしていますか？

[ayu_mi]

@media screen and (max-width:375px)
こちらの記述はしています。

[niconic73027793]

提示されたソースに
@media(max-width:375px){
.hoge{
backgroud:#ccc;
}
とか記載がなかったので、 それもソースに書いていただけると回答しやすいかもです。

[ayu_mi]

ご指摘ありがとうございます。
変更いたしました。

[m.ts10806]

実際のコードにない記述はコードブロック内にふくまないでいただけると。
**
↑これ。
たぶんないだろうなとは思うのですが、かといって本当にあったケースもゼロではないので（しかもそれが問題の原因だった）。
見ている人には提示された内容が全てです。
手元で確認する際に勝手に加工はできません。

[ayu_mi]

ご指摘ありがとうございます。
削除しました。
今後気をつけて参ります。

[m.ts10806]

ついてますね。
https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d7cc46d8536f4fb9a3aedf2493b34a37.png
firefoxのレスポンシブデザインモードですが、375以下の場合はちゃんとついてます。

[ayu_mi]

ご確認ありがとうございます。
この際、文字の部分だけに背景色をつけたいのですが、横幅いっぱいに広がってしまいます。
私だけでしょうか？

[m.ts10806]

pではなくspanにするとか。
inlineではなくinline-blockとか？

[ayu_mi]

ご回答ありがとうございます。
どちらもできませんでした。
pの中にspanを入れてみたりもしたのですが、どうしてもpタグに色がついてしまいます。
私の勉強不足もあるかと思います。

[m.ts10806]

いえ、p自体をspanに

[m.ts10806]

そういえば質問タグFlexは本件とは関係なさそうですね。
https://teratail.com/tags/Flex

[ayu_mi]

背景色をつけたい箇所のpをspanにですね。
やってみたのですが、変わりませんでした。

Answer 1

親要素に display: flex; が効いていて、子要素がブロックレベルになっているのかな？
下記の修正をしたらどうなりますか。

.hoge{
/*  flex-direction: column;  削除 */
  display: block; /* 追加 */
}

---

それか、下記のようなことがご希望でしょうか。

            <div class="hoge">
                <p><span>ここに背景色をつけたいです</span></p>
                <p><span>ここに背景色をつけたいです</span></p>
            </div>

.hoge{
  display: flex;
  flex-direction: column;
}
.hoge > p{
  display: inline;
  font-size: 1.2rem;  
  padding: 0px 10px;
  margin-bottom: 6px;
}
.hoge > p > span {
    background-color: #ccc;
}

Codpenサンプル

Comments

[ayu_mi]

ご回答ありがとうございます！

ブロック要素にしたら横並びになってしまい、今回は縦並びにしたかったため、うまくいきませんでした。
言葉不足で申し訳ありません。

spanタグを入れてみましたが、どうしてもpタグいっぱいに色がついてしまいます。
もう少し調べてみようと思います。

[hatena19]

回答したサンプルです。テキストだけに背景色がついているはずです。
https://codepen.io/hatena19/pen/KKXvLMp

提示されていない部分のCSSが影響しているのでしょう。
症状が再現できるコードを提示していただけないと、原因の特定は無理ですね。

[ayu_mi]

ご丁寧にありがとうございます。
そうですね、記述部分以外のコードが影響しているかもしれませんね。
spのみ実装できないというのもおかしいですね。

.hoge{
display: flex;
}
.hoge p{
font-size: 1.2rem;
background-color: #ccc;
padding: 0px 10px;
margin-bottom: 16px;
}
.hoge p:first-of-type{
margin-right: 10px;
}

spanは入れていなかったのですが、こちらの記述でpcの方は背景色がついていました。
ありがとうございます！

[ayu_mi]

お騒がせいたしました。
原因がわかりました。
pc版のcssの記述を継承していたようです。
pタグに#cccを記述していたため、要素いっぱい背景色が広がっていたようです。
どうもありがとうございました！