一つの文章に複数の装飾をしたい

前提

現在独学でhtml、cssでサイトを作成しています。
コードを書く際一つの行に復習の装飾をしたい場合、一つ一つCSSを書いているのでとても長くなってしまいます。

実現したいこと

タグの基礎がわかっていないのが原因なのですが…
文の途中でサイズを変える、フォントを変える、色を変えると複数ある場合どうタグをつければいいのかわかりません。

試したこと

1つだとspanを使っているのですが、それ以上の場合はどうなるのでしょうか。

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

回答1件

ベストアンサー

もうちょっと具体的に要件記載してもらった方が具体的に答えられるのですが、、

それぞれspanで囲うことになるかと思います。
ただcssのclassは1要素に複数指定できるので、例えば「色」「サイズ」という装飾が複数ある場合、
1つのclassに2つの要件を書くのではなく、2つのclassを1つのタグに入れた方が使いまわしもきくようになると思います。

CSS
1.red{
2 color:red;
3}
4.blue{
5 color:blue;
6}
7.yellow{
8 color:yellow;
9}
10.s10{
11 font-size:120px;
12}
13.s12{
14 font-size:12px;
15}
16.s16{
17 font-size:16px;
18}
19

HTML
1<p class="s12 blue">ああ<span class="red">あ</span><span class="red s16">あ<span class="s10">あ</span>あ</span><span class="yellow">あ</span></p>
2
3

投稿2022/09/18 02:51

編集2022/09/18 04:41

m.ts10806

総合スコア80854

sanoz

2022/09/18 03:23

m.ts10806さん、ありがとうございます。例文：　定期購読　2000円（初回無料）定期購読と（初回無料）は同じフォントだけど、フォントサイズが20と15 2000円はフォントの色が赤、2000はフォントサイズが30で他とは違うフォント円はフォントサイズが25 としたいです。最初の<span>でスペースを開けて複数つけられるのはわかるのですが、複数つけると</span>の方がどこを基準に反映されるのかが理解できません。 htmlを書く時にどの順番でタグを追加していけばいいのでしょうか… わかりずらくて申し訳ありません。