ベストアンサー

Listの中に<br>を入れてはダメなのですか？

2014/10/03 02:53

見映えが良いようにとグレープの後ろに<br>を入れました。 <ul > <li><a href="apple.html">アップル</a></li> <li><a href="orange.html">オレンジ</a></li> <li><a href="grape.html">グレープ</a></li><br> <li><a href="index.html">TOP</a></li> </ul> これで構文チェックをかけたら致命的エラーになりました。 Listの中の<br>ってそんなに罪が重いのですか？

slime_bess
お礼率79% (162/203)

HTML
回答数6
ありがとう数4

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/10/03 09:02 回答No.3

なぜ仕様書読まない!!・・　反対車線を走ったら法律違反と言われた。「反対車線走行ってそんなに罪が重いのですか？」と言われても順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.2 ) <!ELEMENT UL - - (LI)+ -- unordered list --> <!ELEMENT OL - - (LI)+ -- ordered list --> 　olもulも(LI)+ すなわちLIが一個以上(+) と書いてあり、それ以外は入れられません。　もし存在するとブラウザによって解釈は異なりますが、そこに<li></li>が書き漏らされていると判断して、 <li></l><br> <li></li> ↓ <li></li> <li><br></li> <li></li> と無理やり解釈しなければなりません。当然ブラウザによってこの処理は違う可能性がありますから、表示が異なる結果を招きます。 <div class="nav"> 　<ul> 　　<li><a href="apple.html">アップル</a></li> 　　<li><a href="orange.html">オレンジ</a></li> 　　<li><a href="grape.html">グレープ</a></li> 　　<li><a href="index.html">TOP</a></li> 　</ul> </nav> てしたら、 <div class="nav"> 　<ul> 　　<li><a href="apple.html">アップル</a></li> 　　<li><a href="orange.html">オレンジ</a></li> 　　<li style="margin-bottom:1em;"><a href="grape.html">グレープ</a></li> 　　<li><a href="index.html">TOP</a></li> 　</ul> </div> とか・・ div.nav ul li:last-child{margin:top:1em;} これだと項目がいくつ増えても最後の項目だけ行間が開く。

質問者

お礼 2014/10/03 12:33

今日は。エラーの説明らしきものは出たのですが、よく理解できなかったのでここで質問しました。お手数をおかけしたようで済みません。 last-childという方法もあるんですね。やっぱりここで聞いて良かったです。

その他の回答 (5)

root8110
ベストアンサー率30% (6/20)

2014/10/04 19:34 回答No.6

No.5です。 <li><a href="grape.html">グレープ</a><br></li> は、エラーにならないだけでスペースは空かない。 <br><br>と重ねると空くけど見栄えのために<br>を重ねるのは良くないので、CSSかULを分けるかしてください。

root8110
ベストアンサー率30% (6/20)

2014/10/04 19:21 回答No.5

<li><a href="grape.html">グレープ</a><br></li> と、<li></li>の中に<br>を入れたらエラーにならないはず。でも、見映え目的ならCSSで指定するのが推奨されます。また、TOPだけ種類が違うので、TOPだけ別のULにすれば自然と改行も入ってそちらの方がいいかもしれません。

tracer
ベストアンサー率41% (255/621)

2014/10/03 20:43 回答No.4

罪ってわけじゃないけど、単なる文法ミスですね。 <body>の中に<html>が入らないのと同じで、単にそういうルールだからです。

質問者

お礼 2014/10/15 05:32

ご回答有り難うございます。１０段階で１０がついていたので単なる致命的エラーのようです。

hitomura
ベストアンサー率48% (325/664)

2014/10/03 06:06 回答No.2

「CSS を使ってデザインしてください」と言うだけなのは何なので、実際に1行分の間をあけてみました。いつもきっちりとした回答をなさる方からは「ちゃんとした HTML を書け」と言われそうだけど、ちゃんとしたものを書いた結果内容が長くなり伝えたいポイントがわかりづらくなるよりも、質問者が知りたい要点だけを伝える最低限のものを書いた方がいいのではという考えでのサンプルなのでご容赦願います。また質問者様におかれては、これはあくまでも簡易なサンプルで、自身のサイトに使用するにはこれをとっかかりにしていろいろと調べる必要があることをご理解願います。 <html> <head> <style> li:nth-last-child(1) { margin-top:1em; } </style> </head> <body> <ul> <li><a href="apple.html">アップル</a></li> <li><a href="orange.html">オレンジ</a></li> <li><a href="grape.html">グレープ</a></li> <li><a href="index.html">TOP</a></li> </ul> </body> </html>

質問者

お礼 2014/10/03 12:30

ご回答有り難うございます。サンプルまでつけて頂き助かりました。 nth-last-child(1)という発想は地力では絶対に浮かびません。

hitomura
ベストアンサー率48% (325/664)

