このサイトの閲覧者の方から、画面サイズに対応して画像が縮小する、いわゆるレスポンシブ型にできないものかとの質問を受けました。確かに最近ではスマホ対応にしないことには、一人前にあらずということですから、以前に投稿した「フェイドイン・アウト型スライドショー」を例に、レスポンシブにしてみました。
サンプル
本サンプル表示用HTML
<div id="stage">
<div id="photo1" class="pic"><img src="wp-images/1.jpg"></div>
<div id="photo2" class="pic"><img src="wp-images/2.jpg"></div>
<div id="photo3" class="pic"><img src="wp-images/3.jpg"></div>
<div id="photo4" class="pic"><img src="wp-images/4.jpg"></div>
<div id="photo5" class="pic"><img src="wp-images/5.jpg"></div>
<div style="padding:28%;"></div>
</div>
HTMLのポイント説明
・このスライドショーの下に何か記述とか、他の要素を加えたい場合には、画像にposition:absoluteが指定されているため、スライドショーと、下の要素が重なってしまいます。
そこで、下の要素がスライドショー画像の下に表示されるように、<div style=”padding:28%;”></div>を画像タグの下に挿入します。28%は、画像の縦/横比の1/2から決めた値です。画像サイズによって調整してください。
本サンプル表示用CSS
#stage {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 40s infinite;
-webkit-animation: imgTrans 40s ease-in infinite;
animation: imgTrans 40s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
#photo4 img{
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;
}
#photo5 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
CSSのポイント説明
・「フェイドイン・アウト型スライドショー」との違いは、以下です。
#stage のwidthの指定を、max-width: としてheightは指定していない。
img のwidth指定を100％、height指定をauto としている。
#frameは削除している。
はじめまして。
フェイドイン・アウト型スライドショー（レスポンシブ）お借りしたいのですが、
画像の1枚目～4枚は無視され、5枚目だけが永遠と繰り替えされます。
何か対処法があればご教示お願いします。
yoshiさん、はじめまして。
どうしてでしょうね。
#photo1から#photo5まで、8sの間隔でdealayが設定されていますか。
もう一度、html,cssの記述を見直してください。
And I thought I was the sensible one. Thanks for setting me strhgiat.
レイアウトが崩れてしまう為
このcssを
#stage {
position : relative;
max-width : 600px;
margin : 0 auto;
background : #ddd;
}
.pic {
position : absolute;
}
.pic img {
width : 100%;
height : auto;
opacity : 0;
-moz-animation : imgTrans 40s infinite;
-webkit-animation : imgTrans 40s ease-in infinite;
animation : imgTrans 40s infinite;
下記の様に記述したのですが、これが原因でしょうか？
#stage {
position : relative;
max-width : 1000px;
margin-left : 0 auto;
background : #ddd;
height : 400px;
.pic {
position : absolute;
width : 1000px;
height : 400px;
}
.pic img {
width : 1000px;
height : 400px;
opacity : 0;
-moz-animation : imgTrans 40s infinite;
-webkit-animation : imgTrans 40s ease-in infinite;
animation : imgTrans 40s infinite;
}
他の部分のcssとhtmlは一緒です。
レイアウトが崩れるというのはどのようになるのでしょうか。
サイトのページのhtmlとcssの記述通りで、ご覧のようにうまく動いています。
ただし、画像サイズの縦横比がサンプルと違う場合は28％を補正してください。説明に書いてあります。
widthとheightを固定値で設定しますとレスポンシブにはなりません。
margin:0 auto; を、margin-left:0 auto; にしてはいけません。
#stage { の終わりの閉じかっこ } が抜けています。
以上ですがもう一度検討してください。
必ずできますよ。
追記ですが、画面左寄せに表示したい場合は、何も記載しないか、margin-left:0;にしてください。
その右に文字を入れたい場合は、float:left;にしてください。
Times are chgniang for the better if I can get this online!
Thank you for your comment.
連絡遅くなりました、すみません。
float: left;でできました！！ありがとうございます！！
何故こんな簡単な事に気付かなかったのか・・・・
自分が情けない・・・
出かけていて返事が遅くなりました。
解決してホッとしています。
こんにちは。
いつもお世話になってます。
フェイドイン・アウト型スライドショー（レスポンシブ）をお借りしたいのですが、画像が２枚の時のCSSの記述方法のアドバイス頂けたら幸いします。
nobuyukiさんこんにちは。
スライドが2枚ですから、photo1、photo2だけの記述になります。
8秒間隔2枚ですから、
animation: imgTrans 16s infinite;
となり、2枚目のdelayは、animation-delay: 8s;のままでいいです。
スライドの切り替えは、50%ですから、前後でFADEさせることを考えて、
@keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
ぐらいですかね。15%,45%.,60%の数値は、好みで決めてください。
いろいろアドバイスありがとうございました。
はじめまして、いつも参考にさせて頂いてます。
早速質問なのですが、
このスライドショーを別々のページに置こうと考えているのですが、
表示するスライドの枚数、遷移時間を別々に設定しようとしてつまづいております。
cssの記述をどのようにすればよろしいでしょうか？
また、特定の1枚だけを長く表示させることは可能でしょうか？
ご教示頂けると嬉しいです、よろしくお願いいたします。
takkyuさんはじめまして。
例えば、スライド枚数を8枚、1枚毎の遷移時間を8秒としましょう。
トータルのanimationの秒数は、8×8=64sとなります。
トータルの秒数64sがanimation 100%ということになります。
1枚当たりの％は、100/8、すなわち、12.5%ということになります。すなわち、12.5%の間にFadeInして表示してFadeOutさせます。実際は、FadeOutするときに次のスライドがFadeInしますから、これを調節します。
上の例では、例えば以下のようなcssコードになります。
@keyframes imgTrans {
0% { opacity:0; }
3% { opacity:1; }
11% { opacity:1; }
14% { opacity:0; }
100% { opacity:0; }
}
3%、11%などの値は表示させてみて、好みで調整してください。
さて、1枚だけ表示時間を変えたい場合は、上の例で行くと、1枚だけ16秒にしたければ、トータルのanimationの秒数は、8×7+16=72sとなり、これが100%となります。
すなわち、短い表示時間のスライドは1枚当たり11%、長いものは22%となります。（1%はどこかで加えて補正します）
よって、
@keyframes imgTrans {
0% { opacity:0; }
2% { opacity:1; }
9% { opacity:1; }
11% { opacity:0; }
13% { opacity:1; }
20% { opacity:1; }
22% { opacity:0; }
24% { opacity:1; }
42% { opacity:1; }
44% { opacity:0; }
46% { opacity:1; }
53% { opacity:1; }
55% { opacity:0; }
1-4行の繰り返し
}
とし、anmation delay を長いスライドの次のスライドからは、長いスライドの表示に余計にかかった秒数を加えます。
ただし、このやり方は、スライドが完全にFadeOutしてから次のスライドがFadeOutすることになります。
スライドの遷移を重ねたければ、別建てのanimationを走らせて、animation delay でうまく重ねて表示させることになりますが、複雑なので省略します。
以上から、ご検討ください。
返答遅くなってしまい申し訳ありません、
アドバイスありがとうございます。
ちなみに、個々のページに別のスライドショーを掲載する際には、
stage1,stage2,stage3…と別に記述するだけでなく、
html内とcss内の画像(photo1,photo2…)の方も別記述するべきだと自己解決しました。
失礼いたしました。
初歩的な質問で申し訳ないのですが。。。
fc2ショッピングカートで使用させていただこうと考えています。
実際に設置し、問題なく動作はしています。
そこで、画像に商品ページのリンクを貼ったのですが、
画像5枚とも、5枚目の画像に貼ったリンク先へ飛んでしまいます。
どう直したらよいのでしょうか。
sachiさんこんにちは。
このタイプは、画像が５枚重なっていて、５枚目が一番上にあります。したがって、opacityが0になっていても、5枚目が常にクリックの対象になってしまい、5枚目のリンク先に飛んでしまうのです。
対策としては、opacityが0->1の0のタイミングでdisplay:block;とし、1->0 の0のタイミングで、display:none;として、表示されているスライドのみを表示するようにします。
あるいは、スライドイン・アウト型を使えば、対象スライドのみ枠内に表示されますから、解決します。
私としては、二つ目のスライドイン・アウト型をお勧めしますが、いかがでしょうか。
お返事ありがとうございます。
スライドイン・アウト型に変更してリンクも問題なく貼れました。
フェイドイン・アウト型の修正については、なんとなく分かりました。
本当にありがとうございました。
解決してよかったですね。
確かに、リンクを貼るところまでは気が回っていませんでした。
機会があったら、それを加味したscriptを公開したいと思います。
Most help articles on the web are inaccurate or inehceront. Not this!
Great thanks.
お世話になります。
スライド2枚のタイプで、５秒間隔で以下のように設定しております。
animation: imgTrans 10s infinite;
2枚目のdelayは、animation-delay: 5s;
しかし、2枚目スライド後に20秒間ほどグレーの背景が出てきてしまします。
スマートフォンでの使用です。
なにか改善策があればご教示ください。
宜しくお願い致します。
こんにちは。
animationの記述はどうなっていますか?
スライドが2枚ですから、５０％で入れ替えになります。
上の、nobuyuki さんの質問・回答を見てください。
でも、20秒も背景になるのはおかしいですね。
早速のご返信ありがとうございます。
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
上記で行いましたが、うまくいきませんでしたので
下記で再試行いたしました。
@keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
しかしながら、どちらもうまくいきませんでしたので
スライドイン・アウト型へ変更いたしました。
お手間お掛けしました。
ありがとうございました。
スライドイン・アウト型ではうまくいき、フェイドインアウト型ではうまくいかないのはどうしてでしょうね。
蛇足かもしえませんが、以下でうまくいくはずです。
.pic img {
width: 100%;
height: auto;
opacity:0;
animation: imgTrans 10s infinite;
}
#photo1 img {
animation-delay: 0s;
}
#photo2 img {
animation-delay: 5s;
}
@keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
わざわざありがとうございます。
早速やってみて、背景はでてこなくなりました！
しかし今度は画像が同じ位置にでてこなくなってしまいました、、。
画像が２段になり、上下でフェイドイン・アウトになってしまいます。
また、スライド式も背景がでてきてしまうので
同じ画像を交互に挿入してやっております。
いろいろとご教示ありがとうございました。
すみません！
pic {
position: absolute;
}
が抜けていたみたいで、できました！
本当にありがとうございました。
次はサムネイル用ロールオーバーに挑戦したく思います。
解決おめでとうございます。
次も頑張ってください。
はじめまして。
フェイドイン・アウト型スライドショー（レスポンシブ）をお借りしたいのですが、５枚目の画像を消さずに残す方法がありましたらご教示願います。
現在制作中のホームページのトップページに使用するつもりなのですが、スライドショーの終わりの５枚目に重要なメッセージを表示して固定させたいと考えています。
よろしくお願いいたします。
kemasukeさんこんにちは。
animation-fill-mode: forwards;を加えれば、100%で止まったままになります。
ところが、このanimationは、100%では、フェードアウトして消えてしまいますので、一工夫が人用です。
まず、今の記述の .pic img { の最終行に、animation-fill-mode: forwards;を記述してください。
こうすると、1枚目から4枚目まではanimationを繰り返しません。
5枚目については別扱いにします。
htmlで、class="pic"となっているところを、class="pic2"とします。
cssで、以下のように、別建ての記述にします。
.pic2 img {
opacity:0;
animation: imgTrans2 40s;
animation-fill-mode: forwards;
}
@keyframes imgTrans2 {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:1; }
100% { opacity:1; }
}
これでうまくいきますので、試してみてください。
追加です。読み返していて気が付きました。
animation-fill-mode: forwards;を付け加えないでも、
animation の infinite を削除すればOKです。
お返事ありがとうございます。
早速試してみたところ、大成功でした。
ＨＰの完成にはまだまだ時間がかかりそうですが、
大きく前進したことは間違いありません。
本当にありがとうございました。
お役に立ててうれしいです。
一歩一歩前進してください。
はじめまして。
サイトを作る際に参考にさせていただいております。
スマホサイトでは何とかスライドショーを表示させることができたのですが、PCサイトでは何故か全画面表示の時は5枚分の画像が縦に並びスライドしません。
しかし、ウィンドウを狭め左右の余白がない形になるとスライドショーがはじまります。
CSSの事はよくわからないのでこちらのソースを
・画像の名前
・
上記の2点のみ変更して使用させていただいておりますので、何が原因なのか検討もつきません。
何か改善手段があったら、ご教授いただけたら幸いです。
rioさん、はじめまして。
変更した２点目の記述がありませんね。
思い当たる点が思い浮かびませんね。画像が縦に並ぶということは、position:absolute;が反映されていないということですが、画面を狭めると正常になるというところがわかりません。
クラス名の、.picと#stageのposition:relative;がきちんと定義されているか確認してください。
今のところ、それ位しかアドバイスできませんが、、、
すみません、抜けておりました。
変更した箇所は画像のサイズだったのですが、本日cssを上の方に入れてみたら全て解決しました。
別の箇所のスタイルがおかしくて影響してしまった様です。
大変申し訳ありません。
この度はご指摘ありがとうございました。
解決してホッとしました。
そんなこともあるんですね。
いいサイトができますように。
大変参考にさせていただいております。
１０枚の画像を５秒ごとに表示させる・・・まではよかったのですが、
最後の画像がずっと残ってしまい、２巡目以降の一枚目がほとんど表示されることなく
２枚目に移行してしまいます。
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
この％の計算方法がよくわからないので、教えていただけませんでしょうか？
おはようございます。
5秒ごとですから、トータル50秒、delayが+5秒まではできていると思います。
animation の記述ですが、これは5枚用の記述ですから、１０枚用では、各%について半分にしなければなりません。5枚用は20%で切り替えるのですが、10枚用は10%で切り替える必要があります。
7->3.5、18->9、25->12.5 としてください。
ありがとうございました！！
おかげでスムーズに切り替わるようになりました。
流石です！！！！
どういたしまして、お役に立てて幸いです。
今後とも当サイトをよろしく。
The paragon of untdrsdaneing these issues is right here!
Thank you for your comment.
はじめまして、フェードインアウト型でどうしてもリンクをそれぞれに張りたいのですが以前の問いを参考にしてもわからなかったのでCSSの書き方を教えてもらえませんでしょうか？
kazanoさん、はじめまして。
スライドショー（フェードイン・アウト型）で、西村茂美さんから同じ質問が寄せられています。その回答を参考にしてください。なお、レスポンシブ型でのサンプルを、以下に掲載しました。
<a href="http://css.programming.jp/pages/slideshow_fade_2_link.html" rel="nofollow">http://css.programming.jp/pages/slideshow_fade_2_link.html</a>
CODEは、ソースで確認してください。
ごめんなさい。上のSAMPLEは、firefoxではリンクが効かないようです。
次のページは、スライド型を併用したもので、firefoxでもうまくいきます。
ページソースを見て、参考にしてください。
<a href="http://css.programming.jp/pages/slideshow_slide&fade_responsive.html" rel="nofollow">http://css.programming.jp/pages/slideshow_slide&fade_responsive.html</a>
先日フェイドイン型フォトギャラリー（レスポンシブ）で質問させていただいた。abdです。
早速ご質問にご回答いただき感謝しております。
#stage2の動作が確認できません。(htmlの.pic2を.picにすると動作しますが#stageと同タイミングになるため写真が消えている時間が長くなります）
イメージは#stageで５枚を２５秒で繰り返し、#stage2は２枚を16秒で表示したいと考えております。
何度も試行錯誤をしてみたのですが、解決できずに困っています。ご教授いただけませんでしょうか？
htmlは以下の通りです。
cssは以下の通りです。
#stage {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 25s infinite;
-webkit-animation: imgTrans 25s ease-in infinite;
animation: imgTrans 25s infinite;
left:10%;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#photo3 img {
-moz-animation-delay: 10s;
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
#photo4 img{
-moz-animation-delay: 15s;
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
#photo5 img {
-moz-animation-delay: 20s;
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
—————————————————————————-
#stage2 {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic2 {
position: absolute;
}
.pic2 img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans2 16s infinite;
-webkit-animation: imgTrans2 16s ease-in infinite;
animation: imgTrans2 16s infinite;
left:10%;
}
#photo21 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo22 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
@-webkit-keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
abd さん、ごめんなさい。
このコメント欄には、html形式のコードが表示されません。私も困っているのですが。
<は＆ｌｔ；、>は＆ｇｔ；を半角でで記述すれば表示されます。面倒ですね。
２番目のスライドショーは、htmlで、id="stage2" のようにすべてに2が付加されていますか？
早速のご返答ありがとうございます。
htmlは以下のように記述してあります。
ご回答にあったように原則的にコピペのネーミングの後に2をつけてあります。
※＜＞は（ ）に変換してみました。
（div id="stage"）（/div）
（div id="photo1" class="pic"）（img src="img/slide1.png"）（/div）
（div id="photo2" class="pic"）（img src="img/slide2.png"）（/div）
（div id="photo3" class="pic"）（img src="img/slide3.png"）（/div）
（div id="photo4" class="pic"）（img src="img/slide4.png"）（/div）
（div id="photo5" class="pic"）（img src="img/slide5.png"）（/div）
（div style="padding:16%;"）（/div）
（div id="stage2"）
（div id="photo21" class="pic"）（img src="img/under-slide1.png"）（/div）
（div id="photo22" class="pic"）（img src="img/under-slide2.png"）（/div）
（div style="padding:23%;"）（/div）
よろしくお願いします。
htmlにもcssにもミスがあります。
html: stage の</div>は、stageの記述の最後に記します。stage2の締めくくりの </div> が抜けています。
css: #photo22 img の項の締めくくりの } が抜けています。
以上を直して、試してください。
追記です。
div id=”photo21″ class=”pic”のpicは、pic2に。
早速のご回答にありがとうございます。
先程ご教授どおり修正したところ、イメージ通りになりました。
流石としか言いようがありません。感服いたしました。
何度も記述を見直しをしたつもりだったのですが、面目ありません。
本当にありがとうございました。
解決おめでとうございます。
いいページになりますよう、ご活用ください。
はじめまして。こちら単純な質問で申し訳ございませんが
切り替えの秒数を全体的に今の半分くらいの速度に変更したいのですがどうすればよろしいでしょうか。よろしくお願い致します。
mm-mさん、はじめまして。
このサンプルの例は、スライド5枚で、トータル40秒でanimationを設定しています。
したがって、半分ですと、20sとなり、delayが8s -> 4s(4s間隔)となります。
これで試してください。
ありがとうございます、少し早く表示する事が出来ました。ありがとうございました！
どういたしまして。
今後も、ご活用ください。
こんにちは、はじめまして。
こちらのスライドショーを、３枚で回したいと思いキーフレームの割合を変えてみているのですが、うまくいきません。どうしても２週目で１枚目の画像の表示時間が短くなってしまいます。
割合の計算がにがてなんですが、どうしても３枚でまわしたいんです・・・！すいませんがたすけてください；；
linkさん、はじめまして。
3枚にするには、
(1).pic img のanimationのトータル時間を、24sにします。
(2)anmation-delayの値は、0s,8s,16sそのまま
(3)animationは、例えば、以下のようにします。
@keyframes imgTrans {
0% { opacity:0; }
23% { opacity:1; }
33% { opacity:1; }
43% { opacity:0; }
100% { opacity:0; }
}
返信が遅くなってすみません！
(*´ｰ｀)ありがとうございます、動作確認も問題なかったのでこのまま使っていきたいと思います。
本当にありがとうございました！
お役に立てて良かったです。
どうぞご活用ください。
はじめまして。
レスポンシブルのスライドショー流用させて頂いております。
現在、max-width: 640px で設定しているのですが、
元々の画像がもっと大きい画像（980px）なもので、PC時縮小せずに表示できないものかと考えています。
実現方法をご教授願えないでしょうか？
こんにちは。
そのまま、max-width:980px; とすればOKですが、何か問題があるでしょうか。
失礼しました(^^;
max-width: 640pxでないとモバイル時に画像がはみ出すのではと思い込んでおりました。
どうもありがとうございました。m(_ _)m
どういたしまして。
ご活用ください。
シンプルで見易くとても助かっております、
フェイドイン・アウト型スライドショー（レスポンシブ）の上品な味付けが気に入り、
是非使わせて頂こうと思ったのですが、
画面を横に広げると描画領域に対し、スライドショーだけが広がり切らずに背景が覗いてしまいます、
これは仕様として仕方のないことでしょうか？
.stage {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
float: left;
}
スライドショーのサイズを大きくすることは可能で、
#stage { 内に max-width:1000px; というように記述してください。
width;100%; では、何に対して100%なのかわかりません。
.stage となっているので、違う構成になっているのかとも思いますが、
以上を参考にしてください。
ありがとうございます！
BODYにmax-widthを指定することで解決しました、
お手数をお掛けしました、
やっとうまい酒が飲めそうです！
解決おめでとうございます。
これからも当サイトをご活用ください。