- 締切済み
※再度※どこが悪いのかみていただきたいです。
以前あまり回答が得られなかったので カテを変えて、再度お願いいたします。 下記のようなHPをフリーソフトの「alphaEDIT」で作りました。 一番外側のテーブルの上下を画面の上下いっぱいに引っ付けたいと思っています。 プレビューでこのソースのページを見るとちゃんと上下にくっついているのですが アップロードしてインターネット上で見ると上はくっついているのですが 下がくっついていないのです。 これがなぜなのかわかる方は、教えていただきたいです。 HP初心者なのでできるだけわかりやすく教えていただけるとうれしいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> <tr> <td colspan="2" class="borderNoTop" bgcolor="#ffffff" height="20" ></td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><font color="#ff0000" size="5"><strong> </strong></font> </p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left" bgcolor="#ffffff"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td bgcolor="#ffffff"> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td><a class="menu" href="index.html" >Ｔｏｐ</font></a></td> </tr> <tr> <td><a class="menu" href="1_news.html" >Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="2_sakuhin.html" >作品集</font></a></td> </tr> <tr> <td><a class="menu" href="4_kyoushitsu.html" >お教室情報</a></td> </tr> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｓｈｏｐｐｉｎｇ</font></td> </tr> <tr> <td><a class="menu" href="6_link.html" >お友達サイト</a></td> </tr> <tr> <td><a class="menu" href="7_mail.html" >Ｍａｉｌ</a></td> </tr> </table></td></tr></table> <table style="WIDTH: 560px; HEIGHT: 748px" cellspacing="1" cellpadding="20" width="560" align="left" bgcolor="#c0c0c0" border="0"> <tr> <td valign="top" align="left" bgcolor="#ffffff"> </td></tr></table> </td></tr> <tr> <td class="borderAll" colspan="2" bgcolor="#ffffff" height="20"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom" bgcolor="#ffffff" height="20" > </td> </tr> </table> </body></html>
- mituru1986
- お礼率42% (632/1491)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- 894283
- ベストアンサー率100% (1/1)
どうも。 スタイルシートで高さを指定する方法について補足いたします。 TABLEタグにスタールシートで高さを指定するには、height属性を指定します。 スタイルシートにはボックス領域という考え方があり、WEBページの要素は全て四角形の「ボックス（領域）」という持っています。 理論的にはBODY・TABLE・TR・TD…etc.全てのボックスに高さや幅、線、マージンなどの指定ができるのです。 （実際には例外もあります） 具体的な記述としては、 <TABLE STYLE="height:100%;"> となります。 （もちろんピクセル指定も可能ですし、外部スタイルシートファイルやヘッダに記述してもかまいません） （ネスケ4.xは未対応です） スタイルシートに対応していないブラウザを考慮するなら <TABLE HEIGHT="100%" STYLE="height:100%;"> のように、併記するのもいいでしょう。 HTMLのタグやスタイルシートは、OSやブラウザによって表示の仕方が違ったり、対応していないこともあります。 どのタグや属性が、環境によってどんな動作をするかは、実際にテストしてみる他、書籍などを参考にされるといいと思います。 今回はお役に立てなくて残念です。 どなたか識者の方がいらっしゃるといいですね。 なお、HTMLやスタイルシートに関して質問される際は、使っているOS、ブラウザ、解像度、利用サーバーなど、環境について出来る限り書いておいたほうがいいと思います。 どのような環境にあるのか分かった方が、質問に答えやすいですので。
- 894283
- ベストアンサー率100% (1/1)
どうも、こんにちは。 mituru1986さんがテストされている環境が分からないので、もしかしたらうまくいかないかもしれませんが、参考までに。 ちなみに当方の環境は、Windows XP/Internet Explorer 6（以降IE6）、モニタの解像度1024*768です。 ソースをコピペしてローカルで確認後、アップロードしてIEでも確認しましたが、どちらでもテーブルは画面底部に密着していました。 そこで、ちょっと手持ちの資料を漁ってみたところ、Windows版のNetscape Navigator（以降ネスケ）4.xの場合、mituru1986さんのおっしゃるような現象が起きることがあるようです。 具体的には… ●1 <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> ↑この部分に問題があります。 BODYタグでbottomのマージンを0にしただけでは画面底部とテーブルの間に隙間ができてしまいます。（Win IEではうまくいくんですけどね） これを解決するには、フレームを使用します。 上下二つに区切られたフレームを作り、上のフレームに表示したいHTMLファイルを配置します。 そして下のフレームは高さ0ピクセルに設定し、白紙のHTMLファイルを配置します。 フレームは使用していますが、下のフレームは0ピクセルなので、見た目はフレームを使用していないページに見えます。 ※試してはいませんが… BODYタグにスタイルシートでマージンを指定する方法もやってみる価値があるかもしれません。 マージンを0にしてみてうまく行けば、フレームは必要ないですね。 ●2 <table height="956" width="730" align="center" id="mainTable" style="WIDTH: 730px; HEIGHT: 956px"> ↑この部分についても気になる点があります。 一番外側のテーブルのheightの指定について。 最近は解像度の高いモニタも増えていますので、場合によっては設定した値よりもブラウザの高さの方が大きく、隙間が出来てしまうかもしれません。 まあ、956ピクセルなら相当大画面高解像度でないと、そのような現象は起きないと思いますが。 画面の大きさに合わせたいなら、ピクセルより%指定（この場合だと100%）をお勧めします。 以下は個人的意見ですが… TABLEタグのheight属性はHTML4.01では規格外ですし、ネスケ6.2では対応していないみたいです。 スタイルシートで高さを指定する方が安全かなと思います。 もしくはテーブルの入れ子を増やしてセルの高さを指定するか。 色々な環境で試したわけではないのであくまで参考ですが、解決の一助になれば幸いです。
お礼
回答ありがとうございます。 ２つともやってみましたがダメでした・・・。 ＞スタイルシートで高さを指定する方が安全かなと思います。 とありますがこの方法をよろしければ教えていただきたいです。
お礼
再度回答ありがとうございます。 丁寧にお答えいただき非常に感謝しております。 なんだか難しいですね・・・（＾＾； 簡単にできてどのパソコンでもそう見えるようにしたいのですが 他に方法は無いものでしょうか・・・？ どなたかご存知の方は教えていただきたいです。