2014/10/03 04:56 回答No.1

ul の直下には li しか入れることができません。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul 「見映えが良いように」というのなら CSS を使ってデザインしてください。

質問者

お礼 2014/10/03 12:25

ご回答有り難うございます。やはりダメなんですね。ＣＳＳを使ってやってみます。

関連するQ&A

<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
javascript(DOM)でIDとテキストノードを取得する方法
下記のことをDOMを使ってやりたいと思っているのですが、ちょっとできないので教えていただきたいです。［HTML内での記述］ <h2 id="apple">りんご</h2> <p>...</p> <h2 id="grape">ぶどう</h2> <p>...</p> <h2 id="orange">みかん</h2> <p>...</p> <h2 id="peach">もも</h2> <p>...</p> 上記HTMLから<h2>内のid名とテキストを取得して、下記のようなリストにしたいです。（<p>...</p>の部分はどうでもよいです。） <ul> <li><a href="#apple">りんご</a></li> <li><a href="#grape">ぶどう</a></li> <li><a href="#orange">みかん</a></li> <li><a href="#peach">もも</a></li> </ul> 要するに、見出しを取得してページ内リンクを作りたいのです。 DOMで、getElementByIdとか使って、、と何となくは分かるのですが、完成させるまでには至っていません。ご教授いただければと思います。
- ベストアンサー
- JavaScript
リンク中の<br>の問題は？
こんにちは。html5でウェブサイトを構築している者です。毎回みなさんのご協力が有り大変嬉しく思います。今回も解決出来ない質問があります、質問させて下さい。 <a href="～">いちご<br>(ストロベリー)</a> <a href="～">すいか<br>(ウォーターメロン)</a> <a href="～">みかん<br>(オレンジ)</a> <a href="～">りんご<br>(アップル)</a> ・・・という下層へリンクを貼っているページがあります。html5ということで<nav>を利用しても面白いかなと考えているのですが、問題は文中の改行<br>です。スタイリングのために<br>を使ってはいけないとはご教示頂けたのですが、今回、例えば”りんご”をクリックしても”アップル”をクリックしても同じページに辿り着きたいのです。ですが、スタイリング上、下記のように改行したいのです。ーーーーーーーーーーーーーーーーーーいちご (ストロベリー) ーーーーーーーーーーーーーーーーーーすいか (ウォーターメロン) ーーーーーーーーーーーーーーーーーーみかん (オレンジ) ーーーーーーーーーーーーーーーーーーりんご (アップル) ーーーーーーーーーーーーーーーーーー・・・しかも今回は50音順になっています。<nav>を使うなら個々は<li>でいいのか？というのもあります。みなさま、何卒よろしくお願いいたします。
- ベストアンサー
- HTML
cssで作成する多階層リスト
こんにちは。 cssで・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい以上のように作成したいのですが、そのcssの記述がわかりません。色々サイトで探しましたが見つからず。。。どなたか教えてください。 ◆HTML <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>多階層</title> </head> <body> <br> <div id="MainDiv"> <div id="gnav"> <ul> <li><a href="#">テスト(1)</a> <ul> <li><a href="#">てすと(1)-1</a> <ul> <li><a href="#">ＴＥＳＴ(1)-1-1</a> <ul> <li><a href="#">テスト(1)-1-1-1</a> <ul> <li><a href="#">TEST(1)-1-1-1-1</a></li> <li><a href="#">TEST(1)-1-1-1-2</a></li> <li><a href="#">TEST(1)-1-1-1-3</a></li> <li><a href="#">TEST(1)-1-1-1-4</a></li> <li><a href="#">TEST(1)-1-1-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-1-2</a> <ul> <li><a href="#">TEST(1)-1-1-2-1</a></li> <li><a href="#">TEST(1)-1-1-2-2</a></li> <li><a href="#">TEST(1)-1-1-2-3</a></li> <li><a href="#">TEST(1)-1-1-2-4</a></li> <li><a href="#">TEST(1)-1-1-2-5</a></li> </ul> </li> </ul> </li> <li><a href="#">ＴＥＳＴ(1)-1-2</a> <ul> <li><a href="#">テスト(1)-1-2-1</a> <ul> <li><a href="#">TEST(1)-1-2-1-1</a></li> <li><a href="#">TEST(1)-1-2-1-2</a></li> <li><a href="#">TEST(1)-1-2-1-3</a></li> <li><a href="#">TEST(1)-1-2-1-4</a></li> <li><a href="#">TEST(1)-1-2-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-2-2</a> <ul> <li><a href="#">TEST(1)-1-2-2-1</a></li> <li><a href="#">TEST(1)-1-2-2-2</a></li> <li><a href="#">TEST(1)-1-2-2-3</a></li> <li><a href="#">TEST(1)-1-2-2-4</a></li> <li><a href="#">TEST(1)-1-2-2-5</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">てすと(1)-2</a></li> <li><a href="#">てすと(1)-3</a></li> <li><a href="#">てすと(1)-4</a></li> </ul> </li> <li><a href="#">テスト(2)</a> </li> </ul> </div> </div> </body> </html> ◆CSS body { font-size: 13px; font-family: "Meiryo UI", "ＭＳＰゴシック", "MS PGothic", "MS UI Gothic", "ＭＳゴシック", "ＭＳ明朝"; } #MainDiv { overflow: hidden; width: 1000px; margin: 0; } /* 全角カタカナ階層 */ #gnav { float: left; width: 150px; height: 200px; } #gnav ul { margin: 0; padding: 0; border-top: 1px #FFFFFF solid; list-style-type: none; } #gnav ul li { width: 150px; height: 24px; text-align: center; background: #c8d6e8; border-bottom: 1px #FFFFFF solid; } #gnav ul li a { display: block; width: 150px; height: 24px; color: #000000; font-size: 100%; line-height: 1.6; background: #6495ed; text-decoration: none; } /* ※．子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */ #gnav ul li:hover > a { background: #ffa500; } /* 全角ひらがな階層 */ #gnav ul li ul { display: none; list-style-type: none; } #gnav ul li:hover ul { display: block; position: relative; top: -25px; left: 152px; width: 150px; height: 25px; }
- 締切済み
- HTML
フロートしたリストのセンタリング
勉強が足りなくて済みません！教えて下さい。以下の通り、リストをfloatして横1列に並べたところ、どうしても画面中央に表示することが出来ません。divで囲ってそれをtext-align:center;しても駄目でした。解決策をお教え下さい。宜しくお願いします。 html------------------------------- <ul id="navi_footer"> <li><a href="#">ホーム</a></li> <li><a href="specialroom.htm">客　室</a></li> <li><a href="privatespa.htm">貸切温水プール</a></li> <li><a href="privatespa2.htm">貸切露天風呂</a></li> <li><a href="reservation.htm">客室料金</a></li> <li><a href="ryori.htm">料　理</a></li> <li><a href="kinen.htm">記念日</a>｜</li> <li><a href="interior.htm">インテリア</a></li> <li><a href="gaikan.htm">外　観</a></li> <li><a href="access.htm">アクセス</a></li> <li><a href="info.html">特　典</a></li> </ul><br class="clear"> css------------------------------- ul#navi_footer { text-align: center; margin: auto;} ul#navi_footer li { float: left; list-style-type: none; font-size: x-small;} br.clear { clear: both;}
- ベストアンサー
- CSS
リストのCSSでのflort時の背景
ulに幅と背景色を設定しているのですが、リストを横に並べるために、floatさせると希望の表示になりません。リストを横に並べて、かつ、ulで指定している幅と背景色にしたいのですが、どのようにすればよいでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu {background-color: red;width: 1024px;} ul#menu li {float: left; width: 100px;} </style> <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> <li><a href="#">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
リストの左余白の削除方法
<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。どなたかご教授頂けませんでしょうか？ =>CSS記述<= ul li { list-style: none; margin: 0px; padding: 0px;} =>HTML記述<= <ul> <li><a href="#">サンプル</a></li> <li><a href="#">サンプル</a></li> <li><a href="#">サンプル</a></li> <li><a href="#">サンプル</a></li> </ul>
- ベストアンサー
- CSS
cssで、入れ子になったリストに別のデザインを適用したくてつまづいてい
cssで、入れ子になったリストに別のデザインを適用したくてつまづいています。 ■ソース <ul id="column-topmenu"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a> 　　　　<ul class="sub"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> </ul> </li> <li><a href="#">●●●</a> </li> </ul> ■CSS（親リストの指定） ul#column-topmenu li { padding: 15px 20px 15px 25px; list-style:none; background: url(../img/title2_bg.gif) no-repeat; font-size: 17px; line-height: 1.1; } 親要素のリストには、背景画像をつけるのですが、入れ子のほうには背景画像なしで、テキストを整形して並べるだけです。システムで生成する関係上、<li>にはIDを振ることができません。 <ul>は可能です。入れ子のulには、subとつけて、試行錯誤しているのですが、どうしても背景画像が反映してしまって・・・。ご教示ください。よろしくお願いします。
- 締切済み
- HTML
Jqueryでリストのスクロール
<ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行がリストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせるにはどのようにすればよろしいでしょうか。【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
css リストを右揃えにできません。。。
非常にシンプルなことができず、頭を抱えています。縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、そのボックスの右にピッタリ並べたいのですが …　text-align、margin　二通りの指定で試したものの左揃えになってしまいます（Mac　safari firefox）。なんで～～？？　どなたかドウゾ助けてください。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>
- ベストアンサー
- HTML

Listの中に<br>を入れてはダメなのですか？