- ベストアンサー
CSSを使った全体の配置
サイト全体の配置指定を外部スタイルシートを使い、 ホームページ作成をしております。 CSS初心者なので、変な質問になるかもしれませんが宜しくお願いします。 全体のぺージの構造は上にヘッダー、下にフッター 真中は3つに分け、3カラムの状態で配置しております。 今回、ヘッダー部分を2つに分けたいと思っております。 今のヘッダー部分は、最初にh1（テキスト）を左配置に表示し、その右側にテキストで「サイトマップ」のテキストリンクを配置。 その下に width="850" height="200" の大きめな画像を置き、 画像の下に右配置でh2（テキスト） 上記のような配置になっているので、外部スタイルシートコードは・・・ /* ヘッダーコンテンツ */ .header { text-align:left; padding-bottom:0.5em; width:830px; float:left;} .header h1{ font-size:12px; padding:0; float:left;} .header h2{ font-size:12px; float:right;} /* ヘッダーサイトマップ */ .headersite{ float:right;} ・・・としています。 HTMLタグの方は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>ｈ1題名</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <a href="index.html"><img src="%/logo.jpg" width="850" height="200" border="0"/></a> <h2>h2題名</h2></div> <!-- ヘッダー終了 --> 画像部分を真中から分け、左に画像を置き右はテキストにし回り込ませたいと思っておりますが、なかなか上手くいきません（汗） 画像を2つにわけるCSSコードを .header left .header right とするならば、 HTMLタグ部分は・・・ <!-- ヘッダー開始 --> <div class="header"> <h1>ｈ1題名テキスト</h1> <div class="headersite"><a href="sitemap.html">サイトマップ</a></div> <div class="header left"><a href="index.html"><img src="%/logo.jpg" width="300" height="200" border="0"/></a> <div class="header right">テキストテキストテキスト <h2>h2テキスト</h2></div> <!-- ヘッダー終了 --> にしたいのですが、CSSコードはどのように指定したら良いでしょうか？ 自分なりにCSSコードを筆記したのですが、 回り込みがうまくいかないのか、真ん中から分けた左画像の右にテキストが並んでくれなくて下に配置されてしまいます。 ちなみに全体横幅は850pxにしております。
- smile0915
- お礼率62% (22/35)
- その他（プログラミング・開発）
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
すみません、ANo.2のサンプル、IE6.0で検証したら不備がある様でしたので修正します。 あと、HTMLのソースのスペースが一部「?」に変換されてしまっているので、そこも訂正しておきます --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- （省略） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> （省略） --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- .header { width: 830px; text-align: left; padding-bottom: 0.5em; } .header h1, .header h2, .header p { font-size: 12px; } .header h1 { float: left; margin: 0; } .header p { margin: 0; } .header img { border: 0; } .header p.sitemap { float: right; } .header_sub { position: relative; clear: both; height: 200px; } .header_sub p.logo { position: absolute; top: 0; left: 0; width: 300px; line-height: 0; } .header_sub p.text { margin-left: 310px; } .header_sub h2 { margin-left: 310px; } ---------------------------------------------------------------------
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
単なるコピペのミスかもしれませんが： --------------------------------------------------------------------- .header { (省略） width:830px;←行頭に全角スペースが入っています。 float:left;←ヘッダー自体がフロートしているのは何故ですか？ } (省略） <div class="header left"><a href="index.html">（省略）</a>←</div>で閉じていません (省略） <h2>h2テキスト</h2></div> ←</div>で閉じていません <!-- ヘッダー終了 --> --------------------------------------------------------------------- といった不明点や記述ミスがあります。 ご希望の配置は、 --------------------------------------------------------------------- ｈ1題名テキスト サイトマップ --------------------------------------------------------------------- ロゴ画像 テキストテキスト（改行）h2テキスト --------------------------------------------------------------------- という構造で宜しいでしょうか？ もしそうであれば、以下はごく大雑把なサンプルです。構成はオリジナルのままではなく、変更してあります。 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "?http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"? xml:lang="ja"> <head> <link rel="stylesheet" href="./css/common.css" type="text/css" media="all" /> <title>サンプル</title> </head> <body> <!-- ヘッダー開始 --> <div class="header"> <h1>ｈ1題名テキスト</h1> <p class="sitemap"><a href="sitemap.html">サイトマップ</a></p> <div class="header_sub"> <p class="logo"><a href="index.html"><img src="./images/logo.jpg" width="300" height="200" /></a></p> <p class="text">テキストテキストテキスト</p> <h2>h2テキスト</h2> </div> </div> <!-- ヘッダー終了 --> </body> </html> --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- .header { width: 830px; text-align: left; padding-bottom: 0.5em; } .header h1 { float: left; font-size: 12px; margin: 0; } .header p { margin: 0; } .header img { border: 0; } .header p.sitemap { float: right; } .header_sub { clear: both; height: 200px; } .header_sub p.logo { position: absolute; width: 300px; line-height: 0; } .header_sub p.text { margin-left: 310px; } .header_sub h2 { font-size: 12px; margin-left: 310px; } --------------------------------------------------------------------- 実際のヘッダーの中の詳細内容がわからないので、構成内容によっては質問者様のご希望のレイアウトにぴったり合致する様、"clear: both;"の替わりに所謂「clearfix」の様な方法でfloatの解除を仕込んだり、幅・高さ・マージン・位置関係を微調整したり、内容に相応しいマークアップ（サンプルはわかりやすい様に<div><p><hn>だけにしましたが、実際には<ul><dl>といったリストタグでのマークアップがより適切となる内容かもしれませんので）に変更したり、等々が必要になってくる事もあると思いますので、そこは適宜カスタマイズなさって下さい。それから本件の不具合とは関係ありませんが、構造上、"header"はclassではなくidセレクタの方がより宜しいかと（classセレクタを使用する事が間違っているという意味ではないです）。 ※ちなみに<table>でレイアウトする必要は全くないですね。この内容はどう見ても「表」ではなさそうなので。 実現なさりたいレイアウトが違う様でしたら、詳細を補足して下さい。
- 15mm
- ベストアンサー率65% (65/100)
原因はスペースですね。 「header right」というクラス名をつけたかったのでしょうが、 ＞.header right{} では、「header」クラスの要素の子要素<right>タグへの指定 のような解釈がされてしまいます。 つまり、上記のやり方では「うまくいかない」どころか指定すらできていなかったことになります。 ですから、 class="header_left" .header_left{} のようにしてあげればうまくいくと思いますよ （header rightのほうも同様に） でもなぜあえてtableを使わずに回り込みで・・・？
お礼
すばやいお返事をありがとうございます。 CSSに関しては全くの初心者で、名前にスペースを入れられない事すら知りませんでした ^^; 仰せの通り、今までテーブルタグを使いサイトを作成していたのですが、余計なタグが多くなってしまうのでHTMLをすっきりさせたくて、CSS配置サイトに挑戦しています。 CSSは奥が深く難しいですが楽しいです。 ありがとうございました m(_"_)m
お礼
素晴らしいです！ 筆記して頂いたコードをコピペでそのまま使用したところ・・・ 完璧です。 私が希望していた配置通りになりました。 ありがとうございます。 CSS配置配置のサイト作成は始めてで・・・CSSの知識は全くの初心者です ^^; 最初の回答頂いたところで、 >不明点や記述ミスがあります と、指摘されましたが、単なるコピペのミスではなく、本当に間違えていました（滝汗） CSS配置のサイト作成は始めたばかりですので・・・ まだまだわからなく質問をしてしまうかもしれませんが、 機会がありましたら、また宜しくお願いします m(_"_)m ちなみに・・・ 作成中のサイトのCSSに関しては、すべてclassセレクタにしてあります。 idセレクタがある事は知っておりますが、どちらかに統一した方が良いのかと思っていました（汗 調べてみたら、そうでもなさそうなので、自分なりに検索し調べてみます。 本当にありがとうございました m(_"_)m