margin-left の変わりに、UL の入れ子
K.Moriyama
● 以下のように表示したい場合、
第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
Nakayama Ryu~ji
"K.Moriyama" <for...@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)ともに
問題は指摘されていません。
--
中山隆二
nakayam...@anet.ne.jp
Koh
>● 以下のように、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....@ma.kcom.ne.jp> にて
中山隆二氏がご指摘の通り、子要素に <li> が必須です。
誰かの発言の引用なら <blockqoute> ですね。
インデント表示されるか否か、されるならどの程度かは
環境や設定に依存しますけど。
# ユーザ CSS の設定次第では、<blockqoute> の入れ子を
# インデントでなく文字のサイズ・書体変更で表現する環境もあり得ます。
まあ、確実なのは CSS の margin-left による指定でしょうね。
--
Koh <k...@SAFe-mail.net>
K.Moriyama
中山さん、Kohさん、ありがとうございます
On Sun, 30 Jan 2005 03:40:17 +0900
Nakayama Ryu~ji <nakayam...@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 <k...@SAFe-mail.net> wrote:
> 中山隆二氏がご指摘の通り、子要素に <li> が必須です。
中略
> 誰かの発言の引用なら <blockqoute> ですね。
> インデント表示されるか否か、されるならどの程度かは
> 環境や設定に依存しますけど。
> # ユーザ CSS の設定次第では、<blockqoute> の入れ子を
> # インデントでなく文字のサイズ・書体変更で表現する環境もあり得ます。
>
> まあ、確実なのは CSS の margin-left による指定でしょうね。
そうなんでしょうが、相対指定が出来ないので、常に絶対値での指定と
なる為、どうにも使いづらくて...
--
K.Moriyama
Tomoaki Akiyama
> blockquotegは、気がつきませんでした。こんなのが有ったとは...
> ただ、書籍等の記述では、インデントとしての使用はすすめていない
> ようですが、<UL>よりはよさそうですね。
quoteは文字通り「引用」という意味ですから、インデントではなく行頭に
不等号をつけることで視覚表示するブラウザがあるかもしれません;-) CSSで
.indent { margin-left: 2em; }
とかしておいて、
<p class="indent">
項目1
<div class="indent">
項目1-1
</div>
</p>
とやって逃げています。
--
Tomoaki Akiyama 秋山 智朗
mailto:tomoaki...@akiyama.nu
http://tomoaki.akiyama.nu/
Hirohisa Kuwata
"K.Moriyama" <for...@ma.kcom.ne.jp> wrote in message
<20050130180415....@ma.kcom.ne.jp>...
> blockquotegは、気がつきませんでした。こんなのが有ったとは...
>ただ、書籍等の記述では、インデントとしての使用はすすめていない
>ようですが、<UL>よりはよさそうですね。
blockquoteは引用を現すものですから、インデントとしての使用はどうかなぁと思い
ます。
ただ単にインデントとして使用した場合はHTML的にNGだと思っています（文法のチ
ェッカは通りますが）。
個人的にはdivとCSSで制御かなぁと。後は、内容によりますよね。
ではでは。
--
Hirohisa Kuwata
mailto:uma...@nifty.com (private)
K.Moriyama
On 31 Jan 2005 11:10:20 +0900
Tomoaki Akiyama <tomoaki...@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 <uma...@nifty.com> wrote:
> blockquoteは引用を現すものですから、インデントとしての使用はどうかなぁと思い
> ます。
> ただ単にインデントとして使用した場合はHTML的にNGだと思っています（文法のチ
> ェッカは通りますが）。
>
> 個人的にはdivとCSSで制御かなぁと。後は、内容によりますよね。
<DIV> が入れ子に出来きて、インデントも相対的に指定出来るのは、
気がつきませんでした。<P>を入れ子にして試してみた事が有りますが、
<P>では不可だったので当然<DIV>も不可と考えて試していませんでした。
# 2つ程上のスレッドで、<DIV>の入れ子の話しになっていて、可能と
# いう結論になっていますね...(途中で<P>の話になっていてわかり難い
# のですが...)。しかし、そうすると書籍等での<P>と<DIV>の違いは
# 余白だけという説明は、手抜きですね。入れ子の有無と相対指定の有無
# は、随分と異なると思うのですが。
ただ、別目的の指定を CSS で DIV に対して行っている状態で相対的に
使用すると複雑な事になりそうな感じも...うーん、<DIV>も使用出来る
事がわかりましたので、後は、実際に使用してみながら考えてみます。
秋山さん、桑田さん、ありがとうございます。
--
K.Moriyama
Hirohisa Kuwata
"K.Moriyama" <for...@ma.kcom.ne.jp> wrote in message
<20050201214335....@ma.kcom.ne.jp>...
># しかし、そうすると書籍等での<P>と<DIV>の違いは
># 余白だけという説明は、手抜きですね。
そういう書籍は読んじゃ駄目です。誤った知識を植え付けられるだけです。
参考までに、その書籍を教えていただけませんか？
# 改行幅の調整で<p>が使える、というような事を平気で書いていた書籍もあっ
たという噂も聞いた事があります。
K.Moriyama
On Tue, 01 Feb 2005 21:53:56 +0900
Hirohisa Kuwata <uma...@nifty.com> wrote:
> そういう書籍は読んじゃ駄目です。誤った知識を植え付けられるだけです。
> 参考までに、その書籍を教えていただけませんか？
HTMLデザインビジュアルガイド シーズ編著
発行 エムディエヌコーポレーション
発売 インプレスコミュニケーション
です。説明の記述は、
-----------------------------
[ 段落・区切り・揃えを設定 ] というタイトルで始まり
4ページに渡り、
<P>主体で、段落の使用例を8例程記述
<DIV><SPAN>での使用例説明は無い
が、記述されて、5ページ目に以下が記載されています。
----- 以下、ほぼ記載内容そのままです。(例題は削除) -----
段落を定義する 1 (前後の余白あり)
<P> ～ </P>
<P ALIGN="1">～</P>
文章のまとまり、段落を定義するタグです。<P>と</P>の間に
書いた文章はひとつの段落となり、たとえば<P>タグに対して
スタイルを設定した場合は、この間の文章がそのスタイルの
対象となります。表示では、前後に1行のアキが出来ます。
ALIGN属性は、段落中文章の左右揃え設定で、属性値1に
指定出来るのは以下の3つです。
left ---- 左揃え
center -- センタリング
right --- 右揃え
<P>タグは、<DIV>、<SPAN>とともに、スタイルシートによる
スタイル指定(STYLE,UD,CLASS属性を使用)の際に頻繁に
使用されます。
段落を定義する 2 (前後の余白なし)
<DIV> ～ </DIV>
<DIV> ALIGN="1">～</DIV>
こちらもまとまり、段落を定義するタグです。機能としては、
<P>と同じで、<DIV>と</DIV>の間に置かれた物はひとつの段落
となります。表示的には、<DIV>で閉じた後は改行されますが、
前後にアキが出来ないことが<P>との違いになります。
ALIGN属性は、段落中文章の左右揃え設定で、属性値1に
指定出来るのは以下の3つです。
left ---- 左揃え
center -- センタリング
right --- 右揃え
<DIV>タグは、<P>、<SPAN>とともに、スタイルシートによる
スタイル指定(STYLE,UD,CLASS属性を使用)の際に頻繁に
使用されます。
----- ここまで ------
となっていて、<P> がメインの説明で、その仲間として<DIV>が
説明されています。
# <DIV>と<P>の挙動から考えたら、<DIV>主体で説明するべき...
# いや、むしろ完全に章を別けて、別なものとして説明するべき
# ですね。
以下ですと、
http://www.htmq.com/html/indexm.shtml
<P> : 文書情報・構造 用
<DIV> <SPAN> : 範囲指定 用
と、全然に別な物という扱いになっていますね。
# この本、ダメですね。週末に別な物を購入します。
# 多少は各タグの挙動が分かりましたので、今度は
# キチントした物を購入できると思います。
--
K.Moriyama
K.Moriyama
記述ミスの訂正と、<DIV>の使用報告です。
> と、全然に別な物という扱いになっていますね
[ 全然別なもの ]の間違いです。
> ただ、別目的の指定を CSS で DIV に対して行っている状態で相対的に
> 使用すると複雑な事になりそうな感じも...
で、結構インデントが入り組んでいて、字下げ等も有る文章を <DIV> と
CSS のみで作成してみところ、それほど問題は出ませんでした。という事
なので、インデントの入れ子は、<DIV>主体で使用してみます。
みなさん、どうもありがとうございました。
--
K.Moriyama
K.Moriyama
調べてみたら、[ HTMLポケットリファレンス ] も、出しているようで、
http://www.amazon.co.jp/exec/obidos/ASIN/4774117048/250-2523642-8059445
書評を読むと、やはり問題の有りそうな内容のようです。
--
K.Moriyama
OTA Takashi
forestさんが2005年02月02日(水) 21時50分37秒に、
fj.net.www.authoringに投稿した
<20050202215037....@ma.kcom.ne.jp>の記事から
> # この本、ダメですね。週末に別な物を購入します。
> # 多少は各タグの挙動が分かりましたので、今度は
> # キチントした物を購入できると思います。
ここにだけ反応．
大藤幹：『詳解 HTML & XHTML & CSS辞典』，秀和システム (2000円(税別))
が，良書だと思います．「タグ」と「要素」の違いをちゃんと説明して，
何を今後使うべきではなくて，代替として何を使うべきなのか，きちんと
書かれています．
ただ，この本，絶版になったらしいんですよねぇ……．
----------- ニュースはみんなのために ／｜＼ メールは個人のために -----------
.. 太田 尚志 - http://web.sfc.keio.ac.jp/~takot/ MSN#: supertakot@hotmail...
K.Moriyama
On Wed, 2 Feb 2005 13:12:00 +0000 (UTC)
OTA Takashi <takot...@sfc.keio.ac.jp> wrote:
> 大藤幹：『詳解 HTML & XHTML & CSS辞典』，秀和システム (2000円(税別))
>
> が，良書だと思います．「タグ」と「要素」の違いをちゃんと説明して，
> 何を今後使うべきではなくて，代替として何を使うべきなのか，きちんと
> 書かれています．
>
> ただ，この本，絶版になったらしいんですよねぇ……．
太田さん、書籍の紹介ありがとうございます。
先ずは、古本屋さんから探してみます。
--
K.Moriyama
Koh
># この本、ダメですね。週末に別な物を購入します。
個人的には
神崎正英「ユニバーサル HTML/XHTML」毎日コミュニケーションズ, ￥2,310
ISBN 4-8399-0454-5
がちゃんとしてると思いました。
内容は http://www.kanzaki.com/docs/htminfo.html でも読めます。
あと、私自身は読んでいませんが
エ・ビスコム・テック・ラボ
「HTML+CSS Webデザイン・スタイルガイド
―HTMLとCSS使い分けのルール&Webコンテンツデザインの実践」
毎日コミュニケーションズ, ￥2,625
ISBN 4-8399-1073-1
が割と評判よいみたいです。
--
Koh <k...@SAFe-mail.net>
K.Moriyama
On Thu, 03 Feb 2005 10:59:57 +0900
Koh <k...@SAFe-mail.net> wrote:
> 神崎正英「ユニバーサル HTML/XHTML」毎日コミュニケーションズ, ￥2,310
> ISBN 4-8399-0454-5
>
> がちゃんとしてると思いました。
> 内容は http://www.kanzaki.com/docs/htminfo.html でも読めます。
>
> あと、私自身は読んでいませんが
>
> エ・ビスコム・テック・ラボ
> 「HTML+CSS Webデザイン・スタイルガイド
> ―HTMLとCSS使い分けのルール&Webコンテンツデザインの実践」
> 毎日コミュニケーションズ, ￥2,625
> ISBN 4-8399-1073-1
>
> が割と評判よいみたいです。
Kohさん、ありがとうございます。これを参考に書店で探してみます。
--
K.Moriyama
OOTANI TAKASHI
ちょうど、同題の改訂版が出たようです。
ISBN: 4798010030
値段が1890円とちょっと安くなってますね。
--
tksotn
K.Moriyama
On Wed, 2 Feb 2005 13:12:00 +0000 (UTC)
OTA Takashi <takot...@sfc.keio.ac.jp> wrote:
> 大藤幹：『詳解 HTML & XHTML & CSS辞典』，秀和システム (2000円(税別))
On Sat, 05 Feb 2005 01:01:39 +0900
OOTANI TAKASHI <tks...@anet.ne.jp> wrote:
> ちょうど、同題の改訂版が出たようです。
> ISBN: 4798010030
> 値段が1890円とちょっと安くなってますね。
改訂版、出ていました。見たところ大変詳しく、リファレンスとしても
使用出来て良い本なのですが、今回のように間違った知識を持っている
状態では、
On Thu, 03 Feb 2005 10:59:57 +0900
Koh <k...@SAFe-mail.net> wrote:
> エ・ビスコム・テック・ラボ
> 「HTML+CSS Webデザイン・スタイルガイド
> ―HTMLとCSS使い分けのルール&Webコンテンツデザインの実践」
> 毎日コミュニケーションズ, ￥2,625
> ISBN 4-8399-1073-1
こちらの方が、良いかと思い購入しました。又、以下も購入しました。
> 神崎正英「ユニバーサル HTML/XHTML」毎日コミュニケーションズ, ￥2,310
> ISBN 4-8399-0454-5
こうゆう本を、探していました。実は最近、もしかしてタグがどうの
CSSがどうのという事よりも、HTML そのものの考えかたとういか理念
とういうか、そうゆう事を理解する方が先で、それを理解していないと、
とんでもなく勘違いした記述をしてしまうのではないかと危惧していました。
それだけに、まさにそのものの本でした。おそらくは紹介してもらわなかったら、
購入しなかったでしょう。
みなさん、本当にどうもありがとうございました。
--
K.Moriyama