![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
HPビルダーを使用して、HPを作成中です。
現在、表の上にタブをイメージした画像を挿入したいと考えています。
作成中の画面では、表のすぐ上に隙間なく(余白なく)画像がくっついているように見えているのですが、プレビューすると画像と表の間に隙間ができてしまいます。
この隙間をなくす方法はありますでしょうか。
自分なりに調べたところ、 表の定義のところに「topmargin="0"」などを入れるといいのかと思ったのですが、それでも余白は消せませんでした。
初心者のため、とても初歩的な質問になってしまっているかもしれませんが、是非助けて頂きたいです。
No.2ベストアンサー
- 回答日時:
画像をTRのタグで囲っていますが、caption(表題)にした方が良い様な感じもします。
とりあえず、画像と表の間の余白を消したいのであれば
margin-bottom : -4px と無理やり余白を消してやる方法で
画像の方にスタイルシートを適用してはどうでしょうか?
<img src="image5.gif" style="margin-bottom : -4px;">
-4pxの所は、ご自分で調整してみて下さい。
タグで表すと
<TR>
<TD><img src="image5.gif" style="margin-bottom : -4px;"> ←タブ画像です
<TABLE border="0" width="586" bgcolor="#004000" cellpadding="0" cellspacing="2">
<TBODY>
<TR>
<TD bgcolor="#679f00" height="8"></TD>
</TR>
<TR>
<TD bgcolor="#ffffff"> <FONT size="-1">テキスト</FONT></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
ご回答、ありがとうございます!
ご指摘通り「margin-bottom」を設定したところ、余白が消せました!
なるほど、余白なし=0、ではないんですね。
マイナスの値が設定できることをはじめて知りました。
(というか、そもそもmargin-bottom という書き方も初めてですが。)
とても助かりました。これから少しづつ自分でも勉強していければと思います!
No.3
- 回答日時:
要するにタブの画像と、その下にある表の枠線をぴったりくっつけたいということでしょうか。
私的にはこんな感じで作りますけど。手順1) 2行1列の表1を挿入。
表1のプロパティは、罫線の幅0px、セル内の余白0px、枠表示0px
この表1は、レイアウト用なので線は見えない。
手順2) 表1の1行目セルにタブの画像を貼り付け
手順3) 表1の2行目セルには、新しく別の1行1列の表2を挿入。
この表2の「表のプロパティ」は、以下のように設定。
・罫線の幅1px、セル内の余白0px、枠表示0px
・背景色はタブの色と同じ色を選ぶ。色はウェブアートデザイナーのスポイトツールでタブの色(RGUの各数値)を調べればOK。
さらに、表2の「セルのプロパティ」を次のように設定します。
・背景色を白。セル幅を414px、高さを517pxにする。
これでタブの色と同じ1pxの枠線ができます。後は、必要に応じて表2の中に、表1のような、レイアウト用の表をさらに入れて文字などをいれてもいいわけです。
これは一例で、方法はいくらでもあると思いますから、自分でいいデザインだと思ったHPには、名前をつけて保存して、後で研究するといいですよ。とても自分には作れないと思ったHPがしばらくするともっときれいにできたりするものです。どう作るべきかは、いろいろな考えがありますが、基本的には、見る人が使いやすいHPなら、好きなように作っていいと思います。
お礼が遅くなり申し訳ありません&ご回答ありがとうございます!
ご回答の例でも自分で作成してみました。
これでも確かに私のイメージ通りに表示されました!
なるほど、同じようなデザインを作るのにも色んな方法があるんですね。とても勉強になります。まずは自分のイメージするものの答えに自力でたどり着けるようになるために、必死に勉強してみます!
No.1
- 回答日時:
ご回答ありがとうございます!
早速ご指摘頂いた点を確認してみたのですが、余分な改行はないように思えました。
ただ、ソースをきちんと理解していないので(お恥ずかしながらほぼビルダー機能任せで、ソースは後追いで勉強中です^^;)、私の確認方法に問題があるのかとも思いますので、該当部分のソースを以下に記述させて頂きます。
可能であれば、ソース問題点をご指摘頂けますでしょうか。
====================================
<TR>
<TD><IMG src="image5.gif"> ←タブ画像です
<TABLE border="0" width="586" bgcolor="#004000" cellpadding="0" cellspacing="2">
<TBODY>
<TR>
<TD bgcolor="#679f00" height="8"></TD>
</TR>
<TR>
<TD bgcolor="#ffffff"> <FONT size="-1">テキスト</FONT></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
====================================
長文で、失礼致しました。よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- WordPress(ワードプレス) WordpressでYouTubeの埋め込みができない。 1 2022/10/26 01:08
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- Mac OS Macか Windowsか?悩んでいます。 6 2023/04/07 09:35
- Windows 10 パソコン初期化の件です 2 2022/06/05 11:05
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エクセル 画面表示拡大率によ...
-
表の幅が広がる
-
テーブル内の左右にだけ余白を...
-
Excelの表の幅をA4サイズを変え...
-
CSSのtransform: translate(-50...
-
htmlでテーブル内にテキストボ...
-
バーコードのサイズは拡大縮小...
-
aタグに直接style=""で:hoverを...
-
エクセルでサイズに合ったもの...
-
インラインフレームの表示位置...
-
Excelで可視部分だけをWeb形式...
-
window.open _self でとんでく...
-
Excelの列や行の幅を表示...
-
指定時間になったら、WEBサイト...
-
macとwindowsのレイアウト崩れ...
-
なぜ左に寄っているの?
-
Excel で等間隔で縦線を引きた...
-
PDFへてのテキストボックスにて...
-
HTMLでテーブルを縦に並べたい!
-
<h1>タグの後の行間を詰めたい。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
エクセル 画面表示拡大率によ...
-
ホームページビルダーでセルの...
-
表の幅が広がる
-
ホームページビルダーの表にお...
-
Microsoft1Officeの互換ソフト...
-
【DreamWeaver】セルの幅を変更...
-
Word2003で表中の文字が勝...
-
ホームページビルダー(表の色...
-
ホームページの文字が縦に表示...
-
エクセルで一部分のセルの高さ...
-
word,excelで、cm...
-
オープンオフィス ライターの文...
-
ホームページビルダー17 画像挿入
-
ホームページビルダー7で表の枠...
-
HPビルダーで、表を等間隔で...
-
Excelで5×8cmの表を作る方法
-
ワード2002で作成した枠を...
-
ホームページビルダー7にある...
-
ドリームウィーバーでこんな表...
-
エクセル セルの枠(グレーの...
おすすめ情報