- 締切済み
スタイルシート・CSSの画像の余白について
ショッピングサイトを作成しております。 楽天ショップでよくあるメイン画像を何枚か縦に並べて長いページを作成していくという作業です。 スタイルシートで作成していますが、画像を縦に並べていき、アップすると画像の下に余白ができてしまいます。 margin、paddingは0pxで指定あります。 何か原因、いい修正方法などありましたら、ぜひ教えて下さい。 よろしくお願いします。
- yu-rio
- お礼率70% (12/17)
- その他（プログラミング・開発）
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- Oh-Orange
- ベストアンサー率63% (854/1345)
★回答 ・アップロードしたときの画像の下に出来る余白とはどこの事ですか？ (1)画像と『この商品は●●のため、以下の点にご注意ください。』メッセージの間。 (2)『この商品は●●のため、以下の点にご注意ください。』メッセージとその下の間。 あと『<p class="pix14">』の pox14 のスタイルシートの情報をお願いします。 お試し: ・(1)の場合は pox14 のスタイルシートで『MARGIN:0px』を追加すれば良いでしょう。 ・(2)の場合は BODY タグのスタイルシートで『MARGIN:0px』を記述すれば良いでしょう。 CSSサンプル: BODY{ MARGIN:0px; } HTMLタグの時: <BODY STYLE="MARGIN:0px"> ： </BODY> その他: ・上記のどちらの場合でも BODY タグに MARGIN:0px を指定すれば余白は出なくなります。 ・あとスタイルシートで『MARGIN』、『PADDING』の指定に単位として『px』を付けた方が 分かりやすいですよ。→『MARGIN:0px;』とか、『PADDING:0px;』とすべきです。 ・以上。参考に。
- Oh-Orange
- ベストアンサー率63% (854/1345)
★いきなり補足要求します。 ・margin、padding ともに 0px ならば、HTML ソースが原因かもしれません。 重要な部分が分かるように簡略化したソースを提示して下さい。 原因を探ってみます。
補足
ご回答ありがとうございます。 HTMLソース添付しました。いかがでしょうか・・・ （CSSも下部に添付しました。） *---------------------------------------------* <div class="ItemBox"> <p> <img src="image/●●-01.jpg" width="580" height="469"> <img src="image/●●-02.jpg" width="580" height="473"> <img src="image/●●-03.jpg" width="580" height="473"> <img src="image/●●-04.jpg" width="580" height="327"> <img src="image/●●-05.jpg" width="580" height="403"> <img src="image/●●-06.jpg" width="580" height="364"> </p> <p class="pix14"> この商品は●●のため、以下の点にご注意ください。 ●●● </p></div> *---------------------------------------------* .ItemBox{ margin:0; padding:0; width:580px; text-align:center; float:left; } *---------------------------------------------*
関連するQ&A
- メニューをスタイルシートで設定
画像を使用したメニューをULタグとLIタグで作成し、 スタイルシートで余白等の設定しましたが、画像の下に余白が入ってしまいます。 背景色をつけたところ、LIタグに余白がついていることは 確認できたのですが、これをなくす方法が分からずにいます。 HTML----------------------------------------------------- <UL> <LI><IMG src="img/img1.gif" width="265" height="21"></LI> <LI><IMG src="img/img2.gif" width="265" height="21"></LI> <LI><IMG src="img/img3.gif" width="265" height="21"></LI> </UL> CSS----------------------------------------------------- UL { list-style-type:none; margin:0px; padding:0px; } LI { padding:0px; margin:0px; } アドバイスを頂けると助かります。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- IE6で画像の下に余白が入ってしまいます。
CSSを使ってレイアウトをしているのですが、 <ul> <li>画像</li> <li>画像</li> <li>画像</li> </ul> でなぜか画像ごとに、下の部分に少しだけ余白ができてしまいます。 CSSでmarginやpaddingを0にしたり、 http://www.happy-crossing.com/tagmemo/log/eid11.html にあるようにvertical-align:bottomにしたり・・・ それでもなぜか下の余白が表示されています。 こちらの方は治ったみたいなのですが・・・ 他のブラウザはいろいろ見ましたが、余白などなく表示されていました。 Dreamweaver上でも少し余白が見えています・・・ お心当たりのある方がいらっしゃいましたら、どうかよろしくお願致します。 CSSは以下のように記述しています。 ul { float: left; margin: 0px; padding: 0px; list-style: none; margin-top: 45px; } li { width: 150px; background-repeat: no-repeat; padding-left: 13px; padding-bottom: 0px; height: 140px; float: left; vertical-align: bottom; margin-bottom: 0px; }
- ベストアンサー
- HTML
- スタイルシートの記述方法に関して。
スタイルシートで、基本的なデザインは一通り出来ると思っています。 実は今サンプルのスタイルシートを修正しています。 スタイルシートの記述方法に関して、質問があります。 サンプルのスタイルシートの記述方法ですが、要素の記述にて上位の要素を全て記述し、最終的な要素を記載しています。 例として 一番外側の要素を：#wrapper ヘッダー：#header コンテンツ：#content メインコンテンツ：#main サイドコンテンツ：#side とします。 自分の場合であれば、スタイルシート内の記述は div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#header { width: 480px; margin: 0px auto; padding: 0px; } div#content { width: 480px; margin: 0px; padding: 0px; } div#main { float: left; width: 300px; margin: 0px; padding: 0px; } div#side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述していましたが、サンプルでは以下の通りに記述されています。 div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#wrapper #header { width: 480px; margin: 0px auto; padding: 0px; } div#wrapper #content #main { float: left; width: 300px; margin: 0px; padding: 0px; } div#wrapper #content #side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述されています。 上記の記述に、技術的に有利になる点は有るのでしょうか、単に CSS の記述を判りやすくしているだけのように思えます。 上記の記述方法は、一見判りづらいと思いますが、記述している要素が確実に判ると思います。 ただ、その反面 CSS のソースが肥大化します。 上記の記述方法に、他にメリット、デメリットがあるのかアドバイスを頂ければ幸いです。 ちなみに、参考にさせて頂いてる CSS のソースは海外で作られたソースになります。 海外では一般的に使われている記述方法になるのでしょうか。
- ベストアンサー
- CSS
- スタイルシートを使って段組でのバディングは？
書籍にのっていたスタイルシートでの段組を 次のように記述してみました。 <DIV style="float:left;border-right:3px dashed #000000;width:50%;padding-left:10px;"> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV><DIV style="padding-left:10px"> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </DIV> 中央に点線が入って文章が左右に分けられるのですが、 文字と中央線の余白がないので、paddingやmarginを使って みたのですが、特に右側文章の左にある点線と文字の空間がどうしてもできません。（左側部分のの左右余白は機能するのですが） tableを使ったときはpadding-leftで設定できたのですが、正しい方法がありましたらお教えください。 書籍にもここらへんの説明がないのです。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシート【複数の画像の配置について】
初めまして、質問させていただきます！ 今、サイトを構築中なのですが、そこで困ったことがおきました。 <link rel="stylesheet" type="text/css" href="./default.css" media="all" /> <style type="text/css"> <!-- Body{ margin:0 margin:0;} --> IMG.a{ position: relative; left:60px; top:60px;z-index:1;} IMG.b{ position: relative; left:100px; top:20px;z-index:0;} </style> </head> <Body Style="margin:0 margin:0;"> <img class="a" src="**" alt="**" width=197 height=143> <img class="b" src="**" alt="**" width=78 height=59> このように、スタイルシートで画像の位置を指定しているのですが、 画像を増やしていくと、下（または上）に余白が出来き、どんどんスクロールが出来るようになってしまい、うまく画像を配置できなくなってしまいます。 ちなみに画像はFireworksで作ったものを書き出したものです。 他にタグを打ち込むなどで、解消できるのでしょうか？ 構築は初めてで、タグの知識もほとんどありません。 どうか、よろしくお願いいたします。
- 締切済み
- HTML
- CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。
CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。 スタイルシートで、画像の縦サイズに合わせて中央揃えで文字を表示したいのですが、 どのように記述したら良いのかわかりません。 下記のようにテーブルを使えば簡単に出来るのですが、 これをスタイルシートのみで表現するにはどのように記述すればいいのでしょうか？ ちなみに左側画像の縦サイズは変わります。 よろしくお願いします。 ------------------------------------------------------------------- <html> <head> <title>CSS</title> <style type="text/css"> <!-- #waku { width: 451px; margin: 0; padding: 6px 8px 6px 8px; background-color: #008837; } --> </style> </head> <body> <div id="waku"> <table width="435" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="80"><img src="hoge.gif" width="80" height="変わります"></td> <td width="355" valign="middle">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------
- 締切済み
- HTML
- スタイルシートでのメニュー作成で
今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■ CSS ■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■ HTML ■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- スタイルシートの・・・
スタイルシートをなんとか改変して、画像をランダム表示するように したいのですが自分では知識不足でできません＞＜ どう改変すればできるのか、どなたかお願いします。 /* トップ画像指定(アドレス、と画像の縦幅横幅も指定) */ #head { width:200px;/*横幅*/ height:150px;/*縦幅*/ margin:0px 1px; background:url(../img/画像データ.PNG) no-repeat center center;/* 画像アドレス */ border:1px solid #333333;/* 画像周りのライン */ }
- ベストアンサー
- その他（ITシステム運用・管理）
- スタイルシートでデザイン
現在スタイルシートを使ってホームページを作成中の者です。 しかしそのデザインがうまくいかず困っております。 文字が中央に打ってある長方形の赤枠があります。 間２０PXくらいあけて平行にまた文字が中央に表記されてある枠を置きたいのですがうまくいきません。 marginとpaddingでpxを指定しているのですが両者の枠が平行にならず 片方の枠が下の方に下がってしまいます。 視覚化するとこんな感じにしたいのですが ーーーーーー ーーーーーー ｜ 映画 ｜ ｜ 小説 ｜ ーーーーーー ーーーーーー いつも ーーーーーー ｜ 映画 ｜ ーーーーーー ーーーーーー ｜ ｜ ーーーーーー とこんな感じに片方の枠が下の方にずれてしまいます。 指定の仕方に問題があると思うのですが、 何分初心者なもんでよく分かりません。 marginは右枠４０px５５０px１５０px３０px 左枠１０px５５０px１５０px３０px にしています。 上をそろえさえすれば両枠平行になるだろうと思っていたのですが 全くなりません。ずれるばかりです。 わかりにくい説明でふがいないですが どなたかお分かりの方おられればよろしくお願いします！
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシート
スタイルシートを使ってホームページを作り始めたんですが、左にメニューを作りたかったので body { margin: 0px; padding: 0px; } .main { width: 580px; position: absolute; left: 210px; } .side { width: 180px; margin-left:10px; } とcssファイルを作り何個かのページに記述したらトップページを除いて他のページは配置がおかしくなったりレンタルサーバの広告がど真ん中に重なったりしてしまいます。なぜでしょうか？ 配置がおかしいとはsideとmainが ■■という配置にして欲しいのですが ■ ■という風になってしまいます。 わかりにくくてすみません。
- 締切済み
- HTML
お礼
本当に親切にご回答ありがとうございます。 まだまだ私も勉強不足で反省しております。。。 一度試してみます。 ありがとうございましたm(_ _)m