よろしくお願いします。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で質問しましょう!
似たような質問が見つかりました
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP SQLとPHPの連結方法がわからないのでアドバイスお願い致します 1 2022/07/12 12:16
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
番号付きリスト(<Ol><Li>・・...
-
リストマーカーをボックス内に...
-
横並びのボタンの背景を片方だ...
-
<ul><li></li></ul>にするメリ...
-
HTML5のfooterに見出しを付けて...
-
リストの数字のフォントサイズ...
-
タイトルの横にサブタイトルが並ぶ
-
透明のボックスにリンクを貼りたい
-
ドロップダウンの残像
-
ieでのみCSSのcontentが効かない
-
<table>の高さ固定。情報増加時...
-
画像にリンクを張ると画像がず...
-
画像を形そのままで横に並べたい
-
なぜ?マウスオーバーで1pt位置...
-
html/cssの、navを2段にする...
-
CSSで菱形の画像サムネイルを表...
-
html <ul></ul>の並びで一行空...
-
CSS リスト 外枠から文字と画...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
<table>の高さ固定。情報増加時...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
CSSでつくったメニューのアニメ...
-
htmlの<ol>タグで、数字などを...
-
ページを開いているときのリン...
-
リンク文字同士の間隔を開ける...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
divタグ内のコンテンツが重なっ...
-
HTMLで組織図を作成する方法
-
ulとliで囲った文字の一部を変...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像にリンクを張ると画像がず...
おすすめ情報