ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
QNo.4019352 コンテンツの大きさはそのままで、ブラウザに合わせて自動伸縮の背景
質問者：onyan 過去の質問を検索したのですが、すっきり解決するものが見つかりませ
んでした。
なんと質問したら良いのかも分からないため、伝わりにくかったら申し訳ありません。

​http://www.mckinsey.co.jp/​
上記のサイトのように、ブラウザのサイズを変更すると背景（？）も合わせて伸縮するのですが、
コンテンツの大きさは変わらないという方法を教えてください。

よろしくお願いいたします。
困り度：
  • すぐに回答を！
質問投稿日時：
08/05/13 16:09
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答良回答20pt
ANo.4 >「縦方向に繰り返す」というのは、こちらのサイトを参考に、
>メインエリアのサイドをグレーのグラデーションで作ったことがあります。
happylifeさんのソースは綺麗でいいですね。和みます。

>今回も同じ考え方で良いということですか？
そうです。yをxにするだけです。

>その場合縦だったものを横にし、グラデーションのところを
>希望の色で作成すれば良いということでしょうか？
>（またまた説明がヘタで申し訳ありません…）
その通りです。

>今回のサンプルのサイトは左上に会社ロゴがあり、そちらは必ず左端に固定されていますが

background-positionというのは、背景の表示開始位置を指定するものなので、
前に私が挙げたソースで言うと
div.sample {
background-image: url(image/bg.gif);
background-repeat: repeat-x;
background-position: left top;
height:200px;
}
class="sample"というDIVタグでx方向にリピート表示する背景画像bg.gifの
表示開始位置をx=left y=topにする、ということです。
leftやright、topやbottomと書いた場合は0pxと同等の意味になります。

会社ロゴが中に入るのであれば、ロゴはまた別の要素としてCSSで位置を指定しなければなりません。
参考に挙げられたテンプレートが参考になるのでは。
回答者：tenderfeel
種類：回答
どんな人：経験者
自信：自信あり
回答日時：
08/05/13 19:43
この回答へのお礼ご回答ありがとうございます。
先ほど試したところうまくできました！
ロゴを入れる場合はまた別の設定だったのですね。
背景画像に入れるとロゴまで繰り返してしまいますものね（＾_＾;）
こちらもhappylifeさんのサイトで研究してみます。

本当にどうもありがとうございました。

回答
ANo.3 うっかり間違えてました。

※訂正
用意する背景は縦ｘ横の最低サイズが、
横方向リピートなら任意×1px、
縦方向リピートなら1px×任意
あれば表示されます。
回答者：tenderfeel
種類：回答
どんな人：経験者
自信：参考意見
回答日時：
08/05/13 18:06
この回答へのお礼ご回答＆訂正ありがとうございます。

「縦方向に繰り返す」というのは、
​http://css-happylife.com/template/02/​
こちらのサイトを参考に、メインエリアのサイドを
グレーのグラデーションで作ったことがあります。
今回も同じ考え方で良いということですか？

その場合縦だったものを横にし、グラデーションのところを
希望の色で作成すれば良いということでしょうか？
（またまた説明がヘタで申し訳ありません…）

今回のサンプルのサイトは左上に会社ロゴがあり、そちらは必ず左端に固定されていますが、
その指定は

background-position: left top;

の部分が該当するのですか？

何度も申し訳ありませんがよろしくお願いします。

回答
ANo.2 背景をCSSでリピート。
このサイトの場合はx軸方向にリピートさせています。

要素にCSSで背景をつけるとき
background-repeatプロパティでrepeat-xとすると、横方向にだけ繰り返し表示することが出来ます。
HTMLタグで背景を指定した場合だと方向の指定は出来ません。

用意する背景は縦ｘ横の最低サイズが、
横方向リピートなら1px×任意、
縦方向リピートなら任意ｘ1px
あれば表示されます。

一番親となる要素にその方法で背景をつけて、中の要素をmargin:0 auto;とかで中央位置に置くと
参考サイトのような感じになります。

具体的には次のようになります。
適当な画像で試してみてください。

div.sample {
background-image: url(image/bg.gif);
background-repeat: repeat-x;
background-position: left top;
height:200px;
}
.sample p {
width:400px;
border:solid 1px #ccc;
}
<div class="sample">
<p>サンプル</p>
</div>
※positionは背景の開始位置です。

プロパティはまとめて書くことも出来ます。
background:url(image/bg.gif) repeat-x left top;

参考サイトのように窓いっぱいに表示する場合は、
ユニバーサルセレクタでブラウザのデフォルトCSSをクリアする必要があります。
* {
margin:0;
padding:0;
}

無料テンプレート探すと似たようなのが見つかると思いますよ。
回答者：tenderfeel
種類：回答
どんな人：経験者
自信：自信あり
回答日時：
08/05/13 17:59
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答
ANo.1 はじめまして、

ご指定のサイト、CSSで作られているみたいです。
私今XHTML+CSS勉強中なのですが、綺麗なソースは書けないかも?ですが
同じように表示させるページは作れます。
質問者様は普段どんな感じでページ作られていますか?
CSS使ってご指定のサイトと同じように作るか
テーブルレイアウトで作るかによって方法が違ってくるような?

どのように作成したいか、教えて頂けると回答しやすいかも?です。
回答者：clover125
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/05/13 17:55
この回答へのお礼ご回答ありがとうございます。
まだまだ私もCSSが不十分で（テーブルも不安…）試行錯誤しています。
知識ないんだからCSSからやっちゃえーと言う感じで作っています(^_^;)
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