- ベストアンサー
文字の前に一つ空白が入ります。
<div class="あああ"> <img src="パス"> 文字<img src=""パス"> </div> としているのですが、 文字の前に一つ空白が入ります。 原因は何でしょうか？ もしかして、<img src="パス">と文字の間のソースは改行してはいけないのでしょうか？
- WHNXKGCWKM
- お礼率93% (29/31)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞ もしかして、<img src="パス">と文字の間のソースは改行してはいけないのでしょうか？ 改行せずに <img src="パス">文字<img src=""パス"> と書けば空白は入らないでしょう。 これはHTMLの仕様に基づく正しい表示です。 日本語の環境に馴染んでいると不思議に思うかもしれませんが、英文等では単語間の区切りは空白か改行で行われるため、HTMLのソース上での改行は単語間の区切りと同じものとして扱われる事になっているので、レンダリングした画面では空白1文字に置き換えて表示されます。
その他の回答 (1)
- pringlez
- ベストアンサー率36% (598/1630)
改行や半角空白の連続は、半角空白1つに置換すると定められています。 それが原因です。
お礼
どうもありがとうございました。
関連するQ&A
- HPがFirefoxでは問題ないのに、IEだと画像に空白ができます。
DreamWeaver8を使いHPをさわってるんですが、IE6で見ると、TOPページの画像と画像の間に空白ができて見えます。DreamWeaver上でもFirefoxでも問題なく表示されるんですが、原因がわかりません。 （当方初心者で、このHPももともと業者さんが作ったものを、途中から簡単な更新等のみを知人からお願いされてしておりますので、CSSやらタグやら勉強中で、まだまだよく解ってないような感じです。そんな人間がHPを触るな！という意見がごもっともだとは思いますが、知人も周りに頼めるような人間もなく私にお願いしてきておりますので、なんとか綺麗に見えるようにしたいのです。） これだけの説明では解りにくいと思いますので、以下におかしいと思われる個所を載せます。 <div class="top-h-left"></div> <div class="top-h-right"> <div class="t-sub-navi"> <ul> <li class="h-home"><a href="../index.html"><img src="../img/top_h_home.jpg" alt="HOME" width="53" height="20" class="imgover" /></a></li> <li class="h-inquiry"><a href="../info/inquiry.html"><img src="../img/top_h_inquiry.jpg" alt="お問い合わせ" width="81" height="20" class="imgover" /></a></li> <li><a href="../info/sitemap.html"><img src="../img/top_h_sitemap.jpg" alt="サイトマップ" width="82" height="20" class="imgover" /></a></li></ul><br clear="all" class="partition" /></div><img src="../img/top_img1.jpg" alt="○○○」" width="410" height="160" /></div> <span class="top-h-left"><a href="http://www./○○○"><img src="../img/logo_top.jpg" alt="○○○" width="340" height="180" /></a></span><br clear="all" class="partition" /> <img src="../img/top_img2.jpg" alt="" width="340" height="209" /><img src="../img/top_img3.jpg" alt="" width="410" height="209" /><br /> <div class="top-global-navi"> この画像のimg1とimg3の間に空白が現れてしまいます。 （○の部分はHPのアドレスや店名等が表示されていましたので、略させて頂きました）
- ベストアンサー
- ホームページ作成ソフト
- jqueryでの文字置換について
jqueryを使った文字の置換を行いたいのですがうまくいきません。 どなたかお詳しい方、ご教授いただけますでしょうか。 よろしくお願いします。 ■行いたいこと <div class="bbb"><img src="0123.jpg"></div> をwindow読み込み時に <div class="bbb"><img src="0123s.jpg"></div> と置き換えしたい。 javascriptのソースは以下の通りです。 <script src="jquery-min.js"></script> <script type="text/javascript"> <!-- $(function(){ var aaa = $('.bbb'); aaa.html().replace(/.jpg/ig, "s.jpg"); }); // --> </script>
- ベストアンサー
- JavaScript
- スタイルシート 文字と写真の位置について
こんにちは。 スタイルシートの勉強をしていますが、 どうしてもうまくいきません。 文字は、右側へ、写真は、左側に構成しようと思い、 プログラムを記述しました。 </td> <td width="631" valign="top"> <img src="image/title_4.gif" /> <br /><br /> <div class="r-photo"> <img src="image/phot_1.jpg" /><br /><br /> <img src="image/phot_2.jpg" /><br /><br /> <img src="image/photi_3.jpg" /><br /> </div> <div class="txt-2"> 文字 </div> <div class="txt-3"> 文字<br /><br /> <br /> </div> <br clear="both" /> <br /><br /> 上記と同じプログラムを繰り返し記述すると、 同じものが上下に並んで表示されるはずが、 2つ目の表示は、写真が左に来てしまいます。 ご指導のほど、 よろしくお願いいたします。
- ベストアンサー
- HTML
- 正規表現で抜き出した特定の文字列をDBに格納する
外部Webページのソースから正規表現を用いて特定の文字列を抜き出したいと思っています。外部Webページのソースは以下の通りです。 <td> <div class="s-box left"> <a href="URL"><img src="" alt="" width="" height="" border="" class="book" /></a> <h3><a href="URL">書名</a></h3> <h4>著者：文字列<br />定価（税込）：500円</h4> </div> <div class="s-box center"> <a href="URL"><img src="" alt="" width="" height="" border="" class="book" /></a> <h3><a href="URL">書名</a></h3> <h4>著者：文字列<br />定価（税込）：710円</h4> </div> <div class="s-box right"> <a href="URL"><img src="" alt="" width="" height="" border="" class="book" /></a> <h3><a href="URL">書名</a></h3> <h4>著者：文字列<br />定価（税込）：730円</h4> </div> </td> 上記のようなソースからdiv classごとに、 書名 著者：文字列 定価（税込）：---円 という具合に抜き出したく思っていまが、正規表現がわからずプログラムが組めません。また、その抜き出した文字列をDB（MySQL）に自動的に格納するためにはどうしたらよいか。どなたかご教授頂けないでしょうか。宜しくお願い致します。
- ベストアンサー
- PHP
- CSSで横並び
divタグ内のimgタグを横並びに表示するCSSは、 .container cf{ display:flex; } で合っていますか？ <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>
- ベストアンサー
- CSS
- 横並びにするCSS
以下のdivタグ内のimgタグを横並びに表示するCSSは .container{ display:flex; } で合っていますか？ <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>
- ベストアンサー
- CSS
- IE7だけに出る謎の空白（CSS）の解決方法
以前も似たような症状が出たのですが・・・ IE７でだけ、謎の空白が約3px程度出てしまいます。場所は<dl></dl>と<img>の間です。 イメージとしては上から3段をくっつけて中身（<dl></dl>）だけ高さを可変にしてひとつの枠のように見せたいと考えています。 ですがIE７でだけ空白ができてしまうのです。 原因と解決方法を教えていただけないでしょうか？ <div id="right"> <img class="top" src="img/bg-rtop.gif" /> <dl> <dt><img src="img/right-tit1.gif" /></dt> <dd>ああああああああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit2.gif" width="200" height="20" /></dt> <dd>ああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit3.gif" width="200" height="20" /></dt> <dd>ああああああああああああああああああああああああああああああああ</dd> <dt><img src="img/right-tit4.gif" width="200" height="20" /></dt> <dd>あああああああああああああああああああああああああ</dd> </dl> <!-- ここで空白ができてしまう・・・--> <img class="under" src="img/bg-runder.gif" /> </div> ■CSS @charset "shift_jis"; body { text-align: center; margin: 0px; background-image: url(img/bg.gif); vertical-align: bottom; line-height: 165%; letter-spacing: 1px; font-size: 12px; } /* 右側の設定*/ #right{ width:200px; float:right; } #right .top { margin: 20px 0 0 0; } #right dl { background-image: url(img/bg-rmiddle.gif); margin: 0px; padding: 0 0 20px 0; } #right dt { padding: 10px 0 0 0; } #right dd { margin: 10px 0 0 12px; padding: 0 0 0 0; } #right .under { margin: 0px; } 一部省略してます・・・ どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- JavaScriptを用いた文字列置換
JavaScriptを用いて、以下のようなことが可能でしょうか。 <div class="test"> <A Href="http://xxx"> <Img Src="hoge.gif"> </A></div> 上記タグを下記タグに置換したいです。 <div class="test"> <Img Src="hoge.gif"> </div> ようはAタグを丸々削除したいのですが、JavaScriptで可能でしょうか。 お分かりの方お教え下さい。
- ベストアンサー
- JavaScript
- 横並びのカラム内で画像の高さを基準にして合わせたい
お疲れ様です。 横並びのアルバムについて質問です。columnボックスに見出し＜ｈ４＞と画像、説明文の＜ｐ＞が入っています。見出しの文字数と説明文の長さは一定ではないので、column内の要素の位置がそれぞれ違います。 これを画像の頭部分で高さを揃えることはｃｓｓだけで実現できるでしょうか。 見出しと説明文どちらかがなければcolumnにinline-blockを指定してあげればよいのですが。 お知恵を貸していただければと思います。 ※画像の大きさは一定です。 <div class="column4"> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキスト</p></div> </div> </div>
- ベストアンサー
- CSS
お礼
どうもありがとうございました。