完成に近づいたアプリの画面に背景画像を入れようと思ったんですがうまく行かず、試行錯誤してもダメだったので経緯を説明し教わることに。
ぐぐったのはassetとなっていて<%とかも使ってたのですが教えてもらったのはbackground-image: url(“/assets/ファイル名.jpg”);でした
まさか説明してるページが違うとは流石に考えず確認を怠ってしまいました
それで一応表示されることはされたんですがレイアウトが崩れてしまい、こっからなかなか上手くいかず1日中やってました
画像を横幅いっぱいにしたいと考えていたのでbackground-size:cover等を使ってみたんですが全部ダメで、一番最初の開発環境で丸2日かかった時と同じで
長時間エラーを探してるうちに間違えて消したり書いたりで何をやっているのか分からなくなるっていう初心者あるあるループへ・・・
最初は直感的にここらに画像当てるんだろなーと思う所が1回やってうまく行かなかったので敢えて極端に一番上にしたり、一番下にしたりしてどこで表示がおかしくなってるのか見てたりしました
この間にどこを消したのかどこに書いたのか分からなくなるんで、注意が必要ですね。まぁ結局分からずでコードが崩れただけでしたが。
1人で何とかしないといけないとは思いつつ、数時間経過してしまった為、また聞いてみる事に。
こう考えて、こういう事をやったんですが何故反映されないのでしょう？みたいに聞いてみました
で写真を送って欲しいという事になって、送ったみたのですが、すぐに原因は分からず。ぶっちゃけ私の1時間と講師の方の1時間では価値が違うんですよね。それを分かりつつ聞くのはなかなかしんどかったです・・ｗ
で、まず分かったのがbootstrapを使っているとcontainerとクラス名をつけたものは決まった幅になるらしいです。
それで画像が途中で切れてるかんじになっていました
background-size:cover;が反映されてないと思ってのが実はbootstrapの中では反映していて仕様でその範囲だけになっていた模様
ここらで解決策が教えられていたんですがうまく理解できずでした
全体に背景を適応したいなら
全体をdviタグで囲い、もう1つのcontainerとは違うクラスをそのdivタグに書き、そのクラスで先ほどのcontainerに適応していたもの（img画像とcover）をコピペすれば適応される っていうのが分からなかったんですよね
私なりに要約すると囲って囲う。画像を外いっぱいにするってことは1つのクラスでmargin0にするってことなので、そのクラスをallとし、それとは別にイメージ的に必要なものを守るためのクラスcontainarで囲んだ形
containerという小さい四角があってその外に外壁いっぱいのallがある感じですね
やっとbootstrapの仕様回避しつつの全体画像表示でクラスが2つ必要なのか理解できました
最初はbody内で全体背景をあてるのにクラスは1つでいいとずっと思いこんでたので意味不明な事ばかりしてた気がします・・ｗ
講師さんには今のファイルを共有フォルダにいれてチェックしてもらったりしてました
最後は通話して画面見ながら対応します！と言ってくれたのですがその直後、原因が分かって解決したかんじでした
bootstrapの仕様内範囲ならすぐに出来ていたんですが、どうしても横いっぱいに表示したかったのと理解力の無さでむちゃくちゃ時間かかってしまいました
まさか画像入れるだけでこんなに時間かかるとは思いもしませんでしたね
ちなみに今やっている所に画像を入れる工程とか全くないので私のわがままに数時間付き合ってもらった感じです
まぁ今回だいぶ色々やったんでそこらの理解は深まった気がします！
bootstrapはクラス名などで範囲等あらかじめ定義されてるものがある
ぐぐって出てくるページも間違えてる可能性がある
タグの開始と終了位置を合せる（教える人に迷惑がかかる）
教えて貰って分からないと思った所をそのまま行くと更に分からなくなり思い込みで迷走する
