- ベストアンサー
ホームページビルダー14で一ページ目の上部にタイトル、左にサイドバーの
ホームページビルダー14で一ページ目の上部にタイトル、左にサイドバーの部分を作り、右側に表の挿入して本文とか、画像を貼り付けようとします。 タイトル、サイドバー部分はどのページも共通なので作った一ページ目をファイル → ページの複製にして、右側の部分を他の材料と入れ替えし、その作業を繰り返し5ページのホームページを作りたいのですが、ページによってタイトル部分や、サイドバー部分に貼ったJPGの位置がずれてしまうものがあります。 どのページも寸分なく同じ位置に表示するにはどうしたらいいでしょうか。 右側に貼り付ける表のサイズとかで影響がありそうですが、表のサイズを同じにしてもずれるページは、やはりずれてしまいます。 よろしくお願いします。
- yamata2525
- お礼率89% (74/83)
- ホームページ作成ソフト
- 回答数2
- ありがとう数10
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんばんわ 慣れるとテーブルよりCSSでレイアウトするほうが楽だと思います。 下記の例で２カラムレイアウトを簡単に説明すると、 HTML側で「header」「inner」「footer」とそれぞれボックスを作り、 「inner」ボックスの中に「left」と「contents」を作ります。 CSS側で「left」と「contents」を横並びにしないといけないので、 float: left; で横並びにします。 横並びをするのは「inner」ボックスの中だけなので、 「inner」を出たら、floatを解除するという意味で、 HTML側のinnerボックスにCSSの「clearfix」機能を付け足します。 <div id="inner" class="clearfix">という感じです。 ※この「floatを解除する」方法はいくつかありますので、 この方法は「clearfix」という方法を使用しています。 他にも方法があり、この方法でないとだめということはありません。好みの問題です。 簡単に説明するとこんな感じです。 ネットで「CSS ２カラム」で検索するとわかりやすく説明しているサイトは沢山あるので 検索してみてください。 ここもお勧めです CSSビギナー向けhttp://css-happylife.com/log/cssbeginner/ HTML側------------------------------ <body> <div id="header"></div> <div id="inner" class="clearfix"> <div id="left"> <p>left</p> </div> <div id="contents"> <p>contents</p> </div> </div> <div id="footer">footer</div> </body> -------------------------------------------- CSS側--------------------------------------- /*bodyと枠のスタイル*/ body{ width: 800px; } /*内枠*/ #inner { width: 800px; } /*ヘッダー*/ #header { background: #00CC66; height: 100px; width: 800px; } /*左ボックス*/ #left { float: left; width: 200px; background: #0099CC; height: 500px; } /*右ボックス*/ #contents { background: #66FFFF; float: left; width: 600px; height: 500px; } /*clear fix 回り込みの解除*/ .clearfix{ /zoom : 1; } .clearfix:after{ content : ''; display : block; clear : both; } /*フッダー*/ #footer { background: #00CC66; height: 100px; width: 800px; } ------------------------------------
その他の回答 (1)
- otaku37564
- ベストアンサー率38% (1158/3005)
全体をテーブルで組みましたか？ テーブルだとサイズ固定にしても中に入っている文字や写真の大きさで ズレますよ。 全体をCSS使って組めればいいのですけど。
お礼
テーブルでくんでいます。そのせいでずれるんですね。 CSSで組む方法って簡単ですか。 ざっと方法を教えていただくと助かるんですけど。
お礼
ありがとうございました。 勉強して挑戦してみます。 お礼が遅くなってすみませんでした。