
よろしくお願いします。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も見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLについて
-
複数の文字を一度に置換ってで...
-
ulタグやliタグの中でbrタグ...
-
イメージマップと画像のスライ...
-
<li>で改行する横並びのメニュー
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
番号付きリスト(<Ol><Li>・・...
-
CSSのセレクタの指定方法
-
CSSでメニューボタンを横一列に...
-
divタグ内のコンテンツが重なっ...
-
<div>と<div>の隙間を無くす方法
-
疑似クラス :activeが効きません
-
リストマーカーをボックス内に...
-
文法チェックの<A>と</A>の間が...
-
UL OL タグの使い方
-
画像にリンクを張ると画像がず...
-
li 長さ指定
-
ol要素の番号とリスト項目の離...
-
文字の先頭につけるアイコン
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
ulタグやliタグの中でbrタグ...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
HTMLで組織図を作成する方法
-
list-style-type部分だけ大きく...
-
htmlの<ol>タグで、数字などを...
-
テーブル内のプルダウンの下に...
-
html <li>の中の文字一部に色を...
-
<ul><li></li></ul>にするメリ...
-
番号付きリスト(<Ol><Li>・・...
-
divタグ内のコンテンツが重なっ...
-
リストの数字のフォントサイズ...
-
レスポンシブWebデザインでリン...
-
背景色を行ごとに変えるには?
-
Dreamweaverで、ul要素の下に写...
-
ページを開いているときのリン...
おすすめ情報