HTMLとCSSについて

閲覧ありがとうございます。HTMLとCSSの初心者です。
htmlファイルとsccファイルを使って下記のように表示されるウェブサイトを作成したいのですが、
文字の周りの色のデザインがうまく作れません。どなたかご助言を頂けないでしょうか。
ご回答、おまちしております。

おはよう　　(←文字周辺は黄色)
こんにちは　(←文字周辺はピンク色)
さようなら　おやすみ　(←特に設定はなし)

質問者からの補足コメント

• sccファイルではなく、cssファイルです。大変失礼しました。

    補足日時：2022/09/12 15:55

• 具体例で述べて頂いたものだと、一番上が一番近いです。「こんにちは」の文字の部分が黒でしたら
  もう完璧です。

  No.1の回答に寄せられた補足コメントです。 補足日時：2022/09/12 16:17

No.2 ベストアンサー 回答者： t_fumiaki 回答日時： 2022/09/12 17:03

文字の<p>に対応するcssに追加するのが良いけど、それだと、おはよう、こんにちは、さよなら、おやすみ、が全部一緒になってしまうから、文字毎に分ける方がベター。

クラス指定をする。

以下は例
<div>
<p class="p1">おはよう</p>
</div>

<div>
<p class="p2">こんにちは</p>
</div>
・・

css部分もクラスセレクタで記述
.p1{
width:70%;height:50px;
text-align:center;
background-color:#ffff00;
}

.p2{
width:70%;height:50px;
text-align:center;
background-color:#99ffff;
}

こうやれば、文字毎に色・背景・高さ・配置が別々に可能になる。

この回答へのお礼

なるほどです。いろいろありがとうございました。

お礼日時：2022/09/12 17:10

No.1 回答者： t_fumiaki 回答日時： 2022/09/12 16:10

「文字の周り」と言う言い方がアイマイだなぁ。

文字の背景なのか、文字の縁取りや影なのか・・・・。
説明難しいなら絵で説明するとか・・・・。

下図の上から
・背景
・縁取り
・影

この回答へのお礼

https://saruwakakun.com/wp-content/uploads/2017/ …

すみません。上のリンクの画像の「美しい見出しのデザイン」の部分のように作りたいです。文字の色は黒のままで、他の色で周囲を満遍なく塗りきっている？みたいな感じです。説明不足でしたらごめんなさい。

お礼日時：2022/09/12 16:16