- 締切済み
1pxの隙間
モバイルサイトを制作しているのですが、<marquee>と画像との間に1px程の隙間ができてしまいます。 画像のサイズ、容量の変更や<marquee>を外す、<marquee>部分のテキストサイズを変えても変化はありませんでした。 確認したキャリアはW51Tです。 この1pxの隙間はどのような理由であるのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>1pxの隙間</title> </head> <body background="sukima.gif"> <marquee bgcolor="#cd5c5c"><font color="#000000">1pxの隙間</font></marquee> <img src="sukima.gif" alt="1pxの隙間"> <br> <br> ・ ・ ・ </body> </html>
- デザイナー・クリエイティブ職
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- SAYKA
- ベストアンサー率34% (944/2776)
><marquee bgcolor="#cd5c5c"><font color="#000000">1pxの隙間</font></marquee> ><img src="sukima.gif" alt="1pxの隙間"> 改行されているから。 複数の空白文字(改行含む)は1文字の空白に置換されるというwebの仕様によって空白が1pxで表示されてるっていうオチじゃないかな。 試しに </marquee> <img ↓ </marquee>< img にしたらどうなる？
関連するQ&A
- Firefoxで下の隙間が開く
http://oshiete1.goo.ne.jp/qa4870757.html この質問の続きですが、 Firefoxで下の隙間があきます。IEでは隙間が無いです。Firefoxで一番下までスクロールしても下の隙間を無くす方法をお願いします。 ********************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 上のDTDで隙間が開く 下のDTDなら開かない <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> scriptは、xrea.comの見本です。 scriptは一番下に置きたいのです。 下記例のHTMLは単純な例です。 ********************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>最終行の表示テスト</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"><!-- *{margin:0 50px;} #body{border-left:1px solid red; border-right:1px solid blue; background-color: #EEE;} --></style> </head> <body> <div id="body"> <p style="padding-top: 800px;">最終行</p> </div> <script type="text/javascript"><!-- var ID="100000000-INDEX"; var AD=1; var FRAME=0; // --></script> <script src="http://j1.ax.xrea.com/l.j?id=100000000-INDEX" type="text/javascript"></script> <noscript> <a href="http://w1.ax.xrea.com/c.f?id=100000000-INDEX" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=100000000-INDEX&url=X" alt="AX" border="0"></a> </noscript> </body> </html>
- ベストアンサー
- HTML
- ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。 上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
- <css> ボックスの隙間について
お時間のあるときに教えていただけるとありがたいです。 cssボックスを縦に二つ（上A、下B）作ったところ、どうしてもボックスに隙間が空いてしまいます。この隙間をなくし、二つのボックスを繋げるように表示するにはどうしたらいいでしょうか。どうもマージン設定がうまくいっていないようなのですが、どこが悪いのかわからなくて困っています。 cssは外部ファイルとして読み込みました。以下にソースをなるべくそのまま貼り付けてみます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜cssソース＞ body{ color : #fff; font-size : 11pt; text-align : left; background-color : #ff00cc; background-image : url(haikei.gif); background-repeat : repeat; } a{ color : #ffcccc; text-decoration : none; } a:HOVER{ color : #ffcccc; text-decoration : none; } a:VISITED{ color : #ffcccc; } * { margin:0px; padding:0px; } #boxA { margin:0px auto; width:650px; height:217px; padding:0; } #boxB { text-align:left; margin:0px auto; width:620px; height:350px; padding:15px 15px 5px 15px; background-image : url(haikei2.gif); background-repeat : repeat; overflow:auto; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜htmlソース＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <link rel=stylesheet type="text/css" href="haikei.css"> </head> <body> <div id="boxA"> </div> <div id="boxB"> </div> </body> </html> よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- ヤフ－の検索にかからなくなりました。
ヤフ－の検索にかからなくなりました。 以下そのページのソースですが、不都合があるでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <titl>***************</title> <meta name="keywords" content="*****************************"> <meta name="description" content="*******************************"> <STYLE type="text/css"> <!-- BODY { background-color: #------; background-image : url("ind_back.gif"); background-repeat: repeat-x; background-position: bottom; background-attachment: fixed; } --> </STYLE> </head> <body bgcolor="*********************"> <br> <br> <!-- ロゴ --> <div Align="center"> <img src="a.gif" border="0" alt="ロゴ"> <br><br><br><br> <!-- 写真と説明文 --> <img src="main_photo2.jpg" border="0" alt="**********"><br> <span style="font-size: 13px;line-height:150%"> （***********************） </span> <br><br><br> <span style="font-size: 16px;line-height:150%"><font color="#000099" face="MS UI Gothic"> <b>******</b>***************************<br> </font></span> <br><br> <A href="top/top.htm"><img src="1.gif" onmouseover="this.src='2.gif'" onmouseout="this.src='1.gif'" border="0" alt="入口"></a></div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- table周辺の隙間をなくしたい。
ヘッダーのバーとすぐ下のtableの間の隙間を無くしたいのですが、どうすれば良いのでしょう。 margin属性を調整すれば隙間を無くせるブラウザもあるようですが、ＩＥはどうしてもダメなのではないでしょうか。なによりも、ブラウザ次第で隙間の大きさが違うのに困っています。 ***** test_06.html ***** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>只今お勉強中！</title> <link href="test_06.css" rel="stylesheet" type="text/css"> </head> <body> <img class="header" src="header_01.jpg" alt=""> <table class="main"> <tr class="logo"> <td class="01"> <img class="logo" src="logo.jpg" alt=""> </td> <td class="02"> <div></div> </td> </tr> </table> </body> </html> ***** test_06.css ***** body { margin-top: 0px; text-align: center; background: url("header_back.gif") repeat-x; background-color: #CBE5FF; } img.header { margin: 0px auto; width: 820px; display: block; } table { margin: 0px auto; width: 860px; background: url("wrapper_01.gif") repeat-y; } td { margin: 0px; padding-left: 20px; width: 352px; float: left; } img.logo { width: 352px; margin: -3px 0px -3px -3px; }
- ベストアンサー
- HTML
- スタイルシート DIVとDIVの間に隙間ができてしまいます。
DIVとDIVの間に１０ピクセルほどの隙間ができるのはなぜでしょうか？ ｈｔｌｍは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>タイトル</TITLE> <link rel="stylesheet" href="style_1.css" type="text/css"> </HEAD> <BODY> <DIV id=site> <DIV id=header> <DIV id=top-logo><IMG src="logo2.gif" border="0" alt="ロゴ"> </DIV> <hr color="#ffccff" width="750" height="2"> </DIV> </DIV> </BODY> </HTML> 上部の方はよくわからなくてホームページビルダーのをコピーして、残りはメモ帳で手打ちしました。 スタイルシートは、全て手打ちです。 *{ margin:0px; padding:0px; } #site { width: 760px; border: 2px solid pink; font-size: 90%; line-height: 150%; margin:0px; padding:0px; border: 1px solid red; } #header { width: 760px; border: 1px solid blue; } #top-logo { FLOAT: left; border: 1px solid green; } #siteと#headerの赤と青のボーダーはぴったりくっついているのに、#top-logoの上に隙間があります。 ｈｒの線の下にも１０ｐｘ分くらいの隙間があります。 なぜこのような隙間ができてしまうのでしょうか？
- ベストアンサー
- HTML
- ＣＳＳ今度は外部ファイル！
前回「ＣＳＳが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない！」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル） .body{ color:#006666; font-size:30px; } ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="abc.css" type="text/css"> --> </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは３０ｐｘ・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名 hp-name.css ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="body.css" type="text/css"> --> </style> </head> <body> <div class="hp-name"> ＨＰ名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか？ それとも、外部ファイルの書き方がいけないのでしょうか？ 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした
- ベストアンサー
- その他（インターネット・Webサービス）
- もう意味がわかりません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title></title> <style type="text/css"> <!-- A {text-decoration: none; cursor:crosshair} --> </style> </head> <body bgcolor="#000000" link="darkolivegreen" alink="activeborder" vlink="activeborder"> <center><font size=5 color=darkolivegreen><br><br><br>ＨＰ</font> <br><br><font color=slategray size="-1"><br><br><br><br> <a href="menu.html">Enter</a></font></center> </body> </html> ______________________ カーソルを「十字」にしたいのと、 リンク下の線を消したいです。 それで参考書通りにやったのですが、 何故か下線は消えてくれないし、 カーソルも十字になりません。。 これは一体どういうこと！？ どこかオカシイか、教えてください・・。 お願いしますｍ（＿＿）ｍ
- ベストアンサー
- HTML
- CSSのliタグで画像との間に空白ができてしまいます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>CSS</title> <style type="text/css"> <!-- li { margin:0px; padding:0px; list-style-type:none; } --> </style> </head> <body> <ul> <li><img src="aaa.gif"></li> <li><img src="bbb.gif"></li> <li><img src="ccc.gif"></li> </ul> </body> </html> こんな感じのソースですけど、画像と画像の間に空白（2pxくらい）が できてしまいます。 画像と画像をくっつけたいのですがどうすればいいでしょうか？ 教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- フォントと文字サイズの指定方法
HTML初心者です。 どなたか助言ください。 以下のソースのようなテンプレHTMLを変更しないといけなくなりました。 以下のソース部分のフォントと文字サイズを指定するにはどのようにすればよろしいでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div> ＊＊＊＊以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p> ＊＊＊＊ ......同じような内容が続く </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
補足
改行部分を修正してみましたが、変化はなかったです。