位置の調整の仕方が分からない
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
html初心者です。
私は今勉強のため色々なサイトを見て再現しようとしたりしているのですが、
例えばzozotownさんのデスクトップ用サイトのロゴの位置
画面を大きくしても外側の黒い部分だけが伸びますよね。
あれはいったいどういう風に書くのでしょうか？
色々autoにしてみたりdivで囲って試したりしているのですが、上手くいきません。
私は今勉強のため色々なサイトを見て再現しようとしたりしているのですが、
例えばzozotownさんのデスクトップ用サイトのロゴの位置
画面を大きくしても外側の黒い部分だけが伸びますよね。
あれはいったいどういう風に書くのでしょうか？
色々autoにしてみたりdivで囲って試したりしているのですが、上手くいきません。
まよし さん
02月24日 12時27分
まよしさん、こんにちは。
ZOZOTOWNさんのサイト＆ソースを見てみました。
黒い部分は、divに幅100%(width: 100%)と、背景を黒(background: #323232)にしたものです。
その内側のdivに対し、幅980px(width: 980px)指定し、中央寄せ（margin: auto）し、その中にロゴを配置しています。
ロゴ部分のdivは980pxで、その背景のdivは100%ですから、画面を大きくすると背景だけが伸びていく（黒い部分が伸びる）事になります。
■HTML
■CSS
※わかりやすいように不要な部分は削除しています。
「どうなっているんだろう」という箇所で、右クリックから「（要素を）検証」してみると、該当箇所のHTML/CSSを調べることができて便利ですよ。
ブラウザによって多少表記や機能に違いがありますが、大抵の人気ブラウザには搭載されている機能です。
ZOZOTOWNさんのサイト＆ソースを見てみました。
黒い部分は、divに幅100%(width: 100%)と、背景を黒(background: #323232)にしたものです。
その内側のdivに対し、幅980px(width: 980px)指定し、中央寄せ（margin: auto）し、その中にロゴを配置しています。
ロゴ部分のdivは980pxで、その背景のdivは100%ですから、画面を大きくすると背景だけが伸びていく（黒い部分が伸びる）事になります。
■HTML
<div id="hWrapper">
<div id="hWrapperInner">
～ロゴなど～
</div>
</div>
<div id="hWrapperInner">
～ロゴなど～
</div>
</div>
■CSS
#hWrapper {
width: 100%;
background: #323232;
}
#hWrapperInner {
width: 980px;
margin: 0 auto;
}
width: 100%;
background: #323232;
}
#hWrapperInner {
width: 980px;
margin: 0 auto;
}
※わかりやすいように不要な部分は削除しています。
「どうなっているんだろう」という箇所で、右クリックから「（要素を）検証」してみると、該当箇所のHTML/CSSを調べることができて便利ですよ。
ブラウザによって多少表記や機能に違いがありますが、大抵の人気ブラウザには搭載されている機能です。
馬場誠 さん
02月24日 13時45分
迅速で丁寧な回答ありがとうございます。
パソコン自体まだ不慣れで検証という便利な機能の存在を初めて知りました。
本当にありがとうございました。
パソコン自体まだ不慣れで検証という便利な機能の存在を初めて知りました。
本当にありがとうございました。
ましよ さん
02月24日 14時05分
