• ベストアンサー

このような外枠を作るにはどうすれば?

HTMLを勉強しています。 http://zexy.net/kansai/ のサイトにあるような全体の枠組を作りたいと思っています。 ソースを見ましたが、 <table border="1" cellpadding="0" cellspacing="0"> の部分なのでしょうか? ご教授ください。

  • HTML
  • 回答数3
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • danmarino
  • ベストアンサー率63% (26/41)
回答No.2

venzouのご指摘の通りですね。 背景画像を使わないでも <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY BGCOLOR="#F0F0F0" MARGINHEIGHT="0" MARGINWIDTH="0" TOPMARGIN="0" LEFTMARGIN="0"> <TABLE WIDTH="601" BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#FFFFFF"> <TR> <TD WIDTH="600"> 【ここにコンテンツをいれこみます】<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> </TD> <TD WIDTH="1" BGCOLOR="#CCCCCC"></TD> </TR> </TABLE> </BODY> </HTML> という感じで作れます。 【ここにコンテンツをいれこみます】の部分にさらにテーブルを入れこむことによってレイアウトを作っていきます。

その他の回答 (2)

  • danmarino
  • ベストアンサー率63% (26/41)
回答No.3

すみません、venzouさんと「さん」づけするのを忘れてしまいました。大変失礼しました。

  • venzou
  • ベストアンサー率71% (311/435)
回答No.1

ページ全体を囲う枠は、BODYタグの背景画像ですね。 枠に見えるように作られています。よくある手法です。

関連するQ&A

  • このような外枠を作るにはどうすれば?

    今、下記のようなコードでWebサイトを作っています。 <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY BGCOLOR="#F0F0F0" MARGINHEIGHT="0" MARGINWIDTH="0" TOPMARGIN="0" LEFTMARGIN="0"> <TABLE WIDTH="760" BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#FFFFFF" align="center"> <TR> <TD WIDTH="760"> 【ここにコンテンツをいれこみます】<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> </TD> </TR> </TABLE> </BODY> </HTML> http://www.kysmaq.co.jp/index.html のサイトにあるような影の付いた外枠を作りたいのですが、どのように作っていったらよろしいのでしょうか? 影は画像で作っているのでしょうか? ご教授ください。

  • tableとcellspacingとcellpadding

    動的に生成されたHTMLに以下が記述されています。 <table class="type" border="0" cellspacing="2" cellpadding="1"> これを外部CSSを使って、cellspacing、cellpaddingをともに「0」としたいのですが、 記述方法がわかりません。 よい方法をご存じのかたはおられないでしょうか。

    • ベストアンサー
    • HTML
  • テーブル内のテーブルの高さを揃えたい。

    CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

    • ベストアンサー
    • HTML
  • DreamWeaverのソースコードの整頓方法

    DreamWeaverを使ってWEBサイト制作をしています。 コーディングしていく上で、 ソフト側で(おそらくソースの見易さを考慮してか)左詰めでなく、適宜空白を自動的に作っていってくれているのですが、 それを一括して左詰めにできる方法はないのでしょうか? よろしくお願いします。 =========== <table border="0" cellspacing="0"cellpadding="0">  <tr>   <td>■■■</td>  </tr>   <tr>    <td>■■■</td>   </tr>  </table> ↑これを <table border="0" cellspacing="0"cellpadding="0"> <tr> <td>■■■</td> </tr> <tr> <td>■■■</td> </tr> </table> ↑こうしたいのです

    • ベストアンサー
    • HTML
  • 入れ子にしたテーブルをheight100%にする

    お世話になります。 以下のソースで、table2の高さを100%にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか?? ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • このフレームを直してもらいたいのですが

    わかりにくいかとは思いますが、 下のようなフレームを作っています。 ―――――――――――――――――― |           | |           |   ここがない→ |________ |__________ |                          | |                          | |___________________| まず「田」のテーブルを作って、下段を結合して一つにすると、 以上のようになってしまいます。なぜでしょうか? ソースを書いておきますので、直してもらえませんでしょうか。 -------------------------------------------------- <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P> <TABLE cellSpacing=0 cellPadding=0 bgColor=#000000 border=0> <TBODY> <TR> <TD bgColor=#000000> <TABLE cellSpacing=1 cellPadding=7 border=0> <TBODY> <TR> <TD bgColor=#ffffff colSpan=5> <P>aaaaa</P></TD> <TD bgColor=#ffffff>ここが消える→</TD></TR> <TR> <TD bgColor=#ffffff colSpan=6> <P>aaaaa</P></TD></TR></TBODY></TABLE> </TD></TR></TR></TBODY></TABLE></P> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • テーブルの横幅を常にブラウザ一いっぱいに表示するに

    テーブルの横幅を常にブラウザ一いっぱいに表示するには? たとえば *********************************************** <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY> <table border=1 cellspacing=0 cellpadding=0> <caption>キャプション</caption> <tr> <td>内容1</td> <td>内容2</td> </tr> </table </BODY> </HTML> *********************************************** を作ると、画像のようにコンパクトに表示されてしまいます。 やりたい事はブラウザの横幅が 10cmなら画面いっぱいテーブルを表示させて、 20cmなら画面いっぱいにテーブルを表示させたいです。 <table border=1 cellspacing=0 cellpadding=0 width="2000"> するとはみ出してしまうし、 <table border=1 cellspacing=0 cellpadding=0 width="1000"> だと小さすぎます。 誰がどのブラウザで開いても、横幅は画面いっぱいに入るように表示するにはどういうタグを書けばいいのでしょうか?

    • ベストアンサー
    • HTML
  • ヤフオクのテンプレートでバックグラウンドを使いたい

    今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>

  • Dreamweaverでソースが横一列になってしまう。

    DreamweaverでHTMLのコードインスペクタの所が横一列にズラーとならんでしまっています。 今までは <table width="%" border="0" cellspacing="0" cellpadding="0" bgcolor="" height=""> <tr> <td height=""> と一段づつ見やすく表示されていたのですが、現在は、 <table width="%" border="0" cellspacing="0" cellpadding="0" bgcolor="" height=""> <tr> <td height=""> 全部横一列にズラーと並んでいて、とても見にくいです。ソースも見ながらという作業が不可に近い状態です。デザインビューの所も文字を打つと、砂時計マークが出てきて凄い遅いです。1ページ作るのに物凄い時間がかかります。 「コマンド」→「ソースフォーマットの適用」をしても何も変りません。 先週までは普通に使えていました。 使っている機種は、WIN XP 英語版を使っています。Dreamweaver4 急いでサイトを作らなければならないので、時間ばかりかかってしまい全然進みません。とても困っています。

  • colspan セルの結合について

    テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>

専門家に質問してみよう