- ベストアンサー
ホームページのテンプレートの事で？
自分でホームページのテンプレートを作成したのですが、上手くいきません。 コンテンツが長い場合、左のメニュー部分が途中で切れてしまいます。 ホームページビルダー11で作成したのですが、スタイルシートのどの部分を直せばいいのでしょうか？ 色々試したのですが自分の力では駄目なようです。 よろしくお願いします。
- torasan117
- お礼率48% (44/91)
- ホームページ作成ソフト
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
そうですね。SEO的にmain部分を優先的に読ませたいとなると、tableよりDIVの方がよいと思います。 発想の転換ですが、こんなのはどうでしょうか？ #boxの背景配色を background-color : #cacaff; にし、 #leftの背景色指定を削除します。 現状#mainの背景色としてwhiteが指定されてますから、必然的にleft部分の背景色はboxで指定した#cacaffになります。 [サイト名見出し１]上の空白白部分が#cacaff;になってしまいますが、ここも白くしたければ、新たにDIVでhieght指定した白部分を追加するようにし、h1のCSSにmargin-top:0px;を追加すればよいと思います。 これで、現状と同じ見かけで、left部分の背景色を下いっぱいまで付けることができます。 ただし、あくまで#main部分が#left部分より長いということが前提です。逆に#main部分が短いと、その下が青色になってしまうので、<br>などを追加して#main部分は#left部分より必ず長くするようにするしかないでしょう。 あと、もう一つ案としては、background-imageにしてしまう案です。 幅770px高さ1pxで左端198pxを#cacaffで塗りつぶした画像を作り（box.gifと仮定）、 #boxに background-image : url(box.gif); background-repeat : repeat-y; を追加します。 あとは、#leftと#mainから背景色指定を削除します。 コレも同様、[サイト名見出し１]上の空白白部分に背景画像があたってしまうため、新たにDIVでhieght指定した白部分を追加するようにし、h1のCSSにmargin-top:0px;を追加すればよいと思います。 2番目の案の方が良いような気がしますね。 おためしあれ。
その他の回答 (3)
- tenderfeel
- ベストアンサー率56% (215/379)
メニュー部分を入れている親のDiv（この場合は#box）に メニューと同じ色、幅で縦1pxの画像を背景に指定し（これだと198ｘ1かな?）、縦方向にリピートさせる(repeat-y)のが楽です。 メニューの背景色をなしにしても色は付くし、メニューを縦100%にする手間もありません。 （CSSで縦100%はTableのように指定しただけでは出来ません）
お礼
ご回答ありがとうございました。参考になりました。
- GreenCup
- ベストアンサー率53% (7/13)
はじめまして。 私も回答No.1さんと同様、Tableを使った方がいいんじゃないかなぁと思いますが とりあえず、現状のままで左側が切れないようにするには shop.css を開いて、#left の高さ設定を100%にする（height: 100%）で対応できると思います。
お礼
ご回答ありがとうございました。 試したのですが、ホームページビルダーのページ編集の画面では上手く表示できるのですが、プレヴュー画面では駄目でした。
- qualheart
- ベストアンサー率41% (1451/3486)
DIVで各エリアをくくって高さを合わせるのはちょっと無理があるような気がします。tableで作ったらどうでしょうか？ 以下tableで作った場合のサンプルコードです。 ○tesuto.html <?xml version="1.0" encoding="Shift_JIS"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="[メタ説明文]" /> <meta name="Keywords" content="[キーワード]" /> <title>[タイトル]</title> <link rel="stylesheet" href="shop.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="tdftad.css" /></head> <body> <strong>[トップ説明文]</strong> <table id="box" cellspacing="0"> <tr> <td colspan="2" id="hed"> <h1>[サイト名見出し１]</h1> </td> <tr> <td id="left" valign="top"> <div id="leftbody"> <p class="index">メニュー</p> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="c-10.html">[メニュー1]</a></li> <li><a href="c-20.html">[メニュー2]</a></li> <li><a href="c-30.html">[メニュー3]</a></li> <li><a href="c-40.html">[メニュー4]</a></li> <li><a href="c-50.html">[メニュー5]</a><br /> </li> </ul> <p class="index">リンク</p> <ul> <li>[ここにリンク]</li> </ul> </div> </td> <td id="main"> <div class="mainbody"> <h2>[見出2]</h2> <div align="left" style="text-align : left;">[コンテンツ]<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> コンテンツが長い場合、左の青い部分が切れてしまいます。スタイルシートのどこを直せばいいでしょうか？<br /> このページはホームページビルダーで作っています。</div> </div> </td> </tr> <tr> <td colspan="2" id="foot"> <div align="center"><a href="index.html"><font color="#ffffff">Copyright（C） [サイト名] All right reserved.</font></a></div> </td> </tr> </table> [アクセス解析]<div class="tdftdiv"><ul class="tdftad"> <li><a href="http://www.samurai-factory.jp/celebrity/programmer/" target="_top">PHPプログラマ求人情報</a></li> <li class="tdftpr"><a href="http://a-hikkoshi.com/" target="_top">引越し</a></li> <li class="tdftpr"><a href="http://ducar.carsensor.net/">中古車ディーラー</a></li> <li class="tdftlink"><a href="http://www.comsort.jp/" target="_top">SEO対策</a><!--33|606--></li> <li class="tdftpr"><a href="http://sf.super-search.jp/keyword/%E7%B5%90%E5%A9%9A">結婚</a></li></ul> </div></body> </html> ○shop.css #left{ width : 198px; background-color : #cacaff; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; height : 100%; } ※「float:left;」を削除 ※「height:100%」に変更
お礼
ご回答ありがとうございました。 テーブルタグはSEO的に良くないらしいのでDIVタグで今回は考えたいと思っています。 でも、わざわざありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ご回答ありがとうございました。無事解決いたしました。