- 締切済み
Dreamweaverで HPレイアウトする点で質問です
ご質問ですが DreamweaverMXでHPを作成いたしています。 大まかにレイアウトテーブルを組み込み 主なレイアウトを決めて、画像等を組み入れています 例えば新規でHTML 基本ページから入りレイアウトを開始しますと 上部にブルーの余白が表示されます。 余白を残さず表現したいのですが、レイアウトは 組めません。HTML上で調整したいのですが 知識不足です。 デザイン的に最上部(ブラウザー）等で見える範囲を 上ぎりぎりに設定いたしたいのですが、タグわかりません お教えください。例えば表示されますソースは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> </head> <body> <table width="747" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="231" height="53" valign="top"><!--DWLayoutEmptyCell--> </td> <td width="188"> </td> <td width="328" rowspan="2" valign="top"><!--DWLayoutEmptyCell--> </td> </tr> <tr> <td height="108"> </td> <td> </td> </tr> </table> </body> </html> どの部分を変更すればよいのでしょうか レイアウトテーブル全体を上部へと調整するのでしょうか imgのみ調整するのでしょうか その方法は..... お知恵をお貸しください よろしくお願い致します まさし
- masashi5
- お礼率100% (3/3)
- ホームページ作成ソフト
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- Pochi67
- ベストアンサー率34% (582/1707)
スミマセン！ Javascriptではなくスタイルシートの間違いでした!! で、入れる場所ですが、<body>タグが上のソースの9行目にありますよね？ その<body>の部分を (1)<body topmargin="0"> (2)<body style="margin-top:0;"> のどちらかに変えれば上の余白は消えると思います。 (2)のスタイルシートで設定する時は「0」の部分を「5px」とか「5%」と、任意の数値を入れて余白の量を調節することができます。 スタイルシートは今回のように<body>タグを含めた<body>～</body>にある全てのタグに直接指定していく場合と、<head>タグ内で指定する場合、外部にcssファイルを作って参照させる場合があります。 どれを使っても同じ効果が得られますが、他にスタイルシートを使うことがなければ直接タグに書き込んだ方が簡単です。 スタイルシートは理解するまで少しややこしいので、もっと利用したい場合はちゃんと本などで勉強した方が良いですよ。 同じページに同じスタイルが何度も出てくる場合は<head>に、複数ページで同じスタイルを使う場合は外部ファイル・・・というように使い分けが出来るようになれます。 Dreamweaverではコードビューで作業していますか？ DreamweaverMXでは【 style="" 】の形は出てきますが、スタイルシートの中身は出てきません。つまりスタイルシートを覚えていないと設定出来ません。 でも、DreamweaverMX2004ではスタイルの中身も一覧が出てくるので便利です。 但し、デザインビューで作業をしていると、フォントの色や大きさを変えるたびに<head>にスタイルが増えていくのが難点ですが。 説明が下手ですみません。 上手くいくことを祈っています。（￣人￣;)
- Pochi67
- ベストアンサー率34% (582/1707)
<body>タグに【 topmargin="0" 】の属性を追加してみてください。 ちなみに上下の隙間をなくすのは【 marginheight="0" 】、左右の隙間をなくすには【 marginwidth="0" 】、左の隙間をなくすなら（左寄せ）【 leftmargin="0" 】というのがあります。 Javascriptでも設定可能です。 こっちだと数値でどれだけ隙間を作るかも設定できて、少しだけあけておきたい時には便利です。 Javascriptがわからなければ、テーブルの一番上に一段増やしてspacer.gifを任意のサイズにして入れてしまう方が簡単かも。 で、ここに書かれたテーブル、一段目と二段目の<td>の数が違うようですが、それは大丈夫なんですか？
お礼
はじめまして アドバイス本当にすみません。 感謝の念書面にてお送りいたします。 マージンタグは理解いたしているんですが どの場所に書き込んだらいいのかが未だに理解できません また、Javascriptでも、出来るんですね どのような、タグや書き込みをするのでしょうか。 ご迷惑でなければ、この二点お手数でなければお教しえ 頂けますればなおの感激..........！ 初心のものからすれば、本当に助からすアドバイスです。 御礼方々、ご指導頂ければ、幸いです。 ご無理を承知でお願い致します次第です 本当にありがとう お願い致します。
関連するQ&A
- background-color ｃｓｓ
目的：社員のスケジュール表を作りたいです。 出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>表</title> <style> <!-- .open{ background-color:rgb(255,255,255); } .holiday{ background-color:rgb(166,166,166); } .rest_holiday{ position:relative; filter:alpha(opacity=50); background-color:rgb(255,0,0); } .rev{ background-color:rgb(185,205,229); } --> </style> </head> <body> <table border="1" cellspacing="1"> <tr> <td valign="top"> <table border="1" cellspacing="0" width="60" > <tr align="center"> <td height="23" >名前</td> </tr> <tr align="center"> <td ></td> </tr> <tr align="center"><td>田中</td></tr> <tr align="center"><td>島村</td></tr> <tr align="center"><td>喜田村</td></tr> <tr align="center"><td>林義夫</td></tr> </table> </td> <td valign="top" > <table width="00" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="100" height="23" colspan="2" >10時</td> <td width="100" height="23" colspan="2">11時</td> <td width="100" height="23" colspan="2" >12時</td> </tr> <tr > <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rev"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- DreamWeaverで作るテーブル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> </head> <body> <table width="800" height="394" border="1" align="center"> <tr> <td> <p>1</p> <table width="200" border="1" align="left"> <tr> <td height="118">2</td> </tr> </table> <table width="600" border="1"> <tr> <td height="121">3</td> </tr> </table> <p> </p></td> </tr> </table> </body> </html> このようにテーブルを作った場合、3のセルの右のラインが1のセルの右ラインに隠れるというか見えなくなります。 そこで3のセルにalign="left"を設定するとIEではラインが見えるのですが、Netscapeでは2と3が縦に並んでしまいます。 なんとか3の右ラインを見えるようにしてNetscapeでも縦に並ばないようにするにはどうすればいいでしょう。 よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- Dreamweaverのデザインで表示がおかしい時
IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか？ <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL> </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>
- ベストアンサー
- ホームページ作成ソフト
- テーブルレイアウト
テーブルレイアウトで困っています。 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> これだと問題なく表示されるのですが、 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％ 少し長い文章を入れる</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> このように１列目のセルに長い文章を入れると、２列目の左のセルの幅が勝手に広がってしまいます。 何が原因で、対処法はないでしょうか？ Netscape7.1ではこうならないんですが、IE6では勝手に崩れてしまいます。 よろしくお願いします。
- ベストアンサー
- HTML
- ドキュメントタグについて
下記のHTMLを開くと、赤のボックスと青のボックスを上下いっぱいに離して表示したいのですが、どうしてもくっついてしまいます。 なぜでしょうか？って、実は、原因が解っているのですが、ドキュメントタグの "http://www.w3.org/TR/html4/loose.dtd" この部分を削除すると、うまくいきます。 という事は、この部分がいらない？という事になるのですけど、削除しても、問題ないですか？ 誰か解る方、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>hatena</title> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100" height="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#FFFFFF"> <table width="10" border="0" cellspacing="0" cellpadding="0"> <tr><td bgcolor="#FF0000"><img src="image-top/spacer.gif" width="100" height="100"></td> </tr> </table> </td> </tr> <tr> <td valign="bottom" bgcolor="#FFFFFF"> <table width="10" border="0" cellspacing="0" cellpadding="0"> <tr><td bgcolor="#0033FF"><img src="image-top/spacer.gif" width="100" height="100"></td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- 初めてＨＰを作成してるんですが
素材の置いてあるサイトから、テーブルをダウンロードしました。 けどどうやって使えばいいのかわかりません。 コレ↓でやっても、画像がでません。 何が足りないのか教えていただけませんか？？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>テーブル設置例</TITLE> </HEAD> <BODY bgcolor="#FFFFCC"> <CENTER> <TABLE cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="5" background="画像のＵＲＬ" height="27" bgcolor="#FFFFFF"></TD> </TR> <TR> <TD bgcolor="#FFFFFF"></TD> <TD rowspan="2" valign="bottom" bgcolor="#FFFFFF"><IMG src="画像のＵＲＬ" width="100" height="171" border="0"></TD> <TD width="280" height="250" bgcolor="#FFFFFF" align="center"><FONT size="-1">文章BR> 文章<BR> <BR> 文章</FONT></TD> <TD rowspan="2" valign="bottom" bgcolor="#FFFFFF"><IMG src="画像のＵＲＬ" width="100" height="171" border="0"></TD> <TD bgcolor="#FFFFFF"></TD> </TR> <TR> <TD valign="bottom"><IMG src="画像のＵＲＬ" width="20" height="23" border="0"></TD> <TD background="画像のＵＲＬ" height="23"></TD> <TD valign="bottom"><IMG src="画像のＵＲＬ" width="20" height="23" border="0"></TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML> windows９８・ＩＥ６，０でメモ帳を使って作成しています。 超初心者のくせにかなり無謀なんでしょうかー さっぱりわかりません。。。 何か補足することがありましたら、お知らせください ご回答どうぞよろしくお願いいたします・・！
- ベストアンサー
- その他（インターネット接続・通信）
- IE セル間に隙間が・・・
HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか？よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td> ------３ <td valign="top" >*** <br> </td>
- ベストアンサー
- HTML
- tableタグ、heightタグについて
下記のようなテーブルを組んだのですが うまくセルの高さを指定できなくて困っています。 セルの高さを固定せずに作成することは可能でしょうか？ 宜しくお願いします。 <html> <head> </head> <body> <table width="500" border="1"> <tr> <td rowspan="2" height="200" width="40" valign="top"> </td> <td colspan="2"> </td> </tr> <tr> <td width="230" valign="top">１</td> <td rowspan="2" width="230" valign="top"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </td> </tr> <tr> <td colspan="2" valign="top">このセルの高さを１の下まで伸ばしたい</td> </tr> </table> </body> </html>
- 締切済み
- HTML
- Firefoxで崩れる
IE6.0 IE7.0では、問題なく表示されるのですが、Firefoxで 一部のページが右にずれてしまうのです。 問題点を教えていただけますと幸いです。 正常なページのソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXXXXXXXXXXXXXサイト</title> <META HTTP-EQUIV="Imagetoolbar" CONTENT="no"> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td height="95" colspan="2"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td width="213" rowspan="4"><a href="../index.html"><img src="../common/images/rogo.jpg" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2"><img src="images/" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td height="21" colspan="2" class="td-bar"> </td> </tr> <tr> <td width="556" height="111" valign="top"><table width="543" height="182" cellpadding="10" cellspacing="0" class="td-0e3758"> <tr> <td colspan="2" class="bottom-border0e3758"><strong>200X/XX/XX</strong></td> </tr> <tr> <td width="94" height="131"><img src="images/s_img.jpg" width="94" height="125" /></td> <td width="407" valign="top">テテキストテキスト</td> </tr> </table></td> ***************************** 崩れてしまう方 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXX</title> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td width="758" height="95"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td rowspan="4"><a href="../index.html"><img src="../common/" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2" class="td-bar"><img src="images/blog-.gif" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td align="center"><table width="725" cellspacing="0" cellpadding="7"> <tr> <td colspan="2"> </td> </tr> <tr> <td width="37" align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td width="658" align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXXXXXXXXXXXXXX</td> </tr>
- 締切済み
- HTML
お礼
本当にありがとうございました。 御礼申し上げます。 今盛んに、作成中のHP 多分業務用になると思いますが 多くのページ数になりこれも，いずれはスタイルシート化 しなければならぬと、ない頭を抱えています。 スタイルシートの件と CGI買い物カート 設置レンタルも含め適当なサーバー会社を探すので 悩んでいます。 貴殿の様に博学でありたいものです ご親切なアドバイス、感謝致します。 本当にお手数かけました。お会いできればと 思う次第です。ありがとう まさし