ホームページビルダー10を使ってます。
テーブルだけではなく文字も左寄せをしてもい1cmくらいの無駄なスペースができてしまいます。

どうやったら無駄なスペースが消えるか
わからないので教えてください。

A 回答 (9件)

こんにちは



テーブルでレイアウトするのにこだわるのであればテーブルのmargin-leftをマイナスにしてやればいいです

<style type="text/css">
body {
margin:0px;
}
table {
margin-left:-3px;
}
</style>

これを<head>~</head>内に入れる(<body>内に入れても一緒なんですけど一応そういう風になってるので・・・)
(<body>と<head>の位置関係が反対のような気がするのですけどまだ途中だからですよね?)

もしくは
<body style="margin:0px;">
<table style="margin-left:-3px;>

上の場合はページ全体のテーブルで適応します。下はそのテーブルだけに適応します

この回答への補足

参考になりました!!!この方法を取り入れることにしました。
あとbodyとhead逆になってましたね・・苦笑
気がつきませんでした・・。ありがとうございます。

ちなみにもう一つやりたいことがあるのですが、ページの一番上から下まで縦線を入れたいす。やりかたを知っていたら教えていただきたいのですが・・。お時間があったら教えてください

補足日時:2007/07/03 23:43
    • good
    • 0

> どうやったら無駄なスペースが消えるか


下記で消えるはず。

body {
margin: 0;
}
table {
border-collapse: collapse;
}
table, th, td {
border-style: none;
}
th, td {
padding: 0;
}


> 一番上から下まで縦線を入れたい
body要素にでも下記を指定

CSS2リファレンス 背景画像の指定
http://hp.vector.co.jp/authors/VA022006/css/colo …
CSS2リファレンス 背景画像の繰り返し
http://hp.vector.co.jp/authors/VA022006/css/colo …
CSS2リファレンス 背景画像の初期位置
http://hp.vector.co.jp/authors/VA022006/css/colo …
    • good
    • 0
この回答へのお礼

わかりやすい説明ありがとうございました。
無事に解決しました。

お礼日時:2007/07/15 21:30

なぜ完全に左に寄らないか


それはブラウザにしてある設定のせいです
ホームページビルダー10は関係ないですね
インターネットエクスプローラーの場合
左右に10ピクセル、上下に15ピクセルのスペースをあけるという設定があります
寄せたい場合には
<body leftmargin="0">
というふうにします
すると左右のスペースがあかなくなります
もし左右でスペースの大きさを変えたいのならば
<body leftmargin="100" rightmargin="50">
というかんじで書きます
上の例の場合左端には100ピクセル、右端には50ピクセルのスペースが空きます
上下のスペースを指定する場合も
topmarginとbotoomarginをつかって同じようにします
    • good
    • 0
この回答へのお礼

左に寄らない理由まで説明していただき納得しました。
ありがとございました。

お礼日時:2007/07/15 21:31

>ページの一番上から下まで縦線を入れたい


8x8pxくらいの縦線画像を作り(仮に s.jpg と決め打ちしておきます)、背景を
入れたいタグの style に background:repeat-y url(s.jpg) right; で。

そろそろ、「調べればわかる」質問になってきているので、日ごろお世話に
なっているリファレンスサイトをご紹介。
http://www.htmq.com/index.htm
    • good
    • 0
この回答へのお礼

わかりやすいhtmlリファレンスサイトのご紹介ありがとうございます。

お礼日時:2007/07/15 21:32

個人的な見解ですが、お困りの空白部分は「無駄なスペース」ではありません。

表の「境界」です。border="0"としても、境界線が見えなくなるだけで「境界」は存在します。
<table style="border:none; border-collapse:collapse;">とスタイルシートを書けば、ホンの少しだけスペースが目立たなくなりますが・・・

この回答への補足

参考になりました!!!ありがとうございます。

ちなみにもう一つやりたいことがあるのですがページの一番上から下まで縦線を入れたいす。やりかたを知っていたら教えていただきたいのですが・・。

補足日時:2007/07/03 23:40
    • good
    • 0

これでどうだぁッ!!!!!(゜Д゜)



