• ベストアンサー

CSSでHPを作る事になり困っています!

ORUKA1951の回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.6

≫このメインブロックというのは3カラムの真ん中のブロックでよろしいのですか?  そうです。3カラムが難しいとか言われますが、私はそれで悩むことは今はありません。  floatは、ブラウザによって結構挙動が異なるので、私は、ブロック要素の配置に、基本的に使いません。あくまでinlineでの画像の配置とかに限定しています。 <div class="bodyText">  <h3>本文</h3>  <p>記事</p>  <div class="note head">    左記事  </div>  <div class="note foot">    右記事  </div>  <h5>文書情報</h5>  <ol></ol> </div> のようにマークアップして、div.bodyTextをrelativeで、まず配置して、その後でdiv.bodyText > div.headをabsoluteで本文の外左へ、div.bodyText > div.footをabsoluteで本文外右に配置しています。基本的に幅は固定せずウィンドウ幅に合わせるようにしています。

blueclaw
質問者

お礼

たびたびありがとうございます! 3カラムでどうのこうのっとかかれてたのは floteについてだったんですね。 おかげさまでサイトの外枠もできはじめました。 他のブラウザでどう見えるのかは今度試しますが 本当にありがとうございます。 relativeの配置をどこにするかがよくわかってなかったので 助かりました!

