よろしくお願いします。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も見ています
-
家の中でのこだわりスペースはどこですか?
自分の家で快適に過ごすために工夫しているスペースはありますか? 例)ベランダでお茶を飲むためのカフェテーブル ゲーミングに特化したこだわりのPCスペース
-
これ何て呼びますか
あなたのお住いの地域で、これ、何て呼びますか?
-
【お題】引っかけ問題(締め切り10月27日(日)23時)
【大喜利】 「日本で一番高い山は富士山……ですが!」から始まった、それは当てられるわけ無いだろ!と思ったクイズの問題
-
【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
【お題】 ・買ったばかりの自転車を分解してひと言
-
ハマっている「お菓子」を教えて!
この世には、おいしいお菓子がありすぎて……。 次何を食べたらいいか迷っています。 みなさんが今、ハマっている「お菓子」を教えてください!
-
htmlの<ol>タグで、数字などを太字にすることはできますか?
HTML・CSS
-
html <li>の中の文字一部に色を付けたい
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html <li>の中の文字一部に色を...
-
HTMLもしくはCSSのULでリンクを...
-
リンク文字同士の間隔を開ける...
-
iPhoneでのナビゲーションバー...
-
CSS 画像横に改行があるテキス...
-
横並びのメニューにならない
-
HTMLで組織図を作成する方法
-
Tableの1セル内に画像・テキス...
-
タイトルの横にサブタイトルが並ぶ
-
箇条書きがずれて表示されてし...
-
このようなcssの作り方を教えて...
-
アコーディオンメニューがかく...
-
liタグの左寄せ方法を教えてく...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
個別にリンクの色を変える方法
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
Firefoxで一番下のstickyが上に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
ulタグやliタグの中でbrタグ...
-
liタグの中に<p>タグやら<dl>を...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
HTMLで組織図を作成する方法
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
番号付きリスト(<Ol><Li>・・...
-
<table>の高さ固定。情報増加時...
-
ol要素の番号とリスト項目の離...
-
htmlの<ol>タグで、数字などを...
-
html <ul></ul>の並びで一行空...
-
divタグ内のコンテンツが重なっ...
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
文法チェックの<A>と</A>の間が...
-
jQuery-もっと見るボタンをスマ...
-
テーブル内のプルダウンの下に...
おすすめ情報