<div style="float:left;">
<IMG src="image/green_s_0707.jpg" width="100" height="563" border="0">
</div>
<table height="563"><tr><td>エンターロゴ<td></tr></table>
<span style="clear:both;"></span>
(例によって確認はIE6のみ)

しかし、「何故テーブルレイアウトにこだわるのか?」をちょっと
知りたいです。
テーブルレイアウトは、ひとつのテーブル内に記述されている
ソースをいったん全部読み込んでからしか表示しないので、いっぱい
画像を使ったりすると、読み込み終わるまで数秒~数十秒、環境に
よっては数分とか、画面真っ白になりますよ。
気が向いたらでかまいませんので、お答えいただけるとうれしいです。

この回答への補足

なんとかうまくいきました。助かりました!!ありがとうございます。
ちなみに何故テーブルにこだわるのかというと画像の右にENTERのロゴを入れたかったからです。

ちなみにもう一つやりたいことがあるのですがENTERロゴの右にページの一番上から下まで縦線を入れたいす。どうやったら出来るかご存知ですか??
お時間があったらこれも教えていただきたいのですが(*^^)v

補足日時:2007/07/03 23:33
    • good
    • 0

No.2訂正 orz


style="margin-left:0;"

この回答への補足

ご返答ありがとうございます。
とりあえずうまくいきました。
テーブルを使わずに画像を配置すると左側に余白ができないのですが、
しかし、テーブルを使うとわずかに(約0.5mm)ほどの余白ができてしまいます。

テーブルを使っても余白ができない方法ってありますかね??
あったら教えていただきたいのですが・・。

補足日時:2007/07/02 23:27
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます。
とりあえずうまくいきました。
テーブルを使わずに画像を配置すると左側に余白ができないのですが、
しかし、テーブルを使うとわずかに(約0.5mm)ほどの余白ができてしまいます。

テーブルを使っても余白ができない方法ってありますかね??
あったら教えていただきたいのですが・・。

よろしくお願いします。

お礼日時:2007/07/02 23:30

body に、stykle="margin-left:0;"


確認ブラウザはIEのみですが。
    • good
    • 0
この回答へのお礼

 

お礼日時:-0001/11/30 00:00

ブラウザの初期設定で指定されているマージンの影響です。


スタイルシートで
BODY{margin-left:0px;}
を指定すると左に寄ります。

少し空けたい場合は、0pxを5pxなどで指定します。
    • good
    • 0

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

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

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

QIE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい

お世話になっております。
・本文・テーブルは中央揃え
・テーブルの内容は左揃え
というものをCSSで作りたいのですが、
どのようにしたらいいのでしょうか。
現在のページの一部は
<div id="main">
<h1>タイトル</h1>
  <table border="1">
<p>
本文
</p>
<tr>
<td colspan="2"><h2 align="center">○○○</h2></td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
~行が続きますが省略~
</table>
</div>
のようになっています。

ちなみに cssのmainは「text-align:center;」を指定しておりますが、
IE8にしたところテーブルが左寄せになってしまいました。

なるべく多くのブラウザで同じような配置になるようにしたいのですが
どうしたらよいでしょうか。よろしくお願いいたします。

お世話になっております。
・本文・テーブルは中央揃え
・テーブルの内容は左揃え
というものをCSSで作りたいのですが、
どのようにしたらいいのでしょうか。
現在のページの一部は
<div id="main">
<h1>タイトル</h1>
  <table border="1">
<p>
本文
</p>
<tr>
<td colspan="2"><h2 align="center">○○○</h2></td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
~行が続きますが省略~
</table>
</div>
のようになっています。

...続きを読む

Aベストアンサー

No.1さんの方法では、table内部のテキストが中央ぞろえになってしまい、
「テーブルの内容は左揃え」
という質問者さんのご要望を満たすことができません。

以下でどうぞ。

(1)
div#main{
text-align:center;
}

(2)
div#main table{
margin-left:auto;
margin-right:auto;
text-align:left;
}

<解説>
div、table、pなどブロック要素をセンタリングするには、左右のmargin(外余白)をautoにすることで、左右均等に外余白が設定され、ブロックがセンタリングされます(2)。
しかし、8より前のIEではmarginのautoを正しく解釈してくれません。

