当方のブログをご覧下さい↓
http://d.hatena.ne.jp/thyself2005/
現在のブログデザインを、添付画像（イメージ図）のように変更する場合、スタイルシートにどのような設定をすれば可能でしょうか？
①記事枠（div.main）の幅を７００pxにし、サイドバー（div,sidebar）と混ざらないように中央に配置したい。
②タイトル画像（h1）全体（点線含む）を自作メニュー（div.top）と同じ幅内（約１０００px）に収めたい。
条件
・サイドバーと記事枠の間には２０pxほどのスペースが欲しい。
・記事枠内の文字や画像が現在のように左揃えであること。（中央揃えや右揃えにならないように）
・画面の解像度を任意（１０２４px×７６８px、１２８０px×１０２４px…）に変更しても、記事枠がきちんと中央に、かつ幅が７００pxで表示されること。
・IE以外のFirefox、Safari、Opera等のブラウザ、macでもきちんと問題なく表示されること。
・モバイル版（http://d.hatena.ne.jp/thyself2005/mobile）の閲覧に支障をきたさないこと。
ご回答宜しくお願いいたします。
No.1
112
36
70pt
まず最初に、「自作メニュー（div.top）と同じ幅内（約１０００px）」と表現していますが、実はdiv.topの幅は不定で、「特選品」の画像の数とサイズに依存します。そういうこともあって、h1の点線をそれに合わせるのはCSSの仕様上不可能です。
そこで発想を切り替え、ページ全体をある幅で固定して中央表示させてみました。つまり、h1とdiv.topの幅を決め打ちしたのです。
20
18
/* IEでh1とdiv.hatena-bodyを中央表示 */
body {
text-align: center;
}
/* body直下の要素であるh1とdiv.hatena-bodyを、幅固定で中央表示 */
h1, div.hatena-body {
width: 1040px;
margin-left: auto;
margin-right: auto;
}
/* メニューを中央表示・テキスト中央寄せ */
div.top {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* 記事枠を幅700pxで中央表示・テキスト左寄せ */
div.main {
width: 700px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* 実はページ全体の幅は記事枠の左スペースにサイドバーがぴたりと入るよう調節 */
div.sidebar {
width: 170px;
margin-top: 290px;
margin-left: 0;
line-height: 1.5;
text-align: center;
}
div.sidebar .hatena-section, div.sidebar .hatena-sectioncategory {
text-align: left;
}
div.main .hatena-module {
margin: 0% 5%;
padding: 4px;
width: auto !important;
}
これでリクエストは満たせていると思います。WinIE7、Firefox2、Opera8、Safari for Windows Betaで正常表示を確認。
ちなみに、表示領域が1040px以下だと横スクロールバーが出ます。画面サイズが1024px×768pxだとギリギリはみ出すので、考慮が必要かもしれません。
No.1
11236
ここでベストアンサー
70pt
まず最初に、「自作メニュー（div.top）と同じ幅内（約１０００px）」と表現していますが、実はdiv.topの幅は不定で、「特選品」の画像の数とサイズに依存します。そういうこともあって、h1の点線をそれに合わせるのはCSSの仕様上不可能です。
そこで発想を切り替え、ページ全体をある幅で固定して中央表示させてみました。つまり、h1とdiv.topの幅を決め打ちしたのです。
/* IEでh1とdiv.hatena-bodyを中央表示 */
body {
text-align: center;
}
/* body直下の要素であるh1とdiv.hatena-bodyを、幅固定で中央表示 */
h1, div.hatena-body {
width: 1040px;
margin-left: auto;
margin-right: auto;
}
/* メニューを中央表示・テキスト中央寄せ */
div.top {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* 記事枠を幅700pxで中央表示・テキスト左寄せ */
div.main {
width: 700px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/* 実はページ全体の幅は記事枠の左スペースにサイドバーがぴたりと入るよう調節 */
div.sidebar {
width: 170px;
margin-top: 290px;
margin-left: 0;
line-height: 1.5;
text-align: center;
}
div.sidebar .hatena-section, div.sidebar .hatena-sectioncategory {
text-align: left;
}
div.main .hatena-module {
margin: 0% 5%;
padding: 4px;
width: auto !important;
}
これでリクエストは満たせていると思います。WinIE7、Firefox2、Opera8、Safari for Windows Betaで正常表示を確認。
ちなみに、表示領域が1040px以下だと横スクロールバーが出ます。画面サイズが1024px×768pxだとギリギリはみ出すので、考慮が必要かもしれません。
回答ありがとうございます。
div.topとh1についてのご説明、新たな方法のご提示等、参考になりました。
そこで改めてご質問なのですが、下記画像（イメージ図）のように実装するためには、CSSをどのように設定すればよいのでしょうか？
http://f.hatena.ne.jp/images/fotolife/t/thyself2005/20071002/200...
①div.top,div.sidebarの開始をh1の位置に統一。
②画面の解像度を増しても記事スペース等の大きさや位置は不変で、右側に黒い余白が増える。
（※イメージ的にはNumeriさんのような感じです）
Numeri
下手な説明で申し訳ありませんが、ご回答宜しくお願いいたします。
正衛門
2007/10/01 23:19:19
1
1
回答ありがとうございます。
div.topとh1についてのご説明、新たな方法のご提示等、参考になりました。
そこで改めてご質問なのですが、下記画像（イメージ図）のように実装するためには、CSSをどのように設定すればよいのでしょうか？
http://f.hatena.ne.jp/images/fotolife/t/thyself2005/20071002/200...
①div.top,div.sidebarの開始をh1の位置に統一。
②画面の解像度を増しても記事スペース等の大きさや位置は不変で、右側に黒い余白が増える。
（※イメージ的にはNumeriさんのような感じです）
Numeri
http://www.numeri.jp/
下手な説明で申し訳ありませんが、ご回答宜しくお願いいたします。