- ベストアンサー
pタグとliタグ
<p>説明</p> <li><a href="・・・">説明</a></li> とした時に２度改行されてしまうようで、 ｐタグとリスト項目の間が１行空いてしまいます。 ちょっと間抜けな様な気がしているので 間を詰めたいのですが（改行しないようにしたい） CSSでないと無理な気がしています。
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞traditional自体がなくなるって事は当然これも消滅ですね。 ＞後、framesetがあるようですが、これも時代の流れで消滅でしょうか。 既存のページは、そのままで良いです。HTML4.01だけでなく、HTML3.2もHTML2.0も今でも有効です。 しかし、将来的な保障はありませんが、ブラウザは古い仕様にも対応することが求められていますから、ブラウザで見る限りにおいては、問題ないでしょう。 一方で、ユーザーエージェントは古い要素や属性をサポートし続けなければなりません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 一方で、ユーザーエージェントは古い要素や属性をサポートし続けなければなりません。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#backwards-compatible )］より HTML5では、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML5 では、製作者のためオーサリング言語をシンプルにした結果、表象的な要素をはじめとするいくつかの要素や属性が含まれていません。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#backwards-compatible )］より 3.3. 変更された要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#changed-elements ) 3.4. 変更された属性 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#changed-attributes ) 3.5. 不在の要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#absent-elements ) 3.6. 不在の属性 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#absent-attributes ) を読めば一目瞭然です。frameもなくなります。 ＞traditional自体がなくなるって事は当然これも消滅ですね。 はい。 実は、HTML4.01(1999年12月24日付W3C勧告--12年も前!!!)でも 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから しかしながら、より強力なプレゼンテーション機構をスタイルシートが提供するため、World Wide Web Consortium は、HTMLのプレゼンテーション関連要素・属性を、段階的に縮小させていくこととする。 本仕様において、【将来削除される】危険のある要素及び属性については、 「推奨しない」と記してある。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.5 )］より と、随所で「(将来廃止される予定なので)推奨しない」と書かれていたのに、いまさら言われても・・・(^^) ★HTML5では、明確に「著者が使えるもの」「ユーザーエージェントがサポートしなければならないもの」と、より厳しい言い回しになりました。単に厳しくなっただけで、大きな変更は無いです。よって、今後書くなら、HTML5が正式勧告となり、多くのユーザーエージェントが対応を完了するまでは、HTML4.01strict,XHTML1.0strict,XHTML1.1が無難かと・・
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
修正して、 <p>説明</p> <ul> <li><a href="・・・">説明</a></li> <li><a href="・・・">説明</a></li> </ul> ＞２度改行されてしまうようで、 は、間違った認識です。HTML(4.01)を作成するとき大事な知識に、ブロック要素とインライン要素の区別がまず必要です。 p(段落)もulもブロック要素ですから、ブラウザはふたつのブロック間を広げて描画します。 これはpを二個連続しても、その間がひらいてひょうじされることと同じです。日本語に限らず、段落は、ひとつのテーマについて語られる一個以上の文を含みます。それは、段落内では、一行の時数にしたがって「折り返されます。」--改行ではありません。 また、日本語では、段落間にスペースをおく表記はせず、段落の境界は字下げで示します。 そのため、日本語の記事を書いてあるHTMLの場合、その見栄えはスタイルシートで調整すると良いです。 ・・・くれぐれも改行とは異なることを忘れないように・・・ 下記はHTML4.01strict(厳密型)のサンプルです。ほほまもなくHTML5の時代になります。transitinal(移行型)は存在しません。strictでHTMLを書き、スタイルシートで見栄えを調整する練習しましょう。【必須です】 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) これらのサイトでチェックし、指摘されたことを少しずつ直していくのが上達には良いでしょう。 また、「はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )」のようなサイトで、ただしい方法をまず身に着けてください。 ※下記ソースの＿タブに変更して確認してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- p{ ＿margin:0; ＿line-height:1.6em; ＿text-indent:1em; } ul{margin: 0.5em 0 0.5em 4em;/* 上 右 下 左 */} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<p> ＿＿下は箇条書きのサンプルです。<br>ここで強制改行されています。 ＿</p> ＿<p> ＿＿ここは、次の段落ですが、強制改行はしていません。よほどのことがなければ、強制改行の<br>は使うことはありません。通常の文書では登場することは極めてまれです。しかし、日本語の通常の表記法では段落間をつめます。かといって単純に間をつめると、日本語のフォントが大きいため今度は読みづらくなります。 ＿</p> ＿<p> ＿＿そこでスタイルシートで、段落のマージン(margin)をつめ、一行の高さ(line-height)を調整し、段落の最初を一文字字下げ(text-indent)します。 ＿</p> ＿<ul> ＿＿<li>ここは箇条書きの内容</li> ＿＿<li>ここは箇条書きの内容</li> ＿</ul> ＿<p> ＿＿このように、HTMLでは文書の構造をマークアップ、タグで囲み。見栄え(プレゼンテーション)はスタイルシートで指定します。 ＿</p> </body> </html>
お礼
ご回答有り難うございます。 改行という認識がそもそも間違いだったんですね。 pもulもliもブロック要素なのは知っていましたが、 CSSがイマイチ勉強不足ですね。 HTML5.0でstrictが当然の時代になって来るということは looseを使わない方がいいのでしょうか？何かの事情でlooseにしています。 もう忘れてしまったのですが、たしかレイアウトの関係だったと思います。
補足
確認してみましたが、やはり↓でした。 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> traditional自体がなくなるって事は当然これも消滅ですね。 後、framesetがあるようですが、これも時代の流れで消滅でしょうか。
- ・真 綾・（@Ma-yan_bh1011）
- ベストアンサー率30% (79/257)
失礼ながら、もう解説して差し上げる気力がなくなるほど根本的にいろいろ間違ってます。 タグの意味についてきちんと調べて理解しましょう。
補足
済みません。<ul>タグが抜けていました。 でも、これだけではないって事ですよね。 リストはブラウザに意図通りに再現されています。 質問内容のところで少し迷っているのですが。 根本的におかしいのなら直したいので ご指摘お願いします。
関連するQ&A
- olタグ・liタグで一部のリストを横並びにした
olタグ・liタグで一部のリストを横並びにしたい場合 olタグに display: inline; list-style-type: none; としても意味がないのでしょうか? <style type="text/css"> ol.test1{ display: inline; list-style-type: none; }</style> <ol class="test1"> <li><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> としても横にはならずに番号が消えました。 なので li.test2{ display: inline; list-style-type: none; } として <ol> <li class="test2"><a href="#">階層1</a></li> <li class="test2"><a href="#">階層2</a></li> <li class="test2"><a href="#">階層3</a></li> </ol> としたのですが liの数だけスタイルシートを指定しないとダメなのでしょうか? <ol> <li class="test2"><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> のように一つだけクラスに入れたら そこだけ番号が消えた上 横並びにはなりませんでした。
- ベストアンサー
- CSS
- liタグをすべての行に書きたい
たとえば dreamweaverとは dreamweaverの使い方 ・ ・ ・ （略数百行） ・ ・ 終わりに こういった長文があるとして、 これをすべて <li>dreamweaverとは</li> <li>dreamweaverの使い方</li> ・ ・ ・ （略数百行） ・ ・ <li>終わりに</li> と、すべての行をliタグで囲みたいのです。 まさか手打ちですべて書き込んでいくわけに行かないので dreamweavderでドラッグしてリスト化してみたのですが、 勝手にpタグやbrタグが入ったりしてうまくいきません。 どうすればいいでしょうか。
- 締切済み
- HTML
- css <li>タグについて
CSSの<li>タグを<p>タグと同じ文字サイズ、文字間隔にしたいのですが、一致させることが出来ません。 また、インターネットエクスプローラとgoogle Chrome では<li>の文字サイズが異なっており、google Chrome の方が文字が小さいです。 サイト自体はテンプレート配布サイトより取得して加工して使用していますので、html、cssについて殆ど素人で申し訳ありませんが、ご教授願えませんでしょうか。 下記のページの■が付いている箇所です。 (■はオレンジ色をしています。) http://kunaku.com/topic/kotuban/kotu.html ●html <li class="img"><span class="color">■</span><a href="meritto.html#kubire" target="_self">くびれ美人</a></li> ●css http://kunaku.com/main.css li.img{ margin: 0; padding:3px; font-size:90%; } #main p,#main li,#main blockquote{ font-size:90%; }
- ベストアンサー
- CSS
- cssでタグ検索のデザインをしているんですが、うまくいきません。
スタイルートでテクノラティーのようなタグ検索を作りたいのですが、リストの中身の文字がブロックに入りきらないと、文字全体が改行されてしまいます。 できれえば、文字の一部を前の行に残したいのですが、どのような指定をしたらよろしいのでしょうか？ -html <div id="aa"> <ul> <li><a href="#">aaaaa</a></li> <li><a href="#">bbbbb</a></li> <li><a href="#">bbbbb</a></li> </ul> </div> -css #aa { width:100px; height:auto; } ##aa ul { list-style:none; } ##aa li { flort:left; } 大体こんな感じのソースです。 ↓こんな感じになってしまいます。 aaaa bbbb cccc ↓このような感じにしたいのですが・・・ aaaa bbbb cc cc よろしくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
- liタグの中に<p>タグやら<dl>を入れるのはあり？
それともなしでしょうか？ たとえば、作品実績みたいなのを羅列するとき 「画像」 「タイトル」 「簡単な説明」 を乗せたいときはどうしますか？ <ul> <li> <p>画像</p> <dl> <dt>タイトル</dt> <dd>説明</dd> </dl> </li> </ul> こんな感じを考えたのですが・・・ <li>（作品）ごとにボーダーボトムで区切りたいかなと考えております。 <li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか？ </ul>
- ベストアンサー
- HTML
- <ul>タグと<li>タグで列表示
こんにちは。 以下サイト http://www.mirabella.jp/MiraTop.do のブランドリストのソースを見ると、 <div id="list_en4" class="clearfix"><!-- #list_en --> <ul> <li class="initial">A</li> <li><a href="/ItemPrdList.do?brandId=01394&crumbType=0:brands">ACCESSORIES & BEYOND</a></li> <li><a href="/ItemPrdList.do?brandId=01376&crumbType=0:brands">ADIDAS BY STELLA McCARTNEY</a></li> <li><a href="/ItemPrdList.do?brandId=01381&crumbType=0:brands">ALTEA</a></li> <li><a href="/ItemPrdList.do?brandId=01382&crumbType=0:brands">ALPO</a></li> <li><a href="/ItemPrdList.do?brandId=01661&crumbType=0:brands">AMERICAN RAG CIE</a></li> <li><a href="/ItemPrdList.do?brandId=01405&crumbType=0:brands">AMET & LADOUE</a></li> <li><a href="/ItemPrdList.do?brandId=01406&crumbType=0:brands">ANGLO LEATHER</a></li> <li><a href="/ItemPrdList.do?brandId=01677&crumbType=0:brands">ANYA HINDMARCH</a> <li><a href="/ItemPrdList.do?brandId=01355&crumbType=0:brands">A.T</a></li> <li class="initial">B</li> <li><a href="/ItemPrdList.do?brandId=01508&crumbType=0:brands">BALMUIR</a></li> <li><a href="/ItemPrdList.do?brandId=01365&crumbType=0:brands">BRUNO CARLO</a></li> <li class="initial">C</li> <li><a href="/ItemPrdList.do?brandId=01513&crumbType=0:brands">CACHAREL</a></li> <li><a href="/ItemPrdList.do?brandId=01675&crumbType=0:brands">CALLEEN CORDERO</a> <li><a href="/ItemPrdList.do?brandId=01402&crumbType=0:brands">CHAN LUU</a></li> <li><a href="/ItemPrdList.do?brandId=01407&crumbType=0:brands">CITRUS</a></li> <li><a href="/ItemPrdList.do?brandId=01388&crumbType=0:brands">COLETTE MALOUF</a></li> <li class="initial">D</li> <li><a href="/ItemPrdList.do?brandId=01478&crumbType=0:brands">DEMI</a></li> <li><a href="/ItemPrdList.do?brandId=01524&crumbType=0:brands">DELICIOUS FREAKS</a></li> <li class="initial">E</li> <li><a href="/ItemPrdList.do?brandId=01369&crumbType=0:brands">ELEY KISHIMOTO</a></li> <li><a href="/ItemPrdList.do?brandId=01522&crumbType=0:brands">ERIBE</a> </ul> </div> この表示のみでリストが3列で表示されているのですが、 このように3列で表示させるCSSの設定方法をご存知でしたら 教えていただけますでしょうか？
- ベストアンサー
- HTML
- <li>リストタグの直下のdivブロックの高さ
CSSのコーディングで困っている箇所があり、教えていただきたく質問させていただきます。 以下のようなhtmlを書いています。 <div id="a"> <li class="a"><a href="05.html">あいうえお</a></li> <li class="a"><a href="06.html">かきくけこ</a></li> <li class="a"><a href="07.html">さしすせそ</a></li> </div> このhtmlの直下にdivで囲ったブロックを入れると、 リストの部分の高さが認識されず、divの内容が上にはみ出て重なってしまいます。 このhtmlの直下に<p> </p>やテーブルを置くと、 きちんと配置されています。 <p> </p>を置けば問題ないのですが、 他に何かうまい方法はあるのでしょうか？ よろしくお願い致します。
- ベストアンサー
- CSS
- IE8でli:hoverが効かない
Window7 IE8を使っています。 ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。 ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトから ｃｓｓドロップダウンメニューの例文をもらってきて 書き込んでみましたが、どうしてもサブメニューが表示されません。 たとえば、 【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、 サブメニューが表示されません。 原因や回避方法を教えていただけないでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- <li>タグの隙間が消えない
cssでhtmlのレイアウトを調整し、float:left;で<li>タグを水平方向に並べています。 この時、「見た目では隙間は埋まっている」のですが、onmouseoutの処理を記述している場合、どうしても<li>タグの間に見えない隙間が生じて、そこにマウスカーソルを合わせるとonmouseoutの処理が走ってしまいます。 この見えない隙間は埋められるのでしょうか？ 詳しい方、よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul { padding: 0; margin: 0; list-style-type: none; } #content li { float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。 このIEでの不具合で良い解決法があれば、ご教授願います。 よろしくお願い致します。
- ベストアンサー
- HTML
お礼
１２年も前から非推奨だったんですか・・・ その時僕は小学生だから知る由もないですけど。 今までけっこういい加減だったんですね。 だからlooseだったのか・・・