忙しい現代人の腰&肩のお悩み対策!

質問させて下さい。

以下のようなソースを書いた時のことです。

HTML部分-------------------------------

<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>
<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>



CSS部分-------------------------------

#box-s{
width:300px;
float:right;
text-align:left;
border: 1px solid #000000;
clear: none;
margin: 2px;
padding: 4px;
}


と書くと、IEだと問題ないのですが、firefoxでみると画像の
右側の余白がかなり不自然に開くんです。
少しぐらいの崩れは良いのですが、、、あまりに違いすぎる
のでどなたかお助け願えないでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

表示内容のimgがwidth:290pxで、divがwidth:300pxの指定になっているので、そのようになります。



例えば、#box-sの指定でwidthを省略すれば、お望みの表示になりませんか?

質問には関係ないですが、idは唯一ということになっているので、ご提示のような場合はclassなどで指定するほうがよろしいかと…

この回答への補足

>>例えば、#box-sの指定でwidthを省略すれば、お望みの表示になりませんか?

ちょっと他の配置との兼ね合いで、幅指定は外せなさそうです。


>>ご提示のような場合はclassなどで指定するほうがよろしいかと…

なるほど、そういう使い分けなのですね。。初めて理解しました。
ありがとうございます!

補足日時:2010/04/06 11:34
    • good
    • 0

互換モードだったんですね。


失礼しました。

参考URL:http://2xup.org/log/2007/07/27-2111
    • good
    • 0

ご提示されたソースで下記ブラウザで確認してみました。


IE6,7,8,Firefox3.6

どのブラウザも同じように表示されていますので、
他の箇所に問題があるのではないでしょうか?

もしくはFirefoxのバージョン?
    • good
    • 0

#box-s{


width:300px;
border: 1px solid #000000;

上記のような指定では、IEのみ内寸で298pxになって、それ以外のブラウザでは300px(外寸302px)になります。
borderの1pxのせいで2ピクセルおかしくなっているって事ですね。

そのうえで
text-align:left;
のせいで、左右余白が2ピクセル違う、元々padding: 4px;なので2ピクセルの違いが目立つ、という事です。
text-align:center;として、中央に寄せればよいかと。
IEのみ左右4ピクセル、それ以外では左右は5ピクセルとなる。

この回答への補足

1~5ピクセルぐらいの少しの余白ではなく、15ピクセルぐらい
余白が出来るんです;;
centerにしても、左右が同じだけ大きな余白が。。

補足日時:2010/04/06 11:34
    • good
    • 0

text-alignがleftだからでは?



試しにcenterにするか・・・
余白で調整するか・・・・
できると思います。

この回答への補足

1~5ピクセルぐらいの少しの余白ではなく、15ピクセルぐらい
余白が出来るんです;;
centerにしても、左右が同じだけ大きな余白が。。

補足日時:2010/04/06 11:32
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q画像を横に並べると隙間ができてしまいます

メニューを作るために画像画像画像画像画像画像と並べた所、一番右端に隙間ができてしまいます。画像画像画像画像画像画像□←こんな感じの半角スペースです。画像と画像の間の余白はマージンを0に指定して削除できましたが、右端の余白はどうすれば削除できるんでしょうか?ちなみにメニューに使用した画像6個分の大きな画像を1つ貼った場合このような余白はできませんでした。

Aベストアンサー

こんにちは。
コーディング環境でたまに見られる事例です。

<img><img><img><img><img><img>
<div>~</div>
<p>~</p>
というソースがあったとします。

↑最後の<img>で改行しました。
インライン要素である<img>の後ろに(ソース内)改行があると
それが半角スペースと認識されるケースがあります。
(↓■=半角スペース)

<img><img><img><img><img><img>■
<div>~</div>
<p>~</p>

また、

<img>
<img>
<img>
<img>
<img>
<img>

<div>~</div>
<p>~</p>

というソースを書くと、

<img>■
<img>■
<img>■
<img>■
<img>■
<img>■

<div>~</div>
<p>~</p>

となり、画像の後ろに必ず半角スペースが入ってしまう!というケースもあります。

これを防ぐには、

<img><img><img><img><img><img><div>~</div>
<p>~</p>

↑<img>で改行させずにタグを続けるか、

<div><img><img><img><img><img><img></div>
<div>~</div>
<p>~</p>

↑のようにブロック要素に入れてやると直ると思います。

見当違いな回答だったらごめんなさい。
参考になれば幸いです。

こんにちは。
コーディング環境でたまに見られる事例です。

<img><img><img><img><img><img>
<div>~</div>
<p>~</p>
というソースがあったとします。

