いろいろなサイトで(OKWEBもそのひとつ)でおそらくtable のタグを使っているのだと思いますが、ブラウザの一番上まで隙間がない状態で設置する方法がわかりません。実際に試してみましたが、隙間のない状態で設置できませんでした。どうかおしえていただけないでいしょうか
?お願います。

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

A 回答 (3件)

下の方々の回答にちょっと補足します。



テーブル内の画像などをぴったり端に寄せるには、<table>タグでも指定が必要です。

<table CELLPADDING=0 CELLSPACING=0>

な感じです。

# CELLPADDING=n
# ↑枠線とセルの内容の間の隙間をピクセル単位で指定
# CELLSPACING=n
# ↑内枠の太さ指定
    • good
    • 0

こんにちは。

少し補足です。

<body topmargin="0" leftmargin="0">
だけでは、Netscapeで見た時には隙間が空きます。

topmargin → marginheight
leftmargin → marginwidth

Netscapeでは、こちら↑が同じ意味になります。ので、

<body topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">

の様にセットで指定した方がイイと思います。
両方書いてもエラーは出ないので、大丈夫ですよ。

topmargin,leftmarginは、上と左の余白のような名前ですが、
正確には、上下、左右の指定のようです。
右だけ変えたいときは『rightmargin』
下だけ変えたいときは『bottommargin』
を使って下さい。Internet Explorerだけですが・・。

では、頑張って下さいね。
    • good
    • 0

多分、ブラウザとテキストの隙間を無くしたいということだと思いますが、



<body>タグ内に topmargin="*" leftmargin="*"を加えればいいと思います。


topmargin は上端との、 leftmargin は左端との隙間を
ピクセル値で設定するものです。

例えば、
<body topmargin="0" leftmargin="0">とすると、
ブラウザとテキストの隙間がゼロになります。

gooのサイトでは、topmargin="3" leftmargin="3"で管理されているようです。

貴方がレイアウトなどで気に入ったサイトがあれば、そのページのソースを見てみると勉強になりますよ。聞く前にまずソースを見ることです。
    • good
    • 0

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

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

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

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

Qtableにtable。table同士の間隔を拡大

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

#end{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #40ee22;
}

td.test1{
background-color: #000000;
color: #333333;
}

td.test2 img{
margin: 10px;
}

.test3{
font-size: 12px;
padding: 5px;
}

td.test4{
text-align: center;
}
</style>
<table id="test0">
<tbody>
<tr>
<td>
<DIV style="height:400px; overflow:auto;">

<table id="start">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table class="center">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table id="end">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
...続きを読む

Aベストアンサー

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
</div>
</body>
</html>

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li c...続きを読む

Qtable内の隙間

こんにちは。
html勉強中です。
下のサイトをまねしたいなと思いました。
http://www.earle-brown.org/

そこで質問です。
Safariで見ると、画像の切れ目が線となって現れています。
これはなぜでしょうか?
どうやって解決したらいいのでしょう。
どなたか解説よろしくお願いします。

Aベストアンサー

元々は1つの画像を5つのパーツに分けて画像にし、それをtableレイアウトで隙間無くくっつけて一枚の画像の様に見せているんですが、tableの属性の一部にマイナス値を入れたりしてるもんですからSafariではそこが無視されてしまい、その結果cellspacingにはディフォルト値(おそらく1~2px)が適用された状態になる為、画像を入れたセルとセルの間に隙間が出来ます。

【誤】
<table BORDER=0 CELLSPACING=-30 CELLPADDING=-30 width="640">

【正】
<table cellspacing="0" cellpadding="0" border="0"width="640">

※そもそもなんで-30なんていう不可解な値を入れているのか理解に苦しむところですが…

でも、せっかくHTMLを勉強中なら、できることならこのサイトは参考にしないで下さい。
headの中にてんこ盛りで入ってはいけない情報が入っていたり、というのを初めとしてちょっと今時有り得ないだろうというレベルのコーディングですから…

元々は1つの画像を5つのパーツに分けて画像にし、それをtableレイアウトで隙間無くくっつけて一枚の画像の様に見せているんですが、tableの属性の一部にマイナス値を入れたりしてるもんですからSafariではそこが無視されてしまい、その結果cellspacingにはディフォルト値(おそらく1~2px)が適用された状態になる為、画像を入れたセルとセルの間に隙間が出来ます。

【誤】
<table BORDER=0 CELLSPACING=-30 CELLPADDING=-30 width="640">