text-align:centerでブロック要素がセンタリングされない(これでセンタリングされるのはテキストや画像などのインライン要素のみ)のは正しい動作なのですが、8より前のIEではなぜかtext-align:centerでブロック要素がセンタリングされてしまうので、このバグを利用して、div#mainにtext-align:centerを設定して8より前のIEでセンタリングされるようにします(1)。
しかしこれでは、tableの中のテキストまでセンタリングされてしまいますので、div#main配下のtableにtext-align:leftを指定します(2)。

No.1さんの方法では、table内部のテキストが中央ぞろえになってしまい、
「テーブルの内容は左揃え」
という質問者さんのご要望を満たすことができません。

以下でどうぞ。

(1)
div#main{
text-align:center;
}

(2)
div#main table{
margin-left:auto;
margin-right:auto;
text-align:left;
}

<解説>
div、table、pなどブロック要素をセンタリングするには、左右のmargin(外余白)をautoにすることで、左右均等に外余白が設定され、ブロックがセンタリングされます(2)。
しかし、8より...続きを読む

Q同じ行で画像は左寄せ、右側にテーブルをもってきたいのですが、

同じ行で画像は左寄せ、右側にテーブルをもってきたいのですが、
右側にテーブルをもってくることまでできましたが、中身の文字
まで右寄せになってしまうので、テーブルの文字だけは左寄せ、
にしたいのですが、どのようにすればいいものでしょうか?

Aベストアンサー

#1さんは何か間違っていると思うけど・・・
----
HTMLに直接書くなら、
<table>

<table style="text-align: left;>
にするだけで良いのでは。
--------------------------
外部にCSSなら
td{text-align: left;}
でも良いが、
他のテーブルにも影響するなら td (table自体に)はclass名を統一設定してね

Qdiv要素の左寄せ、中央寄せ、右寄せについて教えて下さい

ホームページを作っています。
今、更新履歴を表示するボックスを作りました。

<div align="left" style="overflow-y:scroll;width:300px;height:100px;border:solid 1px #818181">
<center><b>更新履歴</b></center>
<br>2015 8/02 - 更新2
<br>2015 7/28 - 更新1
<br>2015 7/20 - HP開設<br><br>
</div>

このように作っています。
これを中央寄せさせたいのですが、うまく中央寄せされません。
方法を教えて下さい。よろしくお願いいたします。

Aベストアンサー

外枠は、ページ内で中寄せ
枠内の文章は、枠内で中寄せ
ただし箇条書きは、枠内で左寄せ

<style>
aside.diary { overflow:auto; width:300px; height:100px; border:thin solid gray; }
aside.diary { display:block; margin:0 auto; } /* 外枠を中寄せ */
aside.diary { text-align:center; } /* 枠内の文章を中寄せ */
aside.diary ul { list-style:none; padding:0; margin:1ex; }
aside.diary ul li { text-align:left; } /* 箇条書きを左寄せ */
</style>

<aside class=diary>
<b>探査機日程</b>
<ul>
<li>2015-07-14 : 冥王星に接近
<li>2014-08-25 : 海王星軌道を通過
<li>2011-03-18 : 天王星軌道を通過
<li>2008-06-08 : 土星軌道を通過
</ul>
</aside>

外枠は、ページ内で中寄せ
枠内の文章は、枠内で中寄せ
ただし箇条書きは、枠内で左寄せ

<style>
aside.diary { overflow:auto; width:300px; height:100px; border:thin solid gray; }
aside.diary { display:block; margin:0 auto; } /* 外枠を中寄せ */
aside.diary { text-align:center; } /* 枠内の文章を中寄せ */
aside.diary ul { list-style:none; padding:0; margin:1ex; }
aside.diary ul li { text-align:left; } /* 箇条書きを左寄せ */
</style>

<aside class=diary>
<b>探査機日程</b>
<ul>
<li>...続きを読む

Q

を使わずに、右寄せ(左寄せ)。

<P>を使わずに、右寄せ(左寄せ)。


<p align="right">あああ</p>

を<p>や<div>や<table>を使わないで、センタリングの<cetner>のように、右寄せ(左寄せ)をする方法はないでしょうか。
どなたかご存知の方おられましたら、ご教授のほどお願いします。

