引用文を改行なしで字下げ表示する

[統計] HTMLからXHTMLへの移行を進めていますか?



0   名前: liesl : 2004/03/27 12:55
引用文を改行なしで字下げ表示するにはどう
したらよいでしょうか?
  <BLOCKQUOTE></BLOCKQUOTE>や<DL><DD>
  </DL>を使って引用すると、引用文の前
  後に必ず改行ができてしまいます。
なるべく行を詰めて表示したいのですが。


HTML文書を上記のように表示したいのですが、どうしても下記のように改行が入ってしまいます。それを避けるにはどうしたらよいか、教えていただけないでしょうか。


引用文を改行なしで字下げ表示するにはどう
したらよいでしょうか?

  <BLOCKQUOTE></BLOCKQUOTE>や<DL><DD>
  </DL>を使って引用すると、引用文の前
  後に必ず改行ができてしまいます。

なるべく行を詰めて表示したいのですが。

1   名前: phpinfo() : 2004/03/27 13:04   [URL
ULタグとNOBRタグを使えば出来そうです
<UL><NOBR>文</NOBR></UL>

#横スクロールって読みずらい・・

2   名前: liesl : 2004/03/27 15:11
phpinfo()さん、ありがとうございます。
<UL><NOBR>文</NOBR></UL>では、<NOBR>文</NOBR>のなかの文がブロックにならない(たしかに横スクロールって読みずらいです)だけでなく、<UL>の上(私の例でいえば「したらよいでしょうか?」と「<BLOCKQUOTE></BLOCKQUOTE>や<DL><DD>」以下の文との間)に1行空白ができてしまいます(</UL>の下にも1行空白ができます)。これを避けることは無理でしょうか。

3   名前: better_source : 2004/03/27 18:37
> 改行なしで字下げ表示
この意味は、「上下のマージン無しでの字下げ表示」ということですね?
だとすると、CSSで調整可能です。

blockquote {margin-top: 0 ; margin-bottom: 0}
ul {margin-top: 0 ; margin-bottom: 0}
ol {margin-top: 0 ; margin-bottom: 0}
dl {margin-top: 0 ; margin-bottom: 0}

ただし、これらの場合の「字下げ表示」は、
ブラウザのデフォルトスタイルシート依存です。

> <DL><DD></DL>を使って引用すると
<dl>は、定義リストです。分かってらっしゃる様な気がしますが……

<dl>
<dt>用語1</dt> <dd>用語1についての記述</dd>
<dt>用語2</dt> <dd>用語2についての記述</dd>
</dl>

のように使われますね。

4   名前: liesl : 2004/03/27 23:23
better_sourceさん、ありがとうございました。
 私の質問が不明瞭でお煩わせしましたが、おかげさまでしたかったことができました。
 私は全くの素人ですので、すぐにはCSSの意味もわかりませんでしたが、検索してあちこち見て、スタイルシートのことを少し勉強しました。
 その結果、下のようにすれば、「いいい・・・」の段落が数字分の字下げになり、「あああ・・・」の段落と「いいい・・・」の段落の間も、「いいい・・・」と「ううう・・・」の段落の間も1行空きにならないですみました。
 これでよかったのでしょうか。ともかく私としてはこれで十分で、深く感謝しています。

あああああああああああああああああああああああああああああああああああああ<BR>
<STYLE>
DL {margin-top: 0 ; margin-bottom: 0}
</STYLE>
<DL>
<DD>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい<BR>
</DL>
ううううううううううううううううううううううううううううううううううううう<BR>

5   名前: liesl : 2004/03/27 23:32
 すみません、もう一つ質問させてください。
 上の例では「いいい・・・」の段落が字下げになりますが、私はInternet Explorerで文字サイズを最小にしているので、4字分もの字下げになります。私としては2字分の字下げで十分なのですが、これは指定できるでしょうか。

6   名前: liesl : 2004/03/28 00:18
 あれからこのTAG indexをめくって勉強したところ、結局私がしたかったことは、上の例でいえば「いいい・・・」の段落を2字下げにすることですから、リストタグではなくDIVタグを使えばよかったと思うようになりました。
 下のようにすればできました。いろいろありがとうございました。

あああああああああああああああああああああああああああああああああああああ<BR>
<STYLE>
DIV {margin-left:2em}
</STYLE>
<DIV>
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい<BR>
</DIV>
ううううううううううううううううううううううううううううううううううううう<BR>

7   名前: liesl : 2004/03/28 01:17
 あれからさらに勉強したところ、2字下げしたい段落を<DIV STYLE=margin-left:2em>と</DIV>とで囲めばいいことがわかりました。
 なんだ、自作自演というか一人相撲というか。でも一人相撲も、横から掛け声をかけたり、教えたりしてくださる人がいなければできませんでした。
 phpinfo()さん、better_sourceさん、そして何といってもこのTAG index運営のえじさん、ありがとうございました。

8   名前: better_source : 2004/03/28 01:19
……遅かった?

HTMLやCSSについて学ぶならこのサイトをおすすめします。

The Web KANZAKIのサイト内
  ごく簡単なHTMLの説明:http://www.kanzaki.com/docs/htminfo.html

まずは、このあたりのページを一通り読んでみると良いと思います。
  30分間(X)HTML入門:http://www.kanzaki.com/docs/html/lesson1.html
  スタイルシートの基本:http://www.kanzaki.com/docs/html/htminfo17.html
  CSSの主なプロパティ:http://www.kanzaki.com/docs/html/htminfo17-2.html

他のページは、必要に応じて参照してください。


さて、提示されたソースですが……

<style>は、<head>から</head>の中に書かれます。
(外部スタイルシートという方法もあります)
それから、"type"が必要ですね。(type="text/css"等)
また、スタイルシート非対応のブラウザが<style>から</style>の中を
表示しないように、内容をコメントアウトするのが割と一般的です。
(外部スタイルシートの場合・XHTMLの場合を除く)

> 段落を2字下げにする
でしたら、<p>をセレクタとしてスタイルを指定するのがよいかと。
必要に応じて、"class","id"を設定してください。


以上より、外部スタイルシートを使わず、XHTMLでもない場合の一般的な
書き方は次の通りです。

<style type="text/css">
<!--
p.class {margin-left: 2em ; margin-top: 0 ; margin-bottom: 0}
-->
</style>

または、
<style type="text/css">
<!--
p.class {margin: 0 auto 0 2em}
-->
</style>

9   名前: better_source : 2004/03/28 01:30
うーん、かぶりましたね……
>>8は、>>6までの投稿に対するレスのつもりです。

もし、>>7のようにするのであれば、
> <DIV STYLE=margin-left:2em>
属性値は""で囲みます。
<div style="margin-left:2em">

場合によっては、<p>に指定することも出来ます。
<p style="margin-left: 2em ; margin-top: 0 ; margin-bottom: 0">
または、
<p style="margin: 0 auto 0 2em">

10   名前: liesl : 2004/03/28 01:43
better_sourceさん
 重ねてのご教示、心からお礼申し上げます。
 神埼さんのWebページ、ちょっと見ただけですが、すばらしいですね。いずれ十分に利用させていただきます。
 それから、スタイルシートの書き方について、詳しく教えてくださり、ありがとうございました。margin-left: 2em のあたりなど、私が独習で辿りついたのも、当らずといえども遠からずだったかなと思いました。ご親切に深く感謝します。

一覧へ戻る