Thread View: fj.net.www.authoring
7 messages
7 total messages
Started by K.Moriyama
Sat, 29 Jan 2005 06:08
margin-left の変わりに、ULの入れ子
Author: K.Moriyama
Date: Sat, 29 Jan 2005 06:08
Date: Sat, 29 Jan 2005 06:08
35 lines
1782 bytes
1782 bytes
森山と申します。
● 以下のように表示したい場合、
第1行目
第2行目
第3行目
第4行目
第5行目
● 以下のように、margin-left を指定する変わりに、<UL> を使用する
のは、HTML 的には、まずいのでしょうか?
<html lang="ja">
<head>
<style type="text/css">UL { margin-top: 0em; margin-bottom: 0em }
</style>
</head>
<body>
<DIV>第1行目</DIV>
<UL>
<DIV>第2行目</DIV>
<UL>
<DIV>第3行目</DIV>
</UL>
<DIV>第4行目</DIV>
</UL>
<DIV>第5行目</DIV>
</body>
</html>
御存じの方がいましたら、教えてもらえないでしょうか?
--
K.Moriyama
Re: margin-left の変わりに、ULの入れ子
Author: Nakayama Ryu~ji
Date: Sat, 29 Jan 2005 18:40
Date: Sat, 29 Jan 2005 18:40
83 lines
3868 bytes
3868 bytes
Article <20050129150801.1338f79f.forest@ma.kcom.ne.jp> にて、
"K.Moriyama" <forest@ma.kcom.ne.jp> さん、
> 森山と申します。
>
> ● 以下のように表示したい場合、
>
> 第1行目
> 第2行目
> 第3行目
> 第4行目
> 第5行目
>
> ● 以下のように、margin-left を指定する変わりに、<UL> を使用する
> のは、HTML 的には、まずいのでしょうか?
XHTML 1.0, HTML 4.01などのDTDを見る限り、ul要素はli要素を1つ以上子に持
つことになっていますので、まずいのではないかと思います。
<!ELEMENT ul (li)+>
divではなくliを使って、スタイルシートでリストのインジケータをなくす方
法もあろうかとは思いますが、こういうときはblockquote要素を使うべきなん
じゃないかと思います。
一般的には入れ子が下るたびに右マージンが加算されてしまいますので、その
あたりをスタイルシートでコントロールする必要はあります。
もう一つ。直接関係はないですが、たとえばXHTML 1.0ではhead要素はtitle要
素かbase要素のどちらか一つを少なくとも子要素に持たなくてはなりません。
<!ELEMENT head (%head.misc;,
((title, %head.misc;, (base, %head.misc;)?) |
(base, %head.misc;, (title, %head.misc;))))>
> <html lang="ja">
> <head>
> <style type="text/css">UL { margin-top: 0em; margin-bottom: 0em }
> </style>
> </head>
> <body>
> <DIV>第1行目</DIV>
> <UL>
> <DIV>第2行目</DIV>
> <UL>
> <DIV>第3行目</DIV>
> </UL>
> <DIV>第4行目</DIV>
> </UL>
> <DIV>第5行目</DIV>
> </body>
> </html>
というわけで、こんな感じではどうでしょう。
<?xml version="1.0" encoding="ISO-2022-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>block test</title>
<style type="text/css">blockquote { margin-top: 0em; margin-bottom: 0em }</style>
</head>
<body>
<div>第一行</div>
<blockquote>
<div>第二行</div>
<blockquote>
<div>第三行</div>
</blockquote>
<div>第四行</div>
</blockquote>
<div>第五行</div>
</body>
</html>
この状態でW3CのHTML Validator(http://validator.w3.org/), CSS
Validator(http://jigsaw.w3.org/css-validator/validator-uri.html)ともに
問題は指摘されていません。
--
中山隆二
nakayama.ryuji@anet.ne.jp
Re: margin-left の変わりに、ULの入れ子
Author: Koh
Date: Sun, 30 Jan 2005 01:45
Date: Sun, 30 Jan 2005 01:45
49 lines
2391 bytes
2391 bytes
"K.Moriyama" <forest@ma.kcom.ne.jp> wrote:
>● 以下のように、margin-left を指定する変わりに、<UL> を使用する
> のは、HTML 的には、まずいのでしょうか?
>
><html lang="ja">
><head>
> <style type="text/css">UL { margin-top: 0em; margin-bottom: 0em }
> </style>
></head>
><body>
><DIV>第1行目</DIV>
><UL>
> <DIV>第2行目</DIV>
> <UL>
> <DIV>第3行目</DIV>
> </UL>
> <DIV>第4行目</DIV>
></UL>
><DIV>第5行目</DIV>
></body>
></html>
表示させたい
>第1行目
> 第2行目
> 第3行目
> 第4行目
>第5行目
の内容が何かによります。
目次、たとえば
Chap.1 ○○の基礎知識
Chap.1-1. 導入
Chap. 1-1-1 配布場所
Chap.1-2. 使用法
Chap.2 ○○のカスタマイズ
みたいな感じのでしたら <ul> で問題ないでしょう。
ただ、<20050129150801.1338f79f.forest@ma.kcom.ne.jp> にて
中山隆二氏がご指摘の通り、子要素に <li> が必須です。
誰かの発言の引用なら <blockqoute> ですね。
インデント表示されるか否か、されるならどの程度かは
環境や設定に依存しますけど。
# ユーザ CSS の設定次第では、<blockqoute> の入れ子を
# インデントでなく文字のサイズ・書体変更で表現する環境もあり得ます。
まあ、確実なのは CSS の margin-left による指定でしょうね。
--
Koh <koh@SAFe-mail.net>
Re: margin-left の変わりに、ULの入れ子
Author: K.Moriyama
Date: Sun, 30 Jan 2005 09:04
Date: Sun, 30 Jan 2005 09:04
87 lines
4232 bytes
4232 bytes
森山です。
中山さん、Kohさん、ありがとうございます
On Sun, 30 Jan 2005 03:40:17 +0900
Nakayama Ryu~ji <nakayama.ryuji@anet.ne.jp> wrote:
> XHTML 1.0, HTML 4.01などのDTDを見る限り、ul要素はli要素を1つ以上子に持
> つことになっていますので、まずいのではないかと思います。
>
> <!ELEMENT ul (li)+>
>
やはりそうですか。元々は、<P>や<DIV>の段落で、インデントを相対的に
指定したかったので、その方法を調べていたら偶然目にした Web で <UL>を
使用していたのですが、少々強引な使用方法のような気がしたので質問した
次第です。
> divではなくliを使って、スタイルシートでリストのインジケータをなくす方
> 法もあろうかとは思いますが、こういうときはblockquote要素を使うべきなん
> じゃないかと思います。
blockquotegは、気がつきませんでした。こんなのが有ったとは...
ただ、書籍等の記述では、インデントとしての使用はすすめていない
ようですが、<UL>よりはよさそうですね。
> 一般的には入れ子が下るたびに右マージンが加算されてしまいますので、その
> あたりをスタイルシートでコントロールする必要はあります。
>
> もう一つ。直接関係はないですが、たとえばXHTML 1.0ではhead要素はtitle要
> 素かbase要素のどちらか一つを少なくとも子要素に持たなくてはなりません。
> <!ELEMENT head (%head.misc;,
> ((title, %head.misc;, (base, %head.misc;)?) |
> (base, %head.misc;, (title, %head.misc;))))>
中略
> <?xml version="1.0" encoding="ISO-2022-JP"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html>
> <head>
> <title>block test</title>
> <style type="text/css">blockquote { margin-top: 0em; margin-bottom: 0em }</style>
> </head>
> <body>
> <div>第一行</div>
> <blockquote>
> <div>第二行</div>
> <blockquote>
> <div>第三行</div>
> </blockquote>
> <div>第四行</div>
> </blockquote>
> <div>第五行</div>
> </body>
> </html>
>
> この状態でW3CのHTML Validator(http://validator.w3.org/), CSS
> Validator(http://jigsaw.w3.org/css-validator/validator-uri.html)ともに
> 問題は指摘されていません。
実例まで記述してもらい、又、確認までしてもらい、
ありがとうございます。問題なさそうなので、<blockquote>を
使用してみます。
On Sun, 30 Jan 2005 10:45:20 +0900
Koh <koh@SAFe-mail.net> wrote:
> 中山隆二氏がご指摘の通り、子要素に <li> が必須です。
中略
> 誰かの発言の引用なら <blockqoute> ですね。
> インデント表示されるか否か、されるならどの程度かは
> 環境や設定に依存しますけど。
> # ユーザ CSS の設定次第では、<blockqoute> の入れ子を
> # インデントでなく文字のサイズ・書体変更で表現する環境もあり得ます。
>
> まあ、確実なのは CSS の margin-left による指定でしょうね。
そうなんでしょうが、相対指定が出来ないので、常に絶対値での指定と
なる為、どうにも使いづらくて...
--
K.Moriyama
Re: margin-left の変わりに、ULの入れ子
Author: Tomoaki Akiyama
Date: Mon, 31 Jan 2005 02:10
Date: Mon, 31 Jan 2005 02:10
26 lines
1631 bytes
1631 bytes
"K.Moriyama" <forest@ma.kcom.ne.jp> writes:
> blockquotegは、気がつきませんでした。こんなのが有ったとは...
> ただ、書籍等の記述では、インデントとしての使用はすすめていない
> ようですが、<UL>よりはよさそうですね。
quoteは文字通り「引用」という意味ですから、インデントではなく行頭に
不等号をつけることで視覚表示するブラウザがあるかもしれません;-) CSSで
.indent { margin-left: 2em; }
とかしておいて、
<p class="indent">
項目1
<div class="indent">
項目1-1
</div>
</p>
とやって逃げています。
--
Tomoaki Akiyama 秋山 智朗
mailto:tomoaki-netnews@akiyama.nu
http://tomoaki.akiyama.nu/
Re: margin-left の変わりに、ULの入れ子
Author: Hirohisa Kuwata
Date: Mon, 31 Jan 2005 05:20
Date: Mon, 31 Jan 2005 05:20
21 lines
1842 bytes
1842 bytes
桑田です。
"K.Moriyama" <forest@ma.kcom.ne.jp> wrote in message
<20050130180415.5ac87762.forest@ma.kcom.ne.jp>...
> blockquotegは、気がつきませんでした。こんなのが有ったとは...
>ただ、書籍等の記述では、インデントとしての使用はすすめていない
>ようですが、<UL>よりはよさそうですね。
blockquoteは引用を現すものですから、インデントとしての使用はどうかなぁと思い
ます。
ただ単にインデントとして使用した場合はHTML的にNGだと思っています（文法のチ
ェッカは通りますが）。
個人的にはdivとCSSで制御かなぁと。後は、内容によりますよね。
ではでは。
--
Hirohisa Kuwata
mailto:umajets@nifty.com (private)
Re: margin-left の変わりに、ULの入れ子
Author: K.Moriyama
Date: Tue, 01 Feb 2005 12:43
Date: Tue, 01 Feb 2005 12:43
53 lines
3250 bytes
3250 bytes
森山です。
On 31 Jan 2005 11:10:20 +0900
Tomoaki Akiyama <tomoaki-netnews@akiyama.nu> wrote:
> > blockquotegは、気がつきませんでした。こんなのが有ったとは...
> > ただ、書籍等の記述では、インデントとしての使用はすすめていない
> > ようですが、<UL>よりはよさそうですね。
>
> quoteは文字通り「引用」という意味ですから、インデントではなく行頭に
> 不等号をつけることで視覚表示するブラウザがあるかもしれません;-) CSSで
>
> .indent { margin-left: 2em; }
>
> とかしておいて、
>
> <p class="indent">
> 項目1
> <div class="indent">
> 項目1-1
> </div>
> </p>
>
> とやって逃げています。
On Mon, 31 Jan 2005 14:20:47 +0900
Hirohisa Kuwata <umajets@nifty.com> wrote:
> blockquoteは引用を現すものですから、インデントとしての使用はどうかなぁと思い
> ます。
> ただ単にインデントとして使用した場合はHTML的にNGだと思っています（文法のチ
> ェッカは通りますが）。
>
> 個人的にはdivとCSSで制御かなぁと。後は、内容によりますよね。
<DIV> が入れ子に出来きて、インデントも相対的に指定出来るのは、
気がつきませんでした。<P>を入れ子にして試してみた事が有りますが、
<P>では不可だったので当然<DIV>も不可と考えて試していませんでした。
# 2つ程上のスレッドで、<DIV>の入れ子の話しになっていて、可能と
# いう結論になっていますね...(途中で<P>の話になっていてわかり難い
# のですが...)。しかし、そうすると書籍等での<P>と<DIV>の違いは
# 余白だけという説明は、手抜きですね。入れ子の有無と相対指定の有無
# は、随分と異なると思うのですが。
ただ、別目的の指定を CSS で DIV に対して行っている状態で相対的に
使用すると複雑な事になりそうな感じも...うーん、<DIV>も使用出来る
事がわかりましたので、後は、実際に使用してみながら考えてみます。
秋山さん、桑田さん、ありがとうございます。
--
K.Moriyama
Thread Navigation
This is a paginated view of messages in the thread with full content displayed inline.
Messages are displayed in chronological order, with the original post highlighted in green.
Use pagination controls to navigate through all messages in large threads.
Back to All Threads