Aベストアンサー

CSS
--
body { line-height: 100%; }
p { line-height: normal; }

.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }




<p class="tal">あああ</p>
<p class="tac">あああ</p>
<p class="tar">あああ</p>

などで制御出来そうですが…
全部がline-height:100%ではまずいのであれば
該当部分に当たる親要素の<div>にだけline-height: 100%;をかけてあげれば。

Qcssで、全体を中央寄せ、文字は左寄せにする方法

CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。

bodyにtext-align: centerを設定し、

#outline{
width:1200px;
margin-right:auto;
margin-left:auto;
text-align:left;
}

.content{
float:left;
width: 1200px;
}

と書き、<div id="outline"><div class="content">で全体を囲みました。
すると、大方できたのですが、h要素のみずれてしまいます。
(h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・)
h要素は色とフォントサイズを指定したのみです。
CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。
どのようにすれば、他と同じく中央左寄せにすることができるでしょうか?
よろしくお願いいたします。

Aベストアンサー

body{text-align:center;}
#outline{text-align:left;}
.content{float:left;}
は、CSS2.1(ベンダーが標準とみなしている仕様)だと
body{text-align:center;}/* text-align:継承される 詳細度は0001 */
*#outline{text-align:left;}/* text-align:継承される 詳細度は0100 */
*.content{float:left;}/* float:継承されない 詳細度は0010 */
といういみですね。*は全称セレクタで詳細度0

このCSSにて、H1が左寄せ、H2が右寄せになるということは、H1は*#outlineにあることですね。ということは、
#outlineの内部にH1があるということです。
<body>
 <div class="article">
  <div class="header" id="outline">
   <h1>見出し</h1>
  </div>
  <div class="section" id="content">
   本文
   <div id="tableConten">
    目次
   </div>
  </div>
  <div class="footer2>
   文書情報
  </div>
 </div>
</body>

なら、
 div.article{
  width:80%;
  max-width:1200px;
  margin:0 auto;
 }
だけでよい。

★CSSの最も根幹を成すのは、プロパティではなくカスケーディングです。カスケーディングスタイルシートと言われている。カスケーディングとは、スタイルの出自、詳細度、継承、優先順位で定まります。それをきちんと理解しなければ、#outline,.contentのようなIDやclass名のみならず、要素すべてにidやclass名をつけたり、不要なdivを撒き散らすことになります。そのうえ期待したようにならない。

 bodyという、もっとも上位のブロックで、継承されるプロパティをbodyというタイプセレクタで指定してますから、その子孫すべてに、原則は適用される。ついで、<div class="content">を*.content{}という、全称セレクタ(* -詳細度0000)+クラスセレクタ(. 詳細度0010)で指定している(詳細度0010)が、その中ではtext-alignを指定していれば、それが詳細度が高いので優先されるが、指定していないので継承値が使われていると言うことです。
 bodyのtext-alignを外すか、より詳細度が高いセレクタで改めてtext-align:leftを指定すればよいだけです。

 bodyにtext-alignを指定するのは好ましくありません。CSSが煩雑になります。IE5用の対応だと思いますが、止めても良い。
 デザインのためにclass名をつけるのは止めましょう。class名やidは、
【引用】____________ここから
DIV要素・・・【中略】・・・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )]より

 であって、それを使ってデザインはするけど、デザインのためにつけるものではない。

★スタイルシートを学ぶなら、プロパティは後回しにして、何よりも先にカスケーディングを先に確実に学びましょう。
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

body{text-align:center;}
#outline{text-align:left;}
.content{float:left;}
は、CSS2.1(ベンダーが標準とみなしている仕様)だと
body{text-align:center;}/* text-align:継承される 詳細度は0001 */
*#outline{text-align:left;}/* text-align:継承される 詳細度は0100 */
*.content{float:left;}/* float:継承されない 詳細度は0010 */
といういみですね。*は全称セレクタで詳細度0

このCSSにて、H1が左寄せ、H2が右寄せになるということは、H1は*#outlineにあることですね。ということは、
#outlineの内部に...続きを読む


人気Q&Aランキング

おすすめ情報