- ベストアンサー
ulとliで囲った文字の一部を変える方法
よろしくお願いします。ulで囲んだliの中の一部の文字色を 変えたいのですが、どのようにすれば変えられますでしょうか? ulの中では<p>や<span>は使えないそうで、どうして良いのか方法が分かりません。 ご指導の程よろしくお願いします。 下記のホゲホゲと、パソコンの文字色を赤色で太字にしたいと考えております。 よろしくお願いします。 <ul class="ultest"> <li>テストテスト<br />ホゲホゲ</li> <li>インターネット</li> <li>パソコン</li> <li>リンク</li> </ul>
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
- xs200
- ベストアンサー率47% (559/1173)
- Ehimeno
- ベストアンサー率12% (21/168)
関連するQ&A
- ulやliの記述方法について
よろしくお願いします。 まず、htmlに以下の記述をしました。 <ul class="ulfont"> <li>ああああああああああああああああああああああ<br />いいいいいいいいいいいいいいいい</li> <li>うううううううううううううううううううううう<strong>おおおおお</strong>かかか・・</li> <li>ががががががが<strong>ほげほげ</strong>ののののの!!</li> </ul> htmlチエッカーを実行したところ以下のように警告が出てしまいました <ul>〜</ul> 内に普通のテキストを書くことはできません。 何が原因なのかよくわかりません。 ご指導の程よろしくお願いします。
- ベストアンサー
- HTML
- <ul><li></li></ul>にするメリットって?
<ul><li></li></ul>にするメリットって? こんにちは。お世話になっています。 色んな方のソースを見ていると、 例えば 「ABOUT」「SERVICE」「COMPANY」・・・という項目を並べる際に <ul> <li id="about">ABOUT</li> <li id="service">SERVICE</li> <li id="company">COMPANY</li> </ul> という風にリスト化する方が多いと思うのですが中には <div id="contents"> <div class="about">ABOUT</div> <div class="service">SERVISE</service> (略) </div> という風にdivで括る方もいると思います。 (※私はdivで括るタイプです。) また。 <dl id="contents"> <dt class="about">ABOUT</dt> <dt class="service">SERVICE</dt> (略) </dl> という風に<dl><dt></dt></dl>括る方もいると思います。 それぞれのメリットってなんでしょうか? 特に<ul><li></li></ul>という風に括ってる方がおおいと思うので <ul><li></li></ul>にするメリットが知りたいです。
- 締切済み
- HTML
- ul liのclass指定について
表示が上手くいかないのでお助け下さい。 ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、 なぜかclass指定をすると画像が消えてしまいます。 class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。 どなたか教えて頂けないでしょうか? また、申し訳ありませんがとりあえず表示されれば良いだけなので htmlやcssの記述に対する細かいツッこみは勘弁して下さい。 宜しくお願いします! 【html】 <div id="side"> <ul id="sidenav"> <li class="a"><a href="test.html">test</a></li> </ul> </div> 【css】 div#side { display: inline; float: left; width: 178px; margin-top: 20px; text-align:center; background:#fff; } div#side ul#sidenav { list-style-type:none; border: none; } div#side ul#sidenav li.a { background:url(../common/side.gif) no-repeat left; background-position: 6px 11px; } div#side li { position:relative; width: 165px; height:40px; padding: 1px; margin: 5px; text-align:left; border: 1px solid #8c8c8c; }
- ベストアンサー
- CSS
- html <ul></ul>の並びで一行空けたい
htmlについて、初歩的かもしれませんが、お伺いします。 現在、<ul><li>を使って、リストを作成しています。 ですが、その途中に一行空けたい部分が何カ所かありまして、 <ul> <li>×××</li> <li>×××</li> <br> <li>×××</li> <li>×××</li> </ul> という感じで、組んでみました。 何の違和感もなく反映されるかと思いましたが、<br>が機能せずに、一行空かずくっついて表示されてしまい、不思議に思っています。 <ul>の中では、brは使えないのでしょうか? それとも、使えるけれど、何か他の要因があると使えなくなってしまうのでしょうか。 htmlは基礎的なことしか存じませんので、詳しい方や思い当たることをご存じの方にお答えいただけると助かります。 宜しくお願いします。
- ベストアンサー
- その他(インターネット・Webサービス)
- html <li>の中の文字一部に色を付けたい
html内でリストを使っています。 一覧の中で一部にだけ文字色を変えたいので、以下のように書いてみました。 <ul> <font color=red><li>AAA</li></font> <li>BBB</li> <li>CCC</li> </ul> ですが、反映されませんでした。 以前、リストの中はタグがあまり使えないと教えていただいたのですが、色も染められないのでしょうか? 変えたい場合は、どのようにすればよいでしょう。 方法をご存じの方は、是非お教えください。 宜しくお願いします。
- ベストアンサー
- HTML
- CSSでUL全体をリンクアクティブにしたい。
いろいろ、試してみたのですが、CSSがわからなくて困っています。 添付したように、縦にリストを並べたボタンを作っています。 赤線枠でくくったようにメニューの一つを全体でリンクでくくりたいのですが、 <ul><a href="aaaa.html"><li><li></a></ul> なんてしてはだめですよね。 今は、青でくくったように画像を除いた部分しかリンクアクティブになりません。 全体をリンクさせるにはどうしたらよいでしょうか。 知識不足と下手な添付でもうしわけありませんが、お助けください。 よろしくお願いします。 <div class="section" id="memu"> <ul> <li id="top1"> <a href="aaaa.html"><span>Aメニュー</span><br /> textAtextAtextAtextAtextAtextAtextAtextA</a></li> </ul> <ul> <li id="top2"> <a href="bbbb.html"><span>Bメニュー</span><br /> textBtextBtextBtextBtextBtextBtextBtextBtextB </a></li> </ul> <ul> <li id="top3"> <a href="cccc.html"><span>Cメニュー</span><br /> textCtextCtextCtextCtextCtextCtextCtextCtextCtextC </a></li> </ul> </div> ■■CSS■■ .section { clear:both; margin:0 auto; padding:0; overflow:hidden; } #index { margin:0 auto; } #index #memu ul { clear:both; display:block; margin:0 0 2px 0; padding:10px 0 10px 0; background:url(../img/top_bg.jpg) repeat-x left bottom; border-top: #CCC solid 0px; overflow:hidden; } #index #memu li { padding:1px 10px 0 100px; } #index #memu li a { display:block; height:59px; padding-bottom:10px; color:#000; overflow:hidden; } /* img画像設定*/ #index #memu #top1 { background:url(../img/top1.jpg) no-repeat 10px 5px; } #index #memu #top2 { background:url(../img/top2.jpg) no-repeat 10px 5px; } #index #memu #top3 { background:url(../img/top3.jpg) no-repeat 10px 5px; } /* リンクの見出し部分*/ #index #memu span { color: #AAA; font-size: 1.5em; font-size: 140%; font-weight: bold; }
- 締切済み
- CSS
- <ul>タグでのリストの使い方
こんばんわ。 すみません。リストをCSSで体裁を整え、ここまでできましたが、各リストの下に、ラインの画像を入れたいのですが、うまくいきません。。 画像を入れるやり方を教えてください~ <tr> <td> <div class="abc"> <ul> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/08/10<br> ○○○○</a></li> </ul> </div> </td> </tr>
- ベストアンサー
- HTML
- IEの崩れ
以下のようにリストタグの途中でbrを入れるとIEだけ崩れます 何かよい方法はないでしょうか? <ul> <li class="first"><span>2011</span></li><!-- --><li><a href="#">2010</a></li><!-- --><li><a href="#">2009</a></li><br /> <li class="first"><span><a href="#">2001</a></span></li><!-- --><li><a href="#">2000</a></li><!-- --><li><a href="#">1999</a></li> </ul>
- ベストアンサー
- CSS
- UL, LIタグでの質問
いつもお世話になっています。 自分では以前から疑問に思いつつも放置していた問題です。 その問題とは、UL,LIタグでツリー表示を行い、 各項目にリンクがあります。その項目の選択位置が 項目の文字の長さによって文字がないところでも選択が出来るのです。 言語仕様であればそれで通すのですが、そういうわけでもなさそうな気配なのでどうにか解決したいと思っています。 ソースは下記のようになっていています。 <nobr><ul> <li id=foldheader><a href="">ZZZZZ</a></li> <ul id=foldinglist style=display:none style=&{head}> <li id=foldend><a href="">XXXXXXX</a></li> <ul id=foldinglist style=display:none style=&{head}> </ul> </ul> </nobr> これでいうと、ZZZZZの文字のちょっと後ろがクリックできて、XXXXXXXが表示されます。 で、XXXXXXXが表示されるとXXXXXXXの長さ+アルファぶんだけ後ろまでZZZZZの後ろに選択できる範囲が広がります。 また、XXXXXXXの前にも選択出来る範囲が出てきます。 これを、純粋に文字の部分だけ選択出来るようにする方法はあるのでしょうか? 以上、よろしくお願いいたします。 ※文字数制限により、開閉のJavaScriptは省略
- ベストアンサー
- HTML
- 画像の下に文字が来ないようにするには
画像の下に文字が来ないようにするにはどうすればいいでしょうか? <li>タグの中に、左に画像、右に文字を改行して表示させたいのですが、 改行すると画像の下に2行目が来てしまいます。 これをを避けるにどうすればいいでしょうか? 下記のコード、すべて思い通りになりません。 <!DOCTYPE html> <html lang="ja"> <head> <title>test</title> </head> <body> <li> <a href="#"> <img src="C:\UsersDesktop\test.jpg"> <span>test</span><br><span>test</span> </a> </li> <li> <a href="#"> <img src="C:\UsersDesktop\test.jpg"> <span>test<br>test</span> </a> </li> <li> <a href="#"> <img src="C:\UsersDesktop\test.jpg"> <p>test<br>test</p> </a> </li> </body> </html>
- ベストアンサー
- HTML
補足
ご回答ありがとう御座いました。 よろしければ、再度ご質問させていただきたいのですが、<br />は使用できないということでしょうか? 先ほど、htmlチェッカーを使いulの中に記述した<br />を削除してチェッカーにかけたのですが、一部のulに以下のようにエラーが出てしまいます。 <ul>〜</ul> 内に普通のテキストを書くことはできません。 → 解説 73 よろしければご指導をお願い致します。 何度もすいません。 よろしくお願いします。