- 締切済み
<h3>タグと画像の隙間をなくしたい
無料ホームページテンプレート『template party』（URL https://template-party.com/db_template/?act=list&ord=1&kind=1&limit=100&html=list_all.html&top=0&page=2）の『tp_kids4_blue』というテンプレートを私用させてもらっています。 <h3>タグ（青い線で囲まれて表示されている）の下に画像を表示させた際に、隙間ができてしまいます。 この隙間をなくし、青い線と画像をくっつけて表示させたいです。 どのようにすればいいのか具体的に教えていただけると助かります。 よろしくお願いします。 多分CSSで設定するのだろうと思い、カテゴリを設定しましたが、違っていたらすいません。
- syosinsyasan
- お礼率60% (59/98)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- 4017B
- ベストアンサー率73% (1303/1774)
とりあえず… #main h3 + .my-img { margin-top: -20px; } ～上記、CSSを当該テンプレート用のCSSに追記して保存。で、表示させたい画像は<div>で囲っていた方が後々に修正やデザイン等が楽になるので、以下の様な感じのHTMLとして記述。 <h3>利用規約のご案内</h3> <div class="my-img"><img src="test.jpg"></div> <p>..... 基本的にはコレでお望みの様なデザインになるはず。もし上手くいかないのであれば、根本的な勘違いをしてるか、或いは他の要素が競合してる可能性があるため、実際のwebページを提示して貰わないとアドバイス不可。 P.S. 記法等の解説は下記リンク先の解説記事などを参考に勉強を進めてみてください。 - CSS3:セレクタの種類 http://www.htmq.com/csskihon/005.shtml
関連するQ&A
- ulでの段組の際の隙間
お世話になります。 現在CSSで段組を行っているのですが、リスト（ul）で画像を縦に並べてメニューを作成しようと思っています。 liにはheightやmarginやpaddingなどをきちんと隙間なく並べるように書いて、imgにはvertical-align:bottom;を設定しています。 それでも、IE6.0で見たときどうしても1pxの隙間ができてしまうのです。 どうしてだろうと思い、画像の高さが25pxのものを作成し、liのheightに25pxを設定して（他は上記のCSSでいじらずに）表示すると、きちんと隙間ができずに表示されました。 隙間ができてしまうときのメニュー画像は高さ15pxのものを使用していて、liのheightを15pxと設定していました。 今までCSSで組んだときはきちんと隙間があくことなく表示できたのですが、今回だけどうしても隙間があいてしまいます。 メニューのリストで、使用する画像は小さいときは隙間があいてしまう、というようなバグがIEにあるのでしょうか。 もしそれがバグの場合は一言お教えいただけないでしょうか。 解決方法がなければしょうがないのでテーブルを使用しようと思います。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- カラムに画像を貼った時の隙間
最近ブログを始め、調べてもわからない点があったのでいくつか質問させて頂きます。 カラムに画像を貼ると、カラム幅を狭く設定しているのにもかかわらず画像の両端にAのような隙間が生まれてしまいます。ここを狭くする設定をしたいのですが方法がわかりません。 また、Bの幅もスタイルシートのサイトの幅設定を変更しても変わりません。 設定方法がありましたら教えて下さい。 もしかしたらタイトル下の黒いメニューバーが影響しているのかもしれません。 現在、FC2ブログのテンプレート工房様（http://10plate.blog44.fc2.com/）のwhite_eagleというテンプレートを仕様しています。 タイトル下の黒いメニューは（http://10plate.blog44.fc2.com/blog-entry-176.html）のタグを使用しています。このメニューの全体の幅の設定方法も教えて頂ければ有りがたいです。 わかりにくいと思いますが、よろしくお願いします。
- ベストアンサー
- ブログ
- タブ（画像）とすぐ下のケイ線をすき間なくくっつけたいが、できません
ホームページビルダーでサイトを作っています。 タブ（画像）と、すぐ下のケイ線をくっつけたいのです。しかしできません。 すき間が空いてしまいます。 これが現況です。 http://homepage2.nifty.com/queensroad/ ここにあるオレンジ色のタブ「コレクション１」の画像と、下の同じ色のケイ線を すき間なくくっつけたいのです。 しかし、できません。 検索したところ、すでに似たご質問に次のようなものがありましたが、 私の場合は解決できません。 http://okwave.jp/qa3023427.html 私のページでの現在までのやりかたはこうです。 ・２行１列の表をつくり、１行目にタブの画像を置きました。 ・２行目は、「スタイルの設定」→「レイアウト」→「ボーダー」で ２ピクセルの実線を同じオレンジで入れこれをケイ線としました。 ・タブとケイ線をくっつけるため、 １行目の「コレクション１」の画像を、 「スタイルの設定」→「レイアウト」→「下方向」の「マージン」を 「－５ピクセル」にしました。 すると、ホームページビルダーの「ページ編集」画面上では タブの下とケイ線が見事くっついたのですが、 「プレビュー」やアップロードしてIE7で見てみると、 「コレクション１」の画像の下が欠けていて、すき間が空いています。 「-6 PIXEL」「-7 PIXEL」にしていくと、タブの下がどんどん欠けていくだけで すき間は同じ間隔だけ空いたままです。 それでは、と、下のケイ線を「スタイル」→「レイアウト」で、 「上」の「マージン」を「－５ピクセル」にしたりしましたが 何の変化もありません。 どのようにすればタブと下のケイ線はくっつけられるでしょうか。 そもそも、表の1行目にタブ（画像）を置いて2行目のセルのケイ線を組み合わせる、 というやりかた自体が間違っていて、 もっと「標準的な」というか「王道」の、ほかのやり方があるのでしょうか。 なにとぞアドバイスをお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- 画像とその下にあるテキストの隙間を小さくする方法
ワードプレスで画像を挿入し、その画像の下にテキストを表示させたいと思っています。 管理画面にある「メディアを挿入」の画面で「キャプション」にテキストを記入しました。 これで画像の下にテキストが表示されましたが、画像とテキストの間に広い隙間が出来てしまっています。 この隙間をなくそうと、テキストの部分にクラスを設定し、そのクラスに対してCSSから「margin-top: 0px;」などと記述したのですが、変化がありませんでした。 また、imgタグの最後に「style="margin-bottom: 0px;"」を追加しても変化がありませんでした。 画像とその下にあるテキストの隙間を小さくするためにはどうすればよいのか教えて下さい。
- 締切済み
- CSS
- CGI：HTML表示結果のカスタマイズとタグの隙間
お世話になります。 CGIはフリー配布されているものをわずかに触る程度の初心者で、足りないことを申し上げてしまうと思いますが教えていただけますと嬉しいです。 今、「リンクラリー」というフリー配布のCGIをさわっています。 これをベースにwebスタンプラリー（リンクバナーをスタンプ画像にしたり）として何とか雰囲気だけは近づけたのですが、どうしても表示を思うようにできなかったり、「どうしてこここにこの隙間ができるんだろう…」と自分では解明できない状況が生じました。 CGI配布元様：http://exdreams.net/room/contents/e_lrarry.html (1)進捗を確認する「user_rarrylist.html」の一覧表を、５列×３行（15マス）として表示したいのですが、<!－－START RARRY LIST－－><!－－END RARRY LIST－－>で繰り返し処理（スタンプゲット）を挟むと、次の処理との間に隙間ができてしまいます。 TABLEで背景画像（スタンプシート）とWIDTHを指定していますが、ゲットしたスタンプ（IMG）がずれていきます（背景とうまく重ならない）。 ●TDタグ使用→TDタグで15個生成されるため、横に15マスの長い表ができてしまう。 (2)指定したID名にゲットスタンプを放り込む、などという方法は思いついても、実現可能かどうかさえ分かりませんでした。 (2)DIVタグのID属性（名前）を利用して、ボックスの表示・非表示をコントロールすることは可能でしたが、やはり隙間の問題と、思った順番（スタンプA→ボックス１に表示）することができませんでした。 (1)(2)(3)(4)(5) (6)(7)(8)(9)(11) (12)(13)(14)(15)(16) このように「5×3」で番号順に（ゲット順に影響受けず）表示ができればと思っております。 もし可能であれば、教えていただけますと嬉しいです。 よろしくお願いいたします。
- ベストアンサー
- CGI
- 画像を表に貼り付けて切り目がでないようにしたいのですが
ＷｉｎＸＰで、ホームページビルダー９を使っています。 ホームページ用に１つの画像を９等分くらいにして、画像のロールオーバー効果を使いたいので、表に貼り付けて切り目がでないようにしたいのですが、何処でも配置モードでは、各画像の微調整ができるので可能ですが、標準モードで表に入れると画像と画像の間に隙間があいてしまいます。枠幅は０や枠非表示等で設定してみたのですが・・・他の表スタイルを使っても、線が微妙に出たりで、綺麗に つながりません。何か設定でいい方法はないのでしょうか？何処でも配置モードでは、画像の中央表示ができないので、画面中央に表示させたいので・・・・
- ベストアンサー
- その他(ソフトウェア)
- 画像を使ったテーブルで隙間ができてしまいます
画像を枠に使ったテーブルをHTMLで作成し、FC2ブログに載せています。 Chrome上ではうまく表示されるものの、IE、Firefoxでは Rowの上に隙間ができてしまい、枠画像が正しく表示されません。 ----------Tableの基本構造---------- <table cellspacing="0" cellpadding="0" border="0" width="x" height="y" bgcolor="#FFFFFF"> <tr><td><img src="左上角"></td> <td><img src="上部"></td> <td><img src="右上角"></td></tr> <tr><td width="15"><img src="左１列目"></td> <td style="color:# … ;"> 内容1</td> <td width="15"><img src="右1列目"></td></tr> <tr><td width="15"><img src="左2列目"></td> <td style="color:# … ;"> 内容2</td> <td width="15"><img src="右2列目"></td></tr> <tr><td><img src="左下角"></td> <td><img src="下部"></td> <td><img src="右下角"></td> </tr></table> -------------以上-------------- 上記のものよりも実際は行と列を増やしておりますが、基本的に増殖しているだけです。 1行目と2行目の間に隙間ができて縦の画像枠が細切れになっています。 隙間ができているのは行の下ではなく、上の部分のように見えます。（背景色の見え方などから） テーブルのみの上記コードは、ローカル環境ではIEでも正しく表示されるため、 ブログにアップした際乱れるのは、スタイルシートの影響かと考えております。 自分でそれらしいところをいろいろ設定をいじりましたが改善しません。 ということで、 ≪スタイルシートの設定で、画像を枠に使ったテーブルの隙間に影響を与えうる要素≫ が何が考えられるか教えて頂ければと存じます。 なお、使っているStyle Sheetは以下のものですが、 http://blog-imgs-30-origin.fc2.com/w/m/k/wmks/wm_gienah_R.html TableにかかわるStyle部分はコメントアウトしましたので、テーブル自体のスタイルは 適用されていないはずです。
- ベストアンサー
- CSS
- IE7でプレビューすると隙間が・・・
Dreamweavercs4をテキストを片手に勉強中のものです。 まずは添付画像をご覧いただきたいのですが、 画面中央にある龍の付いている画像と、その数ミリ下にある バナー用の横に細長い画像の間に白い隙間があります。 テキストの通りの手順で進めると隙間ができなくなるはずなのですが、 IE7でプレビューした場合のみ、隙間ができてしまいます。 FirefoxやSafariでプレビューした場合は隙間なく綺麗に表示されます。 手順としての流れは、 画像やテキストを含めた全体部分にdiv「wrapper」を設定。 cssで「wrapper」に幅を指定、paddingは全て0、marginは左右「auto」上下「0」。 龍の画像のある段落を「h1」に指定。 その下部のバナー用の画像のある段落を「h2」に指定。 cssでタグ「h1」と「h2」にそれぞれ「Padding=上下左右0」 「margin=上下左右0」を設定。 わかりにくいかもしれませんが、大まかな流れはこのような感じです。 ちなみに、テキストに添付されていたCD-ROMにある、 完成ファイルをIE7で開いてみると、同様に隙間が表示されました。 これは、IE7特有のバグか何かなのでしょうか？ また、解決法方などご存じのかたがおられましたら、 ご教示いただけないでしょうか。 どうかよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- テーブルの隙間を無くしたい
DreamWeaverCS4を使いホームページを作成しております。そこでテーブルについて、狙い通りに上手く表示が出来なくて困っております。どなたかご指導アドバイスをお願い致します。具体的な内容は下記のとおりです。 ・テーブルを「７列２行（全体の大きさは横700px×縦100px）」で作成し、内訳は１行目は、一枠横100px×縦50pxの大きさで７枠作成。２行目は横700px×50pxで作成。 上記内容のテーブル１行目に横100px×縦50pxのサイズの画像を７つ挿入。そして２行目には横700px×縦50pxの画像を１つ挿入しました。 そしてテーブルの設定は「ボーダーは0」です。 しかし、画像挿入後には２行目の画像横700px×縦50pxが入っているテーブルに隙間が出来て背景が見えてしまいます。１行目を見ると…微妙に各画像間の間に隙間が空いていて、この隙間が全体的に700pxを超えているようなんです。それで、２行目の画像に対して背景が見えて（テーブルの幅が広がってしまっています）いるのです。 そこでですが、画像を配置後にテーブルの隙間をきっちりと無くして背景が見えなくする方法ってあるのでしょうか？ 解る方がいましたら…ご指導…アドバイスをお願い致します…。よろしくお願い致します…。
- ベストアンサー
- HTML
- 画像のアップできない
gooブログの設定一覧 プロフィールの設定で画像をアップできません。 「ユーザー設定」 プロフィールの表示で●プロフィールの表示を選択 写真で、写真を表示するを選択 ●変更するを選択、参照ボタンから画像を選んで、開くをクリックすると参照の欄に画像のパスが表示されますが、ネズミ色の人形はそのままで選んだ画像は表示されません。 画像のサイズは100kです。30kにしても同じです。 拡張子はjpgです。 テンプレートによっては写真アップ出来ないトラブルがある、とWEBページにあったのでテンプレートをいくつか変えてみましたが同じです。 ブラウザーはインターネットエクスプローラＶ7です。 何が原因でしょうか。
- ベストアンサー
- ブログ
お礼
お早い回答ありがとうございます。 まだ忙しくてできてはいないのですが、早速試してみます。