
よろしくお願いします。ulで囲んだliの中の一部の文字色を
変えたいのですが、どのようにすれば変えられますでしょうか?
ulの中では<p>や<span>は使えないそうで、どうして良いのか方法が分かりません。
ご指導の程よろしくお願いします。
下記のホゲホゲと、パソコンの文字色を赤色で太字にしたいと考えております。
よろしくお願いします。
<ul class="ultest">
<li>テストテスト<br />ホゲホゲ</li>
<li>インターネット</li>
<li>パソコン</li>
<li>リンク</li>
</ul>
No.4ベストアンサー
- 回答日時:
既出の回答と一部被りますが…
> 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
- 回答日時:
ulやolの直下にはliしか書けませんが、liのなかには実在するもの
なら何でも書けますよ。さっきの質問で回答した通り、「HTMLには
<br />なんて実在しない」だけです。
この回答への補足
ご回答ありがとう御座いました。
よろしければ、再度ご質問させていただきたいのですが、<br />は使用できないということでしょうか?
先ほど、htmlチェッカーを使いulの中に記述した<br />を削除してチェッカーにかけたのですが、一部のulに以下のようにエラーが出てしまいます。
<ul>〜</ul> 内に普通のテキストを書くことはできません。 → 解説 73
よろしければご指導をお願い致します。
何度もすいません。
よろしくお願いします。
No.2
- 回答日時:
<li>の中で<p>も<span>を使えますよ。
<li>テストテスト<br /><span class="red">ホゲホゲ</span></li>
<li class="red">パソコン</li>
.red { color: red; font-weight: bold; }
No.1
- 回答日時:
CSSの適当な記述でcolorとboldを作り囲めば良いだけです
例
abc {
color: #ff0000;
font-weight: bold;
}
HTMLないに記述するだけでも問題有りません
『小さな親切大きなお世話をお届けします』
from mama
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ulタグやliタグの中でbrタグ...
-
番号付きリスト(<Ol><Li>・・...
-
header部分とnaviの位置の調整...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
display:table;を多段表示させたい
-
円形の配置にするコーディング...
-
画像にリンクを張ると画像がず...
-
list-style-type部分だけ大きく...
-
CSS質問:大手サイトを見ると何...
-
「olタグ」内に「hタグ要素」...
-
カーソルが画面端に来たとき横...
-
ul li を使ったリストを作りた...
-
レスポンシブWebデザインでリン...
-
ol、liをスタイルシートで中央寄せ
-
【ヒトの神秘】美男美女から何...
-
含む含まないという概念自体の...
-
htmlのolやulなどlistにtitleや...
-
表示倍率を変えるとレイアウト...
-
複数の画像にメニュー表示させたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
html/cssの、navを2段にする...
-
複数行にまたがる括弧を表示し...
-
ulタグやliタグの中でbrタグ...
-
リストマーカーをボックス内に...
-
divタグ内のコンテンツが重なっ...
-
ページを開いているときのリン...
-
画像をレスポンシブだと 二つず...
-
( html) 位置指定方法を教えて...
-
htmlの<ol>タグで、数字などを...
-
Jquery アコーディオンメニュー...
-
テーブル内のプルダウンの下に...
-
リストの数字のフォントサイズ...
-
list-style-type部分だけ大きく...
-
HTMLでメニューをリストで書き...
-
番号付きリスト(<Ol><Li>・・...
-
html <ul></ul>の並びで一行空...
-
線をアレンジしたい。
-
HTMLで組織図を作成する方法
-
リスト(ul / li)タグの左イン...
おすすめ情報