ベストアンサー

作りたいホームページのイメージ画像をつくりました。

2010/11/06 19:47

作りたいホームページのイメージ画像をつくりました。ＨＰの横のほうに、縦に余白をつくり、真ん中のほうには画像のように縦に長くボックスのようなものをつくり表示するには、どうすればよいでしょうか? htmlとcssは一応軽くは勉強したのですが、どうするか思いつきません。ボックスのようなものはテーブルを使い挑戦してみたりしたのですが、うまくいかないです。また、HTMLとCSSだけで、このようなサイトは作れるでしょうか？

inu999
お礼率14% (13/89)

HTML
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

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

ベストアンサー

B-WING2
ベストアンサー率46% (262/561)

2010/11/07 00:41 回答No.2

テーブルだけでやってみた例。 ※投稿文字数の制限のため見出しは割愛。 <body> <center> Title <table width="800" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="260" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000"> <tr> <center> <td><span class="style1">見出し</span></td> </center> </tr> </table> <table width="260" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000"> <tr> <td><table cellspacing="1" cellpadding="0" width="258" bgcolor="#ffffff" border="0"> <tr> <td width="258" height="200" bgcolor="#FFFFFF"></td> </tr> </table></td> </tr> </table></td> <td width="10"></td> <td><table width="260" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000"> <tr> <center> <td><span class="style1">見出し</span></td> </center> </tr> </table> <table width="260" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000"> <tr> <td><table cellspacing="1" cellpadding="0" width="258" bgcolor="#ffffff" border="0"> <tr> <td width="258" height="200" bgcolor="#FFFFFF"></td> </tr> </table></td> </tr> </table></td> <td width="10"></td> <td></td> </tr> <tr> <td height="10"></td> <td width="10" height="10"></td> <td height="10"></td> <td width="10" height="10"></td> <td height="10"></td> </tr> <tr> <td></td> <td width="10"></td> <td></td> <td width="10"></td> <td><table width="260" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000"> <tr> <center> <td><span class="style1">見出し</span></td> </center> </tr> </table> <table width="260" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000"> <tr> <td><table cellspacing="1" cellpadding="0" width="258" bgcolor="#ffffff" border="0"> <tr> <td width="258" height="200" bgcolor="#FFFFFF"></td> </tr> </table></td> </tr> </table></td> </tr> </table> </center> </body>

その他の回答 (2)

nandemoka
ベストアンサー率15% (72/457)

2010/11/07 03:47 回答No.3

個人的に簡単でバイト数の少ないソースを好みますので、段落等もなく見にくいかもしれませんが、荒削りですが、ほとんど見た目はそのままに出来ました。ＨＴＭＬだけで出来るのですが、ＣＳＳを入れてみようとしましたが、あんまり意味ないので、質問者様は、HTMLとCSSの知識がお有りだということなので、訂正なりして加えてください。言わなくてもわかると思いますが、テキストパッドにでもコピー＆ペーストして、拡張子・htmlで保存してダブルクリックで実行してみてください。 <html><head> <title>サンプル</title> <style TYPE="text/css">  </style> </head> <body> <center> <br><br><br><br><br> <font size="10">ＨＰタイトル</font> <br> <br> <table width="450" border="0" cellpadding="1" cellspacing="0" ><tr><td height="200"> <table width="130" border="1" bordercolor="yellow" cellpadding="1" cellspacing="0" > <tr><td bgcolor="yellow" align="center">見出し1</td> </tr><tr><td height="120" bgcolor="#ffffff"> </td> </tr> </table> </td><td> <table width="130" border="1" bordercolor="orange" cellpadding="1" cellspacing="0" > <tr><td bgcolor="orange" align="center">見出し2</td> </tr><tr><td height="120" bgcolor="#ffffff"> </td> </tr> </table> </td><td> <table width="130" border="1" bordercolor="green" cellpadding="1" cellspacing="0" > <tr><td bgcolor="green" align="center">見出し3</td> </tr><tr><td height="120" bgcolor="#ffffff"> </td> </tr> </table> </td></tr><tr><td> <table width="130" border="1" bordercolor="#7fff00 " cellpadding="1" cellspacing="0" > <tr><td bgcolor="#7fff00 " align="center">見出し4</td> </tr><tr><td height="120" bgcolor="#ffffff"> </td> </tr> </table> </td><td> <table width="130" border="1" bordercolor="deepskyblue" cellpadding="1" cellspacing="0" > <tr><td bgcolor="deepskyblue" align="center">見出し5</td> </tr><tr><td height="120" bgcolor="#ffffff"> </td> </tr> </table> </td><td> <table width="130" border="1" bordercolor="pink" cellpadding="1" cellspacing="0" > <tr><td bgcolor="pink" align="center">見出し6</td> </tr><tr><td height="120" bgcolor="#ffffff"> </td> </tr> </table> </center></body> </html>