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

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

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

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

742閲覧

要素を重ねた際に、片方の要素の幅のみ変えて高さを揃える方法

newyee

総合スコア213

CSS3

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/14 05:30

編集2018/11/21 06:38

要素を重ねた際に、下の要素の画像の幅をブラウザいっぱいにし、高さは、上の画像と同じにしたいのですが、良い方法はありますでしょうか?
コードは長い為、codepenにて上げさせていただきました。
codepenのリンクになります
具体的には、「back_slide_wrapper」内の画像の高さを、「slide_wrapper」内の画像の高さに合わせたいです。ですが、「back_slide_wrapper」内の横幅はブラウザいっぱいに広げたいです。
「back_slide_wrapper」内の画像の高さと、「slide_wrapper」内の画像の高さを指定し、揃えれば良いのかなとも思ったのですが、できるだけレスポンシブルに作成したいと考え為、パーセント指定で揃える方法を考えたのですが、高さをそろえる方法がみつかりませんでした。
どなたか、良い方法を教えて頂けましたら、幸いです。
よろしくお願いします。
「back_slide_wrapper」と、「「slide_wrapper」の画像が重なっている部分の画像になります。
イメージ説明

htm

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>heair_salon</title> 6 <link rel="stylesheet" type="text/css" href="normalize.css" > 7 <link rel="stylesheet" type="text/css" href="heair_salon.css" > 8 <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> 9</head> 10<body> 11 <header> 12 <div class="header_menu_wrap display_flex"> 13 14 <h1 class="header_logo"><a href="#"><img src="https://dl.dropboxusercontent.com/s/jo1vhnbcyjhhdpl/header_logo.webp?dl=0" alt="blandlogo" width="58px" height="55px"></a></h1> 15 <ul class="header_menu display_flex" > 16 <li><a href="#">HOME<p class="header_menu_ruby">ホーム</P></a></li> 17 <li><a href="#">SALON<p class="header_menu_ruby">サロン検索</p></a></li> 18 <li><a href="#">SPECIAL<p class="header_menu_ruby">特集コンテンツ</p></a></li> 19 <li><a href="#">CATALOG<p class="header_menu_ruby">ヘアカタログ</p></a></li> 20 <li><a href="#">RECRUIT<p class="header_menu_ruby">採用情報</p></a></li> 21 <li><a href="#">CONCEPT<p class="header_menu_ruby">コンセプト</p></a></li> 22 </ul> 23 <p class="yoyaku_box"> 24 <a href="#">サロンからweb予約</a> 25 </p> 26 27 </div> 28 </header> 29 <div class="main_contens"> 30 <div class="main_top_navi"> 31 <ul class="top_navi_list"> 32 <li><a href="#">美容室Ash</a></li> 33 <li><a href="#">サロン検索</a></li> 34 <li><a href="#">横浜市エリア</a></li> 35 <li><a href="#"><span class="text_bold">Beesセンター北店</span></a></li> 36 </ul> 37 </div> 38 </div> 39 <div class="main_contents"> 40 <div class="slide_wrapper"> 41 <div class="slide_animation slide_animation_1"> 42 <img src="https://dl.dropboxusercontent.com/s/fmwmzopzqngf0c7/shop_img1.webp?dl=0"> 43 </div> 44 <div class="slide_animation slide_animation_2"> 45 <img src="https://dl.dropboxusercontent.com/s/ydb1ibzierytfc8/shop_img2.webp?dl=0"> 46 </div> 47 <div class="slide_animation slide_animation_3"> 48 <img src="https://dl.dropboxusercontent.com/s/pxhnp870hj56y8q/shop_img3.webp?dl=0"> 49 </div> 50 </div> 51 <div class="back_slide_wrapper"> 52 <div class="back_img back_animation"> 53 <img src="https://dl.dropboxusercontent.com/s/fmwmzopzqngf0c7/shop_img1.webp?dl=0"> 54 </div> 55 <div class="back_img back_animation"> 56 <img src="https://dl.dropboxusercontent.com/s/ydb1ibzierytfc8/shop_img2.webp?dl=0"> 57 </div> 58 <div class="back_img back_animation"> 59 <img src="https://dl.dropboxusercontent.com/s/pxhnp870hj56y8q/shop_img3.webp?dl=0"> 60 </div> 61 </div> 62 </div> 63</body> 64 65</html>