【正】
<table cellspacing="0" cellpadding="0" border="0"widt...続きを読む

Qタグ、セルの隙間

初めてなので上手く伝えられなかったらすみません。
テーブルのセルの隙間を調整したいんですが上手くできません。


<table cellspacing="0">
<tr>
<th></th><td></td>
</tr>



<tr>
<th></th><td></td>
</tr>
</table>

という形です。thとtdにはテキストが入っています。
縦の幅をそろえたいんですがcellspacing="0"をしても一行の高さより間隔が広いのをなんとかしたいんです。thの中に改行があるのでそれと合わせたいんです。
これはline-heightとかで何とかなりますか?一応文字サイズ変えたり見ても均一な行間になるようにしたいので高さ指定だとあまり良くないと思ってます。
CSSもいくらか分かるので、HTMLかCSSで上手い対策をごぞんじの方教えてください。

Aベストアンサー

ああ、ようやく分かったような気がします。
<table cellspacing="0" cellpadding="0" border="0">
これでどうですか?
デフォルトだとセルの枠と内容との間に、わずかに余白ができているので、
cellpadding="0"で余白を0に指定します。

<table cellspacing="0" cellpadding="0" border="1">
<table cellspacing="0" border="1">
この二つで見比べると分かりやすいかと。

Qtable周辺の隙間をなくしたい。

ヘッダーのバーとすぐ下のtableの間の隙間を無くしたいのですが、どうすれば良いのでしょう。

margin属性を調整すれば隙間を無くせるブラウザもあるようですが、IEはどうしてもダメなのではないでしょうか。なによりも、ブラウザ次第で隙間の大きさが違うのに困っています。



***** 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;
}

ヘッダーのバーとすぐ下のtableの間の隙間を無くしたいのですが、どうすれば良いのでしょう。

margin属性を調整すれば隙間を無くせるブラウザもあるようですが、IEはどうしてもダメなのではないでしょうか。なによりも、ブラウザ次第で隙間の大きさが違うのに困っています。



***** 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; ...続きを読む

Aベストアンサー

もしかしてマイナスマージンを指定していることと関係あるのでしょうか?
テーブルのセルの間隔などを指定するプロパティが用意されているので、それを使えば解決するのではないでしょうか。
imgのマイナスマージンを消してtableにborder-collapse:collapse;を追加します。

Q
  • タグについて

    初心者です。

    <li>と<table>タグについて、どのような基準で使い分けるのでしょうか?

    何かのページで表として認識できる場合は<table>とありましたが、実際には<li>で記述されているケースが多いように感じます。それぞれのメリット・デメリットを教えていただけるとありがたいです。

    Aベストアンサー

    リストと表の違いで区別するのが良いでしょう。
     ul li は、デフォルトで、頭に " ・ " が付きますから、
    HTML(マークアップ)的に考えれば、箇条書きです。

    表は、エクセルで作る様な「表」と考えれば良く、
    セルの枠線(border)が表示されても表現的に問題ない場合が「表」です。

    マークアップを無視して、レタリングだけなら、
    CSSで、どちらでも(それ以外の方法でも)同じに表示出来ます。

    また、tableの場合、クローラーのセルの読み込み順が変わる場合がありますので注意が必要ですし、旧IEでの差異もあります。
    後から、セルの追加で列計算がある場合に修正がちょっと面倒です。
    CSSが利用出来る昨今は、tableが嫌われる方向です。
    大きなtableは読み込みが遅くなるので、表示が遅くなります。

    初心者は、簡単にtableレイアウトで全体を作る事が出来るので、
    利用しがちだったり、某簡易ソフトもtableレイアウトが多いですね・・・

    良く見掛けるのは、ナビ(グローバル)メニューの部分ですが、
    table でも ul でも作れますが、項目リストと考えれば、
    ul li が正解でしょう。簡単なのはtableで固定する方法ですが・・・

    リストと表の違いで区別するのが良いでしょう。
     ul li は、デフォルトで、頭に " ・ " が付きますから、
    HTML(マークアップ)的に考えれば、箇条書きです。

    表は、エクセルで作る様な「表」と考えれば良く、
    セルの枠線(border)が表示されても表現的に問題ない場合が「表」です。

    マークアップを無視して、レタリングだけなら、
    CSSで、どちらでも(それ以外の方法でも)同じに表示出来ます。

    また、tableの場合、クローラーのセルの読み込み順が変わる場合がありますので注意が必要ですし、旧IEでの差異...続きを読む


    人気Q&Aランキング

    おすすめ情報