関連するQ&A

  • CSSであふれた時に別のカラムに表示するには

    CSSで左右2段の段組を作成しています。 左側カラムにコンテンツがあふれた場合に、残りを右側カラムに表示させたいのですが、可能でしょうか? 正確にはカラム内にはテーブルを作成してますが、件数は多いのですが項目数が少ないため2列に表示させたいと考えています。 よろしくお願いいたします

  • CSSのレイアウトがFirefoxで崩れてしまう

    CSS初心者ですが教え下さい m(_"_)m 全体をCSSでレイアウトしているサイトを作成中です。 Blogのような3カラムで作成しております。 IEで表示すれば3カラムでレイアウトは崩れませんが・・・ Firefoxで表示するろ思いっきり崩れてしまいます (T_T) 1番右のボックスが右に表示さえれなく下に表示されてしまい、 フッダーが下ではなく、上にあがってきてしまいます。 サンプルページをアップしたので、IEとFirefoxを見比べて頂けると一目瞭然かと思います。 http://www.web.grrr.jp/bank/san/ CSSは3つで指定しています(テキストファイルでアップしてあります) http://www.web.grrr.jp/bank/san/styles-color.txt http://www.web.grrr.jp/bank/san/styles-site.txt http://www.web.grrr.jp/bank/san/styles-width.txt CSSハックは、あまり使いたくないので、CSSのタグを何とか修正して、 Firefoxでも綺麗に表示させたいのですが・・・ 修正箇所等がわかる方がいらっしゃいましたら、教えて頂ければ幸いです。 どうぞ宜しくお願いします m(_"_)m

  • CSSでの段組で、下辺を揃える方法

    CSSで段組をしようと思うのですが、うまくいかないのでご教授下さい。 左と右にボックスを配置し、それぞれにテキストが入ります。 中のテキストは量がまちまちだったり、大きさが可変であったりするのですが、 文字の量・大きさに関わらず、左と右のボックスの下辺が同じになるように、 つまりボックスの高さは、常に両方が同じになるようにしたいのです。 テーブルタグでの段組であれば、 セルに文字を入れておけば自動的にこういう状態になりますが、 CSSのボックスでは、どちらかの量が少なければ、 少ない方の下辺が上がってしまい、高さが揃いません。 CSSの本を何冊か買って読んではみましたが、 こういう場合、heightを数値で指定してしまっている場合が多く、参考になりませんでした。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで配置等のデザインを作成

    最近のSEO対策のされたホームページは CSSで配置等のデザインを作成されていますが、 CSSで細かい配置を修正するには、 どのようなホームページ作成ソフトで作成したらいいのでしょうか? (DreamWeaverとか) それともみなさん、 テキストで作成されているのでしょうか? あまり、CSSに詳しくないので、 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSファイルの上手な使い方を教えて下さい。

    現在、Webサイトを作成しており20ページくらいになりますが、色や形を変えることが多々あり、そのたびにCSSファイルのコードを修正するのが面倒です。 私はhtmlファイル20枚につき、CSSファイル20枚となっており、すべてのCSSファイルにヘッダーやフッターサイドバーのデザインを施すコードが記述されております。 この方法は非効率でしょうか? 良く考えてみたのですが、全てのページでヘッダーとフッター、サイドバーのデザインが同じなら、ヘッダー、フッター、サイドバーだけのCSSファイルを1つ作成し、メインコンテンツはページの分だけCSSファイルを作成するべきなのでしょうか? この場合、htmlファイル1枚につき、2枚のCSSを読みこませれば良いのでしょうか?

    • ベストアンサー
    • CSS
  • CSSのテンプレート

    今あるサイトを CSSに移行しなければならないのですが、 テンプレートを探しています。 3カラムでレフトをロールオーバーで 作成しようと思っているのですが わかりやすくて扱いやすいテンプレートサイトをご存知の方 お教えください! よろしくお願いします。

  • ホームページビルダーV9を使いながらHTML・CSSを覚えたい

    ホームページビルダーでHPを作成しています。基本的なところまでは、HTML・CSSの知識が無い私でも出来るのですが、思い通りにレイアウト出来なかったり任意の場所にバナーを貼れなかったりとかなり行き詰っています。 HP作成ソフトを使わず、サンプルを作りながら学習していく類のテキストは見かけますが、ホームページビルダーを基本にHTML・CSSを覚えていく様なテキストはないでしょうか? あれば是非教えて下さい。

  • 縦に画像を並べるときのCSS

    CSS初心者です(文字のデザイン・レイアウトと画像への回り込みぐらいにしか使ったことがありません)。HP上に、縦にテキストを並べたメニューを作りました。そこに続けて画像を等間隔(バナーをいくつか下に並べていく感じ)に置いていこうと思います。この場合CSSの中身はどのように記述すればいいのでしょうか?あまりに簡単すぎるためかどんな本にも載っておらず、自分でそれっぽくやってみたのですが、自分のPC環境以外でどうなるのか恐ろしくて使う気になれません。どなたか正しい記述を教えていただけませんか?

    • ベストアンサー
    • CSS
  • base.cssの参考になるサイトを教えて下さい。

    base.cssの参考になるサイトを教えて下さい。 cssを独習中です。参考書に書かれているbase.cssだけではよくわかりません。 参考書には若干の修正は必要だがいったん作成しておけばどのサイトでも適用できると書いてあるのでこれというのを作成しておきたいのですが、サイトによって内容がさまざまな為どれを参考にしていいのか困ってます。

    • ベストアンサー
    • HTML
  • cssの段組レイアウトについての質問です

    かなり初歩的なことだと思うのですがこのことばかりがひっかかっています ブックオフの立ち読みでcssの本を読んでいたら 段組レイアウトというのを目にしました。 それはまず下敷きにマージン次にパディング、その上に内容を書く・・・というものでした。 一方ネットで調べてみたら、段組レイアウトのやり方のサイトをよんでみると 「ボックスを左と右にわけたり、上と下にわけたりする」だけで、マージン、パディングのことは書かれてなかったんですよね。(そもそも書くまでもないのかもしれませんが) よく3段組レイアウト2段組レイアウトと聞きますがそれは、立体的にとらえて領域をミルフィーユみたいに入れ子させて乗っけてくからなのでしょうか? それともボックスを平面的に並べることが段組レイアウトなのでしょうか? 理解力が足りずどうもよくわからなくて へんな質問ですいません。回答お願いします。