css

1.header_logo{ 2 margin:10px; 3 position:relative; 4 top:5px; 5 left:7px; 6} 7.display_flex{ 8 display:flex; 9} 10.header_menu_wrap{ 11 display:flex; 12 align-items:center; 13} 14 15.header_menu{ 16 display:flex; 17 padding:0; 18 height:55px; 19 width:75%; 20 21} 22.header_menu li + li{ 23 border-left:1px solid #DDDDDD; 24} 25.header_menu li { 26 height:55px; 27 width:16.666%; 28 /* margin:10px 0; 29 padding:0 34px; */ 30 list-style:none; 31 font-family:'Quicksand',sans-serif; 32 /* text-align:center; 33 padding:20px; */ 34} 35 36 37.header_menu li a{ 38 text-decoration:none; 39 color:#666; 40 font-size:15px; 41 font-weight:bold; 42 display:table-cell; 43 vertical-align:middle; 44 text-align:center; 45 height:55px; 46 width:16.666%; 47 48} 49.header_menu li a:hover{ 50 color: #999; 51} 52.header_menu_ruby{ 53 color:#999; 54 margin:0; 55 font-size:10px; 56 font-weight:400; 57 58} 59 60 61.yoyaku_box a{ 62 text-decoration:none; 63 background-color:#FF9999; 64 color:#fff; 65 padding:14px 45px; 66 position:relative; 67 display:block; 68 text-align:center; 69 70} 71.yoyaku_box a:before{ 72 content:""; 73 width:20px; 74 height:20px; 75 background-image:url(img/common_sprite.png); 76 position:absolute; 77 background-size:110px; 78 top:28%; 79 left:10%; 80} 81.yoyaku_box{ 82 width:18%; 83} 84.main_top_navi li{ 85 list-style:none; 86} 87.main_top_navi a{ 88 text-decoration:none; 89 cursor:pointer; 90} 91.top_navi_list{ 92 display:flex; 93 padding-left:20px; 94 padding-top:10px; 95 padding-bottom:28px; 96 background-color:#f5f5f5; 97 position:relative; 98} 99 100.top_navi_list li + li{ 101 margin-left:45px; 102} 103.top_navi_list li:after{ 104 content:url(img/bc_arrow.png); 105 position:absolute; 106 top:0; 107 width:17px; 108 height:51px; 109 margin-left:9px; 110} 111.top_navi_list li:last-child:after{ 112 content:none; 113} 114.top_navi_list li a { 115 position:relative; 116 top:8px; 117 color:#666; 118} 119.top_navi_list li { 120 font-size:12px; 121} 122.text_bold{ 123 font-weight:bold; 124} 125.slide_wrapper{ 126 width:1280px; 127 max-width:100%; 128 position:relative; 129 margin:0 auto; 130 131} 132.slide_animation{ 133 animation-name:slide; 134 animation-duration:8s; 135 animation-iteration-count:infinite; 136 opacity:1; 137 position:absolute; 138 139} 140@keyframes slide{ 141 0%{opacity:1;} 142 33.33333%{opacity:0;} 143 66.66666%{opacity:0;} 144 100%{opacity:1;} 145} 146.main_img{ 147 width:100%; 148} 149.slide_animation img{ 150 width:100%; 151 height:100%; 152} 153.slide_animation_1{ 154 animation-delay:0s; 155} 156.slide_animation_2{ 157 animation-delay:2.6s; 158 159} 160.slide_animation_3{ 161 animation-delay:5.2s; 162} 163.back_slide_wrapper{ 164 position:absolute; 165 width:100%; 166 height:100%; 167 z-index:-1; 168 top:170px; 169} 170.back_animation{ 171 position:absolute; 172 width:100%; 173 height:100%; 174} 175.back_animation img{ 176 width:100%; 177 height:100%; 178}

こちらの方にも、コードの方記載いたしました

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/11/14 08:13 編集

それぞれの画像のサイズをご提示していただけますか? pxか比率でお願いします。
newyee

2018/11/14 09:30

元の画像サイズで大丈夫でしょうか...?画像サイズは「slide_wrapper」内及び、「back_slide_wrapper」内の画像サイズは、「1300×867」です
macaron_xxx

2018/11/14 11:06

前の質問もそうですが、外部サイトだけでなく、こちらにもコードを貼り付けてくださいね。そうでないと、外部サイトが利用できなくなった時に意味がわからなくなります。
退会済みユーザー

退会済みユーザー

2018/11/14 12:03

同じ大きさでslide....とback....の高さを統一したいという解釈でよろしいでしょうか?
newyee

2018/11/14 12:12

横幅に関しましては、「back_slide_wrappe」の画像はブラウザいっぱいに広げ、slide_wrapper内の画像は、1280px固定で設定できたらなと考えています。しかし、高さに関しましては「back_slide_wrappe」を「slide_wrappe」に合わせる形で統一できたらなと思っております。
退会済みユーザー

退会済みユーザー

2018/11/14 13:09

多少画像の引き延ばしてよろしいのでしょうか?イメージしているイラスト等をご提示していただけるとありがたいです。ご足労おかけしますがよろしくお願いします。
macaron_xxx

2018/11/16 00:25

参考URLのどの部分の話をしているのか全くわかりません。あなたが今やりたいことを図示するなりして"明確に"示してください。何を実現したくて困っているのか私には全くわかりません。
newyee

2018/11/16 01:08

現在実現したいこととしましては、背景がぼやけていて、かつスライドアニメーションになっている部分を作成したいと考えております。その為に、まずは、「slide_wrapper」内の画像の後ろに「back_slide_wrapper」内の画像を設置する必要があると考え、今回の質問をさせていただきました。
macaron_xxx

2018/11/16 06:39

「背景がぼやけていて、かつスライドアニメーションになっている」これの意味が全く理解できません。
newyee

2018/11/17 10:28

とりあえずは、自分としましては、背景がぼやけている箇所を作っていきたいと考えています。
退会済みユーザー

退会済みユーザー

2018/11/17 14:26

ぼやけているのはbodyの背景画像をぼかしているということですか?ちょっと意味が理解できません。
newyee

2018/11/18 04:29

貼らせていただきました、URLの、デベロッパーツールにて確認したのですが、body部分のクラス「mvContainer」内のぼやけている部分を作っていきたいと考えております
newyee

2018/11/18 06:25

少し、質問したいことが、色々と混乱してしまっているため、質問したいことをまとめ、一度質問を立て直した方がよろしいでしょうか?
guest

回答3

0

あなたはまずpositionを使ったときの要素の高さについて、勉強すべきですね。

とりあえず、下記でいいです?

css

1.main_contents { 2 position: relative; 3} 4.main_contents::before { 5 content: ''; 6 display: block; 7 padding-top: calc(867 / 1300 * 100%); 8} 9.back_slide_wrapper{ 10 position:absolute; 11 top: 0; 12 left: 0; 13 width:100%; 14 height:100%; 15 z-index:-1; 16} 17.slide_wrapper{ 18 width:1280px; 19 max-width:100%; 20 height: 100%; 21 position:absolute; 22 margin:0 auto; 23 top: 0; 24 left: 0; 25}

投稿2018/11/19 00:57

macaron_xxx

総合スコア3191

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

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

newyee

2018/11/19 02:08

ご回答ありがとうございます。 ご回答頂いたのに気づかず、新たに質問を立て直してしまったのですが、一度ご回答頂いたコードに書き換えて、動作の方、確認したいと思います。
newyee

2018/11/19 02:38

ご回答頂いたコードを試させて頂いたのですが、高さの部分におきまして、「back_slide_wrapper」内の画像が少し伸びてしまっているように思えます... そして、「slide_wrapper」内の画像が中央にあった位置から、左寄せとなっていました...
macaron_xxx

2018/11/19 05:12

そのあたりは元のコードとはかけ離れている部分なので、やはりご自身で勉強していただかないと。
newyee

2018/11/19 09:54

コードとかけ離れている部分とはどの部分のことでしょうか...?
macaron_xxx

2018/11/20 01:28

back_slide_wrapperの高さをslide_wrapper内の画像の高さと同じにしつつ、幅は画面いっぱいとなると、画像の縦横比が変わります。 そのため、参考元サイトでは、imgではなく、background属性を使って、画像を切り取っているんです。 あなたはご自身の勉強のためにされていると思うのですが、まずはpositionの使い方を勉強しないことには、この問題を解決(提示されたコードを丸写し)したところで全く意味がありません。 また同じような問題に突き当たるでしょう。 問題は順番に解決(理解)していく必要があり、その上で、positionの勉強をまずはしてください。 とお伝えしています。
newyee

2018/11/20 02:22

正直な所としましては、「幅は画面いっぱいとなると、画像の縦横比が変わります。」ここの部分におきましてもどういうことなのか分からない状態です... 分かりました。positionについて調べてみたいとおもいます。
guest

0

ベストアンサー

うまく動くかな?

html

1<div class="slide"> 2 <div style="background-image:url(https://picsum.photos/g/300/200?image=0);"><img src="https://picsum.photos/g/300/200?image=0"></div> 3 <div style="background-image:url(https://picsum.photos/g/300/200?image=1);"><img src="https://picsum.photos/g/300/200?image=1"></div> 4 <div style="background-image:url(https://picsum.photos/g/300/200?image=2);"><img src="https://picsum.photos/g/300/200?image=2"></div> 5</div>

css

1* { 2 margin: 0; 3 padding: 0; 4} 5.slide{ 6 position: relative; 7} 8.slide>div { 9 background-repeat: no-repeat; 10 background-size: cover; 11 background-position: 50% 50%; 12 text-align: center; 13 overflow: hidden; 14 position: absolute; 15 z-index: 0; 16 width: 100%; 17} 18 19.slide>div::before { 20 content: ''; 21 background: inherit; 22 -webkit-filter: blur(5px); 23 -moz-filter: blur(5px); 24 -o-filter: blur(5px); 25 -ms-filter: blur(5px); 26 filter: blur(5px); 27 position: absolute; 28 top: -5px; 29 left: -5px; 30 right: -5px; 31 bottom: -5px; 32 z-index: -99; 33} 34@keyframes sampleslide { 35 0% { 36 opacity:0; 37 } 38 15% { 39 opacity:1; 40 } 41 33% { 42 opacity:1; 43 } 44 45% { 45 opacity:0; 46 } 47 100% { 48 opacity:0; 49 } 50} 51.slide > div{ 52 animation:sampleslide 9s 0s infinite; 53} 54.slide > div:nth-of-type(1){ 55 -moz-animation-delay:0s; 56 -webkit-animation-delay:0s; 57 animation-delay:0s; 58} 59.slide > div:nth-of-type(2){ 60 -moz-animation-delay:3s; 61 -webkit-animation-delay:3s; 62 animation-delay:3s; 63 } 64.slide > div:nth-of-type(3) { 65 -moz-animation-delay:6s; 66 -webkit-animation-delay:6s; 67 animation-delay:6s; 68}

高さとかの関係でちょっとレイアウトがズレるかもですがやりたいことはこういうことでしょうか?

投稿2018/11/26 02:03

dit.

総合スコア3235

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

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

newyee

2018/11/26 10:15

ご丁寧にご回答いただきありがとうございます。 まさに、自分が実現したいことが、詰め込まれたコードです... 実は、高さの設定にこだわっていては先へ進まないと思い、高さは、「px」で設定することとしました。 そして、ぼかしを入れる為に、filter:blur(5px)としたのですが、画像の淵までぼやけてしまった為、画像の親要素に、overflow:hiddenを設定しました。overflow:hiddenを設定したため、ぼかしは消えたのですが、どうも、淵の部分で違和感を感じたため、そこにつきまして、お力をおかし頂きたく、新たに、質問を立てようとしていいる所でした。
newyee

2018/11/26 10:21

色々、ぼかす部分につきましても、調べたのですが、ご回答下さったコードにも記載があるのですが、filter:blurでぼかしをつけた分だけ、ネガティブマージンを~との説明があるサイトなどを見たのですが、正直意味が分からなかったんですよね... なので、取り敢えず、filterをかけた親要素に、「overflow:hidden」を設定したら、淵の部分はぼやけなくなったので、良いかなと思っていたのですが、もしかしたら、ネガティブマージンが~の部分をやっていないので、なにか違和感を感じるのかなと思っているんですよね...
newyee

2018/11/26 10:27

正直なところとしましては、ぼかしを入れた部分である、「back_animation」に疑似要素をつけ、背景画像を設定するなどして、やってみようかなと、思ったのですが、スライドアニメーションを設定していたため、全て、うまくかみ合わせることは、今の自分では難しいと思い、断念したんですよね...
newyee

2018/11/26 10:33

長々とすみません。 ぼかしの部分とは、また違うのですが、ご回答頂いたコードでお聞きしたい点がございます。 「@keyframes sampleslide」内にて、0%の時点でopacityが「0」になっているのですが、ご回答頂いたコードを実行した際には、最初から画像は透明ではありませんでした。それは何故なのでしょうか...?
dit.

2018/11/26 12:28

あ、何度かテストしながらのコードなので修正しきれてない部分があるかもです。(opacityを@keyframesの中だけじゃなく.slide>divあたりにも指定する必要があったかも?今テストのコードいじれないので違ってたらすみません) 明日時間に余裕があればもうちょっとちゃんと返信します。
newyee

2018/11/26 12:57

ご返信ありがとうございます。 いえいえ... すみません。 よろしくお願いします。
dit.

2018/11/27 07:56

回答は「ぼかした背景とその中身をスライドする」だけのコードなので前後にコンテンツを入れるだけでも多分レイアウトがずれたりします。 とりあえず、質問に提示のコード&模写元のコードと私の回答のコードの大きな違いは「divをまとめてしまっている」ことなので、.slide > divに対して高さを指定していません。 中のコンテンツの高さに合わせて背景の高さも変わっているため、もともとの疑問の「どう高さを合わせたらいいか」についての解決にはなっていないかもしれません。 また、レスポンシブ対応も全く視野に入れていないのでこの辺りもきちんと調整しないといけない部分ですね。 もう一つ、blur(というかfilter)はIE非対応だったと思うのでこれの対処も必要かも。 というわけで、「こう書けば似たようなことはできるんだな」くらいに捉えていただいたほうがいいかと思います。
newyee

2018/11/27 08:39

分かりました。そのようなことも可能なんだなと思い、先に進んでいくというのも必要ですよね。 ご丁寧にご回答下さりありがとうございました。
guest

0

「back_slide_wrapper」と「slide_wrapper」がどう合わせたいかが想像できませんが、スライドを作りたいだけならJavaScriptでやってしまえばよいのでは。

【レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.|神戸にあるウェブ制作会社】
https://www.willstyle.co.jp/blog/724/

【Swiper - Most Modern Mobile Touch Slider】
https://idangero.us/swiper/

投稿2018/11/20 04:06

kei344

総合スコア69364

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

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

newyee

2018/11/20 12:18

ご回答ありがとうございます。 実は、javascriptに関しましては、まだ全然勉強不足でして、CSSのみで、できないものかなと考えていたんですよね。自分としましては、「slide_wrapper」内の画像にスライドを適用することが可能だったため、「back_slide_wrapper」内の画像を「slide_wrapper」内の後ろに配置するだけの単純な作業だと思っていたのですが、高さが合わなかった為、そこでつまづいてしまったんですよね...
kei344

2018/11/20 17:37

.main_contents以下だけで、スライドせずに、やりたいことを提示されてはいかがでしょう。いまだにどう重ねるつもりかがわかりません。
newyee

2018/11/21 05:20

現在、「slide_wrapper」内の画像が「back_slide_wrapper」内の画像に被さっている状態なのはお分かりいただけていますでしょうか?
kei344

2018/11/21 05:23

現状のスクリーンショットと、完成形のイメージ図を提示してください。
newyee

2018/11/21 06:03

codepenの方で、コードをアップしているので、そちらから確認して貰うことは可能でしょうか?
kei344

2018/11/21 06:04

teratailでは画像もアップできますので、そちらを使用されてはいかがでしょうか。(画像として質問文に表示されますし)
newyee

2018/11/21 06:36

重なっている部分の画像の方、追記しました。
kei344

2018/11/21 07:09

そもそも重ねると背景側は見えなくなりますが、何のために重ねているのでしょうか。 また、画像の全部同じ縦横比ですか?
newyee

2018/11/21 07:33

3枚の画像の縦横比は同じになります 背景側は見えなくなるのですが、幅をブラウザいっぱいにするため、「slide_wrapper」の幅よりも広がるため、両サイドから、背景側の画像が少し見えるようなレイアウトにしたいと考えています。
kei344

2018/11/21 08:12

> 両サイドから、背景側の画像が少し見えるようなレイアウトにしたいと考えています。 3枚の画像が順番に中央前面に画像が来るようなスライダーを目指しているなら、いったんあきらめてください。現在のCSS熟練度で処理できる物ではありません。 画像部分をレスポンシブ対応をしたJavaScriptで完結させるのがお勧めです。 単純に左右に画像がおければよいのであれば、.slide_wrapperの中に背景用の画像をおいて、position:absolute;で左右において、画像にwidth:1280px;を指定すれば並びます。
newyee

2018/11/21 08:51 編集

自分の理解力が不足していると思うのですが、「3枚の画像が順番に中央前面に画像が来るようなスライダーを目指している」説明下さいました、ここの部分が分からないのですが、現在は「slide_wrapper」内の画像におきまして、3枚の画像を中央に配置し、スライドアニメーションを起こすことができています。 ですので、自分としましては、「back_slide_wrapper」内の画像にも同じようにできると考えているのですが、一点、「back_slide_wrapper」内の画像を、「slide_wrapper」の後ろに配置する際に、幅と高さの調節がうまくいかなかった為、そこを調節できたらなと考えています
kei344

2018/11/21 08:58

> 単純に左右に画像がおければよいのであれば、.slide_wrapperの中に背景用の画像をおいて、position:absolute;で左右において、画像にwidth:1280px;を指定すれば並びます。 読んでいますか?画像の高さを保って左右にあればいいなら、こうすればよいです。 重ねる必要はありません。
newyee

2018/11/21 09:06

自分としましては、「back_slide_wrapper」内の画像にぼかしを入れ、「back_slide_wrapper」内の画像にもスライドアニメーションを適用しようと考えており、その最初の段階として、「slide_wrapper」内の画像の後ろに「back_slide_wrapper」内の画像を配置しようとの考えていました。 ですので、「back_slide_wrapper」内の画像も配置するだけでなく、スライドさせる前提での配置を考えています。
kei344

2018/11/21 10:22

> 単純に左右に画像がおければよいのであれば、.slide_wrapperの中に背景用の画像をおいて、position:absolute;で左右において、画像にwidth:1280px;を指定すれば並びます。 試す気は無いようですが、画像の高さを保って左右にあればいいなら、こうすればよいです。フェードで切り替えするのも同じことです。 伝える手段を思いつかないので、あきらめますね。
newyee

2018/11/21 10:42

僕自身、うまく理解できていない部分はあるのかもしれませんが、意思疎通がうまくできていないと感じております。 >.slide_wrapperの中に背景用の画像をおいて、position:absolute;で左右において ここに関しましても、どのようにすれば良いかが具体的に分かりません。
macaron_xxx

2018/11/26 00:23

>ここに関しましても、どのようにすれば良いかが具体的に分かりません。 つまりまだあなたは勉強が足りないということです。 知識レベルと実現したいことのレベルに乖離があります。 もっと基礎から学習しましょう。
newyee

2018/11/26 11:10

基礎は一通り勉強しました。 今回のpositionプロパティのことに関しましては、意思疎通がうまくできていなかったことが原因だと思っています。僕自身、言いたいことをうまく伝えられなかったと思っていますし。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問