現在Dreamweaverでサイトを制作中です。
ソースを整えるために時折「ソースフォーマットの適用」しながら制作しているのですが、
ソースフォーマットの適用をすると、
1 <img~><img~><object~>
と一行で書いているソースが
1 <img~><img~>
2 <object~>
といった形に改行されて表示されいます。
ie7で確認したところ、上記のように整形されても、それぞれの間に余白等は出来ず、問題なかったのですが、
firefoxで確認したところ、それぞれ改行されたタグとタグの間に少し隙間が出来ます。
(画像オブジェクト ではなく 画像 オブジェクト といったように半角スペースくらいの隙間ができます。)
このような場合、どう対処するのがいいのでしょうか?
ソースフォーマットはたびたび適用させるので、適用させる度に改行を消して1行にするのも大変かなと思い、css等で余白を調整できればいいのですが、色々試してみてもどうやら改行をなくさないとfirefoxでは少し余白が出来てしまうようで、困っています。
何かアドバイス頂けましたら助かります。よろしくお願いします。
No.1ベストアンサー
- 回答日時:
IEは、しばしばウェブ標準に反する挙動をするので誤解しますが、
【引用】____________ここから
ここで、ソース文書中で語間に空白類が複数連なっている場合、PRE要素を除いて、レンダリング結果の語間スペース調整は全く異なるものになるという点に注意されたい。 特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 これは、lang属性やHTTP "Content-Language"ヘッダフィールド([RFC2616]の14.12参照)、ユーザの設定、等による言語情報が存在しない場合であっても、可能かつ必要な動作である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[9.1 空白類( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
ということで、これは正統な処理です。IEが間違っている。<img><object>も共にインライン要素ですから、そうでなければまずいです。これは、次のような例を考えるとわかるでしょう。
<p>
my name is
ORUKA1951.
</p>
というソースを表示したとき、my name isOROKA1951.じゃまずい!!
基本的にひとつの段落ないしブロックに入るべきものですから
<p>
<img><img><img>
</p>
となるべきです。それでも消したい場合は
<p>
<img><!--
--><img><!--
--><img>
<p>
とか、
<p>
<img
><img
><img>
<p>
とか・・
<p class="imageLine">
<img>
<img>
<img>
<p>
として
p{clear:left;}
p.imageLine img{
float:left;
}
あるいは、
p.imageLine {
display:table-cell;
*display:inline; /* IE */
*zoom:1;/* IE */
}
いずれにしても、文法的には、<img><img>が正しいです。私はそもそもそのような画像の並べ方はしません。そうしなければならないと言うことは、必ず文法や文書構造上の問題があります。(画像を読み込まないユーザーエージェントで代替テキストを表示させて意味が通じますか?)
実際には、あなたの<img><object>が文書構成上、どのようにマークアップすべきかがわかりませんので、具体的な対策は示せませんが、画像を敷き詰めるなら、スタイルシートでfloatを使うなり、display:block;にするなり・・もあるでしよう。
ご回答ありがとうございます。
ものすごく知識がある方ですね!色々調べた際に載っていたことや知らなかったことをまさに総まとめしてくださったような回答です。
本当にありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS 角丸画像の背景色を透明にしたいです 1 2023/06/23 23:15
- Illustrator(イラストレーター) ワードに貼った画像のキャンバスと画像本体のサイズの調整 2 2022/05/19 18:31
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- オープンソース IT用語、ソースとオブジェクト、改変と翻訳と翻案の違いなど どのようにりかいすればよいのですか 1 2022/09/09 10:02
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- その他(ブラウザ) Win11でブラウザでのネットブラウズができなくなった 4 2022/12/05 18:03
- その他(開発・運用・管理) フォルダの中にファルダを作成してファイルを格納するバッチコマンド 1 2022/06/30 11:39
- Firefox(ファイヤーフォックス) Firefoxのグーグル検索で表示される現在地を修正したい!!! 1 2022/05/17 10:42
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
【HTML/CSS】ボタンの枠が伸び...
-
レスポンシブ対応のHTML・CSS(...
-
プルダウンの選択リストの中に...
-
htmlでキャラクター画像を、サ...
-
リンクを知らせる手のマークが...
-
HTMLタグのDL DT DDを使ってli...
-
画像の場合のみ、下線を消す方...
-
html オンマウスで変化する画...
-
htmlで画像を2個ずつ並べていき...
-
画像の横にテキスト
-
table で画像をピッタリとくっ...
-
3つの画像を中央に寄せて表示さ...
-
画像を縦に並べたら隙間ができ...
-
htmlの文字が縦書きになる
-
超音波で洗脳。
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
UDP通信を使うチャットプログラ...
-
ポップアップウィンドウのサイ...
-
プルダウンの選択リストの中に...
-
htmlで画像を2個ずつ並べていき...
-
ホームページビルダーの画像サ...
-
XML画像データををHTMLで簡単に...
-
画像のサイズが変わらない
-
画像の場合のみ、下線を消す方...
-
リンクを選択したときの青い枠...
-
レスポンシブ対応のHTML・CSS(...
-
footerの背景が切れて、背景画...
-
html+CSSのみで作るスライドショー
-
ホームページタグ打ち。サイズ...
-
画像の横に文字をうまく配置で...
-
水面の波紋
-
ホームページで画像を横に並べ...
-
【HTML/CSS】ボタンの枠が伸び...
-
HTMLのIMAGEに。。
おすすめ情報