ulとliで囲った文字の一部を変える方法

質問

よろしくお願いします。ulで囲んだliの中の一部の文字色を
変えたいのですが、どのようにすれば変えられますでしょうか？

ulの中では<p>や<span>は使えないそうで、どうして良いのか方法が分かりません。
ご指導の程よろしくお願いします。

下記のホゲホゲと、パソコンの文字色を赤色で太字にしたいと考えております。
よろしくお願いします。

<ul class="ultest">
<li>テストテスト<br />ホゲホゲ</li>
<li>インターネット</li>
<li>パソコン</li>
<li>リンク</li>
</ul>

回答No.4

abril · ベストアンサー

既出の回答と一部被りますが…

> ulの中では<p>や<span>は使えないそうで、

違います。No.3様ご指摘の通り、「ulの"直接の"子要素はliのみ許可」なのであり、「liは子要素としてインライン要素もブロック要素も持てる（文書構造上あまりお目にかかる機会がありませんが、テーブルでも内包できます）」のです。
つまり：
【誤】
<ul class="ultest">
<p>hogehoge1</p>
<li>hogehoge2</li>
<span>hogehoge3</span>
</ul>
【正】
<ul class="ultest">
<li>hoge<p>hoge1</p></li>
<li>hogehoge2</li>
<li><span>hogehoge3</span></li>
</ul>
です。

> どうして良いのか方法が分かりません。

上記の様なごくごく基礎的なHTMLの文法をきちんと理解していれば何も迷う事はなかったわけですね。
＃最近頻繁に質問されている様ですが、いずれも上記の様な「理屈」がわかっていない事による混乱の様ですので、一度ちゃんと時間をとってHTMLの文法の解説をサイトでも本でも良いから読んで基礎的な事を理解された方が宜しいかと存じます。

> 下記のホゲホゲと、パソコンの文字色を赤色で太字にしたいと考えております。

<ul class="ultest">～</ul>のリストアイテム中、「強調したい箇所」が「必ず"赤色で太字"というスタイルになる」という論理構造なのであれば、CSSでのセレクタをその様に記述すれば、別途class属性などを設ける必要もなくなります。

【HTML】
<ul class="ultest">
<li>テストテスト<br /><em>ホゲホゲ</em></li>
<li>インターネット</li>
<li><em>パソコン</em></li>
<li>リンク</li>
</ul>
【css】
ul.ultest li em {
font-style: normal;
font-weight: bold;
color: #f00;
}
※emはstrongでも構いません。

回答No.3

grumpy_the_dwarf

ulやolの直下にはliしか書けませんが、liのなかには実在するもの
なら何でも書けますよ。さっきの質問で回答した通り、「HTMLには
<br />なんて実在しない」だけです。

補足

ご回答ありがとう御座いました。
よろしければ、再度ご質問させていただきたいのですが、<br />は使用できないということでしょうか？

先ほど、htmlチェッカーを使いulの中に記述した<br />を削除してチェッカーにかけたのですが、一部のulに以下のようにエラーが出てしまいます。
<ul>〜</ul> 内に普通のテキストを書くことはできません。 → 解説 73

よろしければご指導をお願い致します。
何度もすいません。
よろしくお願いします。

回答No.2

xs200

<li>の中で<p>も<span>を使えますよ。

<li>テストテスト<br /><span class="red">ホゲホゲ</span></li>
<li class="red">パソコン</li>

.red { color: red; font-weight: bold; }

回答No.1

Ehimeno

CSSの適当な記述でcolorとboldを作り囲めば良いだけです
例
abc {
color: #ff0000;
font-weight: bold;
}

HTMLないに記述するだけでも問題有りません

『小さな親切大きなお世話をお届けします』
from mama