↑最後の<img>で改行しました。
インライン要素である<img>の後ろに(ソース内)改行があると
それが半角スペースと認識されるケースがあります。
(↓■=半角スペース)

<img><img><img><img><img><img>■
<div>~</div>
<p>~</p>

また、

<img>
<img>
<img>
<img>
<img>
<img>

<div>~</div>
<p>~</p>

というソースを書く...続きを読む

QCSSの左横に隙間ができてしまいます。

画像の左横に謎の隙間(8mmほど)ができて埋まりません。
そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。
padding や vartical-align、text-alignなど試してみましたが、ダメでした。

とても困っています、どなたかご教示くださいますようお願いいたします。

<< CSS >>
#header {
width:940px;
height:59px;
margin: 0 0 20px 0;
}
#logo {
width:300px;
height:59px;
float:left;
margin: 0 20px 0 0;
}

#menu {
width:620px;
height: 59px;
padding: 0;
margin: 0;
float:right;
}
#menu img {
padding-top:8px;
border:none;
}
#menu ul {
margin:0;
}
#menu ul li {
margin: 0px;
padding: 0px;
list-style-type: none;
display:inline;
float:left;
}

<< HTML >>
<div id="header">
<div id="logo">
<img src="img/logo.gif" width="298" height="59" alt="ロゴ">
</div><!-- /#logo -->

<div id="menu">
<ul>
<li><img src="img/btn_A.gif" width="194" height="51"></li>
<li><img src="img/btn_B.gif" width="140" height="51"></li>
<li><img src="img/btn_C.gif" width="149" height="51"></li>
<li><img src="img/btn_D.gif" width="137" height="51"></li>
</ul>
</div><!-- /#menu -->
</div><!-- /#header -->

画像の左横に謎の隙間(8mmほど)ができて埋まりません。
そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。
padding や vartical-align、text-alignなど試してみましたが、ダメでした。

とても困っています、どなたかご教示くださいますようお願いいたします。

<< CSS >>
#header {
width:940px;
height:59px;
margin: 0 0 20px 0;
}
#logo {
width:300px;
height:59px;
float:left;
margin: 0 20px 0 0;
}

#menu {
width:620px;
height: 59px;
padding: 0;
margin: 0;
float:right;
}
#...続きを読む

Aベストアンサー

リストの整形はぶらうざによって差があります。ul要素やli要素に、またmarginで左を空けていたり、パディングで空けていたりします。
そのため、
#menue ul,#menue ul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;line-height:20px;
}
のようにセレクタをグループ化してまとめておけば、ブラウザ間の差を吸収できます。
そのうえで、
#menue ul li{display:inline;}
または
#menue ul li{float:left;}
です。floatの場合はblockのまま、inline-blockの場合は、text-align:centerで横に並べます。
 この場合
「ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )」
という仕様--ルールのためli間にスペースができます。white-spaceに
normal,pre,nowrap,pre-wrap,pre-lineのいずれを指定しても・・
 そのためHTMLを
<ul><li><img src="img/btn_A.gif" width="194" height="51"></li><li>
<img src="img/btn_B.gif" width="140" height="51"></li><li>
<img src="img/btn_C.gif" width="149" height="51"></li><li><img src="img/btn_D.gif" width="137" height="51"></li></ul>
とかくことになります。

 なお、
#menue ul li{width:23%;position:relative;}
#menue ul li a{display:block;width:100%;height:100%;text-decoration:none;}
#menue ul li img{display:block;width:100%;height:100%;}
とすると、ウィンドウ幅に合わせて伸縮しますから、そもそもの悩みはなくなります。





この場合でも、

リストの整形はぶらうざによって差があります。ul要素やli要素に、またmarginで左を空けていたり、パディングで空けていたりします。
そのため、
#menue ul,#menue ul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;line-height:20px;
}
のようにセレクタをグループ化してまとめておけば、ブラウザ間の差を吸収できます。
そのうえで、
#menue ul li{display:inline;}
または
#menue ul li{float:left;}
です。floatの場合はblockのまま、inline-blockの場合は、text-align:centerで...続きを読む

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

QHTML タグ セル内余白を無くす方法

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法?

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を2列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合をしないで、ごく普通に2行2列にすると画像とセル枠との間には余白が生じない。
セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、OSはWinXP、ブラウザはInternet Explorer6です。

次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法?

<table border="1">
<tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td rowspan="2"><img src="a.gif"></td></tr>
<tr><td><br></td><td>
</table>
テーブル内を2列にして、画像を縦方向に画像高さの半分だけズラして表示したい。
セル結合...続きを読む

Aベストアンサー

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
</table>
</td>
</tr>
</table>

表を入れ子にしたらどうでしょうか↓

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td><img src="a.gif"></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>...続きを読む

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング