質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

12739閲覧

コーディング, 画像の配置が画面サイズの変更で崩れてしまいます。

ishigaki16

総合スコア10

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/07/01 12:26

編集2016/07/02 07:01

###前提・実現したいこと
1.矢印入りのリンクバナー(.digicatalog)を、
position: relative;
position: absolute;
で指定したところ、画面サイズによって配置がズレてしまいます。

2.カルーセルの左右矢印を、同様に、
position: relative;
position: absolute;
で指定したところ、画面サイズによって配置がズレてしまいます。

画面サイズを変えても配置が変わらないようなコーディングは、
どのようにすれば良いでしょうか。
よろしくお願いいたします。

###該当のソースコード

<body> <header class="header"> <div class="top"> <img src="/img/imagebanner.png" width="1178" height="390" alt=""/> </div> <div class="digicatalog"> <img src="/img/dicatalogbtn.png" width="334" height="70" alt=""/> </div> </header> <div class="wrapper"> <main class="main"> <div class="sets"> <h2 id="midashi1"> <img src="img/midashi1.png" width="980" height="154" alt=""/> </h2> <div class="caroufredsel_wrapper"> <div class="slides"><img src="/img/set1.png"></div> <div class="slides"><img src="/img/set2.png"></div> <div class="slides"><img src="/img/set3.png"></div> <div class="slides"><img src="/img/set4.png"></div> <div class="slides"><img src="/img/set5.png"></div> <div class="slides"><img src="/img/set6.png"></div> <div class="slides"><img src="/img/set7.png"></div> </div> <div class="button"> <p><a href="#" class="prev" style="display: block;"><img src="img/slide_left.png" alt=""/></a></p> <p><a href="#" class="next" style="display: block;"><img src="img/slide_right.png" alt=""/></a></p> </div> </div>
img { max-width : 100% ; height : auto ; } body { -webkit-text-size-adjust : 100% ; } .header { position: relative; top: 0; width: 80%; margin: 0 auto; width: 1181px; } .digicatalog { position: absolute; width: 1181px; top: 250px; left: 695px; } .wrapper { width: 980px; margin: 0 auto; } .main { width: 100%; display: block; margin: 0 auto; text-align:center; } .sets { position: relative; top: 0; width: 980px; margin: 0 auto; } .caroufredsel_wrapper { width: 980px; } .slides { width: 209px; height: 474px; float: left; display: block; margin-left: 10px; margin-right: 10px; } .button { width: 980px; margin: 0 auto; } .prev { position: absolute; top: 400px; left: -20px; } .next { position: absolute; top: 400px; right: -20px; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aKusano

2016/07/01 13:39 編集

肝心のスライド部分のHTMLコードが不明なので正確な回答ができません。可能であればプラグインが出力する最終DOMを記載してください。
kei344

2016/07/01 14:23

CSSに書かれている部分とHTMLが一致しません。HTMLを省略するにしても全体像がわかるようにしていただけませんか?よろしくお願いします。
kei344

2016/07/02 12:24

編集される前のコードを本文に復帰させてください。回答が付いた質問の編集は慎重に行ってください。質問文のコードについて指摘がある場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
guest

回答1

0

ベストアンサー

画面サイズによって配置がズレてしまいます。

画面サイズを変えても配置が変わらないようなコーディングは、
どのようにすれば良いでしょうか。

掲示されているHTMLとCSSが一致しないので答えようがありませんが、

そもそもこのコードだと固定サイズ前提になっているように見受けられますので、
ウィンドウの画面サイズが変わってもコンテンツのサイズは変わらないはずです。
まだ何か省略している情報があるのでしょうか?

また、「画面サイズによって配置がズレる」とのことですが、どのパーツがどのようにズレてしまうのか質問内容からでは全く判別できません。同時に、「画面サイズを変えても配置が変わらない」というのが最終的にどのような形にしたいのかも分かりません。
現在の状況と望む形を伝えやすくするためには、画面キャプチャや図を掲示することもひとつの手ですので、検討してみてください。

ちなみに一般的にpositionによる絶対配置レイアウトは、

1.絶対配置したい要素の配置基準としたい領域にposition:relative;を指定する
(※絶対配置要素の親要素である必要がある)
2.絶対配置したい要素にposition:absolute;を指定し、座標指定する

で出来ます。思うような位置に配置されない場合、多くは1の基準領域の指定がおかしいことが多いので、
どの要素を配置の基準領域としているのか再度確認することをお勧めします。


追記に合わせて回答を補足します。

###1.矢印つきバナー
.digicatalogがheaderを突き抜けて端に行ってしまうのは、.digicatalogの親要素にposition:relativeの指定がどこにも入っていないからです。.topにrelative指定を入れていますが、これは.digicatalogとは兄弟関係にある要素であり、絶対配置の基準領域として機能していません。
.digicatalogをどこの領域内で絶対配置したいのかによって対応は変わります。

1..topの領域の中で絶対配置したい場合

HTML

1<header class="header"> 2 <div class="top"> 3 <img src="/img/imagebanner.png" width="1178" height="390" alt=""/> 4 <div class="digicatalog">/*.topの子要素にする*/ 5 <img src="yukata16/img/dicatalogbtn.png" width="334" height="70" alt=""/> 6 </div> 7 </div> 8</header>

2..headerの領域内で絶対配置したい場合

CSS

1.header { 2 position: relative; /*.headerを基準領域とする*/ 3 width: 80%; 4 margin: 0 auto; 5 width: 1181px; 6}

###2.カルーセルの左右矢印
カルーセルの矢印ボタンの位置がズレてしまうのは、おそらく左右の矢印ボタンが#buttonという要素を基準として配置されているからであると思われます。1.のバナーと同様、.caroufredsel_wrapperと#buttonは兄弟関係であり、それぞれ独立して配置されていますので、現状では.caroufredsel_wrapperの領域サイズに自動的に連動させて矢印の位置を決めることは出来ない状態です。
現在#buttonにどのようなスタイルが適用されているのか分からないので正確なことは言えませんが、次のようにすることで矢印を常にカルーセル領域の外側に配置できるようになると思います。

1..caroufredsel_wrapper#buttonが同じサイズで表示されるように調整
2.#button領域の外側に.left.rightを絶対配置(left:とright:にマイナス値を入れれば要素の外側に配置できます)

投稿2016/07/02 02:57

編集2016/07/02 03:49
aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ishigaki16

2016/07/02 07:06 編集

ご丁寧に教えていただきありがとうございます。 いただいたアドバイスを元に上記のように修正し、.digicatalogと.leftと.rightの絶対配置について解決できたようなのですが、.slidesの部分の中央表示ができず困っております。そちらにつきまして、ご指摘いただける箇所がありましたら、よろしくお願いいたします。
aKusano

2016/07/02 07:27

「.slideds部分の中央表示」というのがどういう状況なのかちょっと分かりかねます。 カルーセル部分はプラグイン側から出力されるDOMがどうなっているか、プラグインに付属するCSS(があれば)がどうなっているかによっても影響されるので、もう少し詳しい情報がないと何とも。。 ちなみに、回答を元に修正したとのことですが、最初の質門内容を直接上書きしてしまうと経緯を知らない他の方から回答を得られなくなってしまいますので、その場合は「このように修正しました」と元の質問内容の下に追記をした方がよろしいかと思います。 .slidesの中央部分、という新たな質門については別途質門を立て直したほうが分かりやすいかと思いますのでそうされてはいかがでしょうか?
ishigaki16

2016/07/02 07:31

色々とアドバイスをいただきありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問