教えてください！htmlソースの改行について

0   名前： のっち ： 2007/01/06（土） 20:24  ID:iRAkTNXK
　今、画像をイメージタグで隙間なく配置したいのですが、ソースが見にくくなるので、どうしてもイメージタグ間を改行したいという要望があります。
しかし、htmlソース中で改行すると、表示したときに半角に変換されてしまって困っています。なにかよい方法はないでしょうか？

1   名前： 匿名 ： 2007/01/06（土） 20:24  ID:hiLymQeV
参考リンク先ではインラインフレームを使用しているようです。
掲示板は掲示板単体でトップページ等に表示させたい状態に加工したものを準備し、後はトップページを
http://www.tagindex.com/html_tag/frame/iframe2.html
を参考にカスタマイズされてみてはいかがでしょうか。

Dreamweaverでの挿入方法は、編集画面のレイアウトを「分割」もしくは「コード」表示にして、直接タグを打ち込んでいく方法しか私は知りません＾＾；

Dreamweaverでのインラインフレームのタグ入力に関して記述してあるサイトがありました。こちらもご参考にどうぞ。
http://wakabano.cool.ne.jp/dream/layout/frame/manual/man_04.html
2   名前： のっち ： 2007/01/06（土） 20:24  ID:iRAkTNXK
>>1
　大変恐縮ですが、インラインフレームとの関係がよくわからないのですが。
3   名前： イサ ： 2007/01/06（土） 20:24  ［URL］  ID:0yJG31Zh
>>1

失礼ですが、質問者のっちさんは参考リンクなど記述していませんが？
回答スレッドを、間違われたのでしょうか？

回答内容も質問内容と一致していないと思いますので・・・

＞htmlソース中で改行すると、表示したときに半角に変換されてしまって困っています。

特殊文字のことでしょうか？

ＨＴＭＬ記述　<　ブラウザー表示　＜　　など・・



 　＝　空白　ではどうですか？

ただ、特殊文字では改行は出来ないのではないでしょうか？

もし特殊文字なら以下を参照
http://www.pst.co.jp/Powersoft/html/htmlChar.htm

画像の間隔を空けるなどは、＜padding＞や＜ｂｒ＞などを利用すると出来そうですが？

4   名前： カヅサツ ： 2007/01/06（土） 20:24  ［URL］  ID:lY9L7AMa
>>0
属性の直前で改行すると良いと思います。

<p><img
src=""
alt=""><img
src=""
alt=""></p>


5   名前： K+S ： 2007/01/06（土） 20:24  ID:nROqylMa
## >>1
## http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi?mode=view&no=2866
## 転送

>>0

一般的には要素タグ内で改行する方法がとられているようです。
<img src="picture1.gif" alt="" width="" height=""
><img src="picture2.gif" alt="" width="" height=""
><img src="picture3.gif" alt="" width="" height=""
>

属性の最後に限らずとも、属性区切りで改行することができます。
属性値内でも改行できますが、属性値の書式に合わせる必要があります。
http://openlab.ring.gr.jp/k16/htmllint/explain.html#across-lines-attribute
属性と属性値の区切り = の前後で改行することもできます。
http://openlab.ring.gr.jp/k16/htmllint/explain.html#space-around-equal
<img src="picture1.gif" alt="" width=""
 height=""><img src="picture2.gif" alt="属性値内でも
問題ありません" width="" height=""><img src="picture3.gif" alt="" width
="" height="">

ただし、要素タグ内でも要素名より前に空白類文字を入れてはいけません。
これは不可です。
<img src="picture1.gif" alt="" width="" height=""><
img src="picture2.gif" alt="" width="" height=""><
img src="picture3.gif" alt="" width="" height="">


しかしながら、要素タグが複数行に亘ることは可読性を低下させる気がします。
個人的には、これよりもコメントアウトを用いた方が妥当であると考えております。

過去に私自身も本件について質問しています。
http://www.tagindex.com/cgi-lib/q2bbs/patio.cgi?mode=view&no=829

