見映えが良いようにとグレープの後ろにを入れました。アップルオレンジグレープ TOP これで構文チェックをかけたら致命的エラーになりました。 Listの中のってそんなに罪が重いのですか？

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

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

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

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

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

解決済

質問者：slime_bess
質問日時：2014/10/03 02:53
回答数：6件

見映えが良いようにとグレープの後ろに<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>ってそんなに罪が重いのですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2014/10/03 09:02

なぜ仕様書読まない!!・・

　反対車線を走ったら法律違反と言われた。「反対車線走行ってそんなに罪が重いのですか？」と言われても

順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
<!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;}

これだと項目がいくつ増えても最後の項目だけ行間が開く。

- 0
- 件

通報する

この回答へのお礼

今日は。エラーの説明らしきものは出たのですが、
よく理解できなかったのでここで質問しました。
お手数をおかけしたようで済みません。

last-childという方法もあるんですね。
やっぱりここで聞いて良かったです。

通報する

お礼日時：2014/10/03 12:33

No.6

回答者： root8110
回答日時：2014/10/04 19:34

No.5です。

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

- 0
- 件

通報する

No.5

回答者： root8110
回答日時：2014/10/04 19:21

<li><a href="grape.html">グレープ</a><br></li>

と、<li></li>の中に<br>を入れたらエラーにならないはず。
でも、見映え目的ならCSSで指定するのが推奨されます。

また、TOPだけ種類が違うので、TOPだけ別のULにすれば自然と改行も入ってそちらの方がいいかもしれません。

- 0
- 件

通報する

No.4

回答者： tracer
回答日時：2014/10/03 20:43

罪ってわけじゃないけど、単なる文法ミスですね。

<body>の中に<html>が入らないのと同じで、単にそういうルールだからです。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2014/10/15 05:32

No.2

回答者： hitomura
回答日時：2014/10/03 06:06

「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>