HTMLソース内で記述されている表示されうる空白類文字は、UAは区切りとして解釈することが必須であると認識しています。
ただし、連続する空白類文字は1つの区切りと解釈されます。
認識された区切りは、多くのブラウザは半角スペースと同様の区切り文字を表示します。
※ 区切りが必ずしも"半角スペース(20)"で表示されるという保証はありません。あくまでブラウザの仕様に依ります。
** 「表示されうる」というのは、要素タグ内（alt属性値などは除く）やコメントアウト内ではないということです。

理想的なのは、この表示されてしまう区切り文字を表示させないことですが、そのようなメソッドは HTML に用意されていません。
となると動的に処理せざるを得ないのですが、私の質問に対して回答いただいているように JavaScript 等で処理をする必要がでてきます。
HTMLソースの1行が長くなることを防ぐために、そのような処理をすることは妥当でないと思います。
動的な処理が行われること自体が無駄ですし、仮に JavaScript で実装した場合、JavaScript が無効の環境で対応できません。

CSSによる視覚表現を操作することで、見栄えに関しては問題を解消できるかもしれません。
しかし、margin, padding による調整、あるいは position による調整を用いることになるかもしれません。
これは、区切り文字が"半角スペース(20)"であることを前提としての調整となり、妥当性に欠けます。


現在では、要素間にコメントアウトを挟んでその内で改行することが最も妥当であると考えています。
この方法は水平タブによるインデントと併用することで可読性が保たれます。
<div id="content">
	<p><img src="picture01.gif" alt="" title="" width="" height=""><!--
	--><img src="picture02.gif" alt="" title="" width="" height=""><!--
	--><img src="picture03.gif" alt="" title="" width="" height=""><!--
	--><img src="picture04.gif" alt="" title="" width="" height=""><!--
	--><img src="picture05.gif" alt="" title="" width="" height=""></p>
</div>

要素間以外にも利用できます。
<div id="content">
	<p>通常のテキストでも用いることができます。質問文を拝借します。<!--
	-->今、画像をイメージタグで隙間なく配置したいのですが、ソースが見にくくなるので、<!--
	-->どうしてもイメージタグ間を改行したいという要望があります。<!--
	-->しかし、htmlソース中で改行すると、表示したときに半角に変換されてしまって困っています。<!--
	-->なにかよい方法はないでしょうか？</p>
</div>

※ この掲示板での表示に関して：
pre 要素内でタブ文字を用いることは好ましくありませんが、ここでは実際に見てもらうため敢えて記述しています。
http://openlab.ring.gr.jp/k16/htmllint/explain.html#tab-in-pre

実際に私が製作したウェブページでは、ul 要素内で li 要素を横並び（display:inline によるもの）で表示させたとき、区切り文字が表示されるのを防ぐために用いています。
li 要素を横並びにするには float:left による方法もありますが、場合によっては display:inline の方が適しているため、その際に用いています。

コメントアウトは『一時的な記述の無効化』、『コメントとしての注釈』という目的のために紹介されますが、
『このような場合にも用いることができる』と紹介されている文献を見たことがありません。何故でしょうかね。

コメントアウトを用いることによる弊害として考えられる注意点は、
http://members.at.infoseek.co.jp/cssbug/detail/winie/b166.html
これくらいでしょうか。特に気にしなくてよいものですね。
※ 弊害について思い当たる節があったのですが、それは CSS でのコメントによる内容でした。
-> http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=372


話が長くなりましたが参考になれば幸いです。
6   名前： 匿名 ： 2007/01/06（土） 20:24  ID:hiLymQeV
1の者です、失礼しました、レスミスです･･･
7   名前： のっち ： 2007/01/06（土） 20:24  ID:iRAkTNXK
　みなさま。
大変参考になりました。
コメントアウト中での改行は考えてもみませんでした。すごいですね。
要素タグ内で改行より、コメントアウト中で改行のほうがよさそうですね。

　ありがとうございました。
一覧へ戻る