勉強日数20日を目前にした今日、本気で参りました。昨日疲れた状態で無理に進めなくて本当に良かった。背景に関する動画「7-2 背景の指定の応用」と「7-3 背景を操る」を見たのですが、「7-2」が大欠陥を抱えてまして。
まずは下の画像、「7−2」の動画通りにした結果をご覧下さい。
真っ白。わざわざスクショ撮らずに「真っ白」って書けばいいじゃん、と思うぐらい真っ白。何がしたかったのかというと、ブラウザに背景画像を表示させたかったんですね。でも真っ白。なんなら背景色も適用されてない。前にもあった「動画通りにコード書いてるのに動画通りに表示されない」現象がまた発生してしまいました。
ここからコードが合っているか確認し、何がいけないのか突き止めなきゃいけないのですが、「初めて習った（つまりまだよく理解していない）ことで起きた問題を自力で解決」って、初心者にとって死ぬほどストレスなんですよね。検索すればサクッと解決策出てくるんですけど、でも考えたんですよ。きっとこういうことはジャンジャカ起こるだろうし、そうなったときに自力で解決できるようにならないとキツイだろうから、今のうちにその力をつけておこうと。その結果、
・boxのサイズを指定していない
のが原因だろうと。今はこうやって落ち着いて言語化できていますけど、実際の私の頭の中、よくわからないことを解決しなきゃいけないストレスでぐっちゃぐっちゃでした。
んでサイズを指定した結果がこちら。
動画とはサイズも位置も違ってるけどどうでもいい。表示すりゃいいんだよ（多分一番いけない考え方）。
んで検索したら出てきましたよ、この動画を公開しているテックアカデミーさんの記事が。
この記事に複数回出てくる文章がこちら。
空の要素なので、高さの定義が必要です。
うん、おかげ様で（嫌というほど）知ってる。
ま〜でも？プラスに考えれば？こうやってつまずいたおかげで「サイズ指定が必要」って頭に叩き込まれたし？もうさすがに忘れないと思うから？そこは感謝できるっていうか？
って思えたんですよ。まだこのときは。
最大の問題はスクロールしたときの背景の表示のさせ方について。まずは動画の一部分をお見せします。
動画通りにコードを書くとこう表示されるらしいんですけどね。
汚い（率直な感想）。
んでこの動画だと、CSSのファイルを二つ参照することになってるんですけど、そのうちの一つ「style.css」のコードが一度も表示されないんですよね。今は「style.css」にサイズとかスクロールに関することが指定されていたって冷静に考えられるんですけど、さっきのトラブルで余裕ないところにコレですよ。「メロスは激怒した」なんてかわいく思えるぐらいの気持ちでパソコンを放り投げたくなりました。そもそも何で別ファイルにしたんだし。何で肝心のCSSコード見せないんだし。
問題は「どうやったらスクロール表示させられるのか」ですが、キレイサッパリ忘れてましてですね。以下の記事に助けられました。ホントありがとうございます。「overflow」完っ全に忘れてた。
で、次は「7-3 背景を操る」ですね。操れるかヴォケ。
「cover」と「contain」の違いが全くといっていいほどわからなかったので検索。さっさと検索。以下の記事がわかりやすかったです。アニメーション最高。ありがとうございます。
とりあえず背景画像を全体に表示させたいときは「cover」って覚えました（雑）。
動画見ながらこんなん作りましたけど、もうできる気しない。
CSSの動画はあと3本。「角丸をつける」とか「影をつける」とかなので、まぁ今回みたいなトラブルは起きないでしょう（超希望的観測）。問題はいろいろありますが、勉強を始めた頃のように「楽しい」と思うことがここ最近なくなってきてる、というのが一番の問題だと感じています。正直な気持ちをいうと「この動画でこれ以上勉強するのは嫌だなぁ」と。
テックアカデミーさんの名誉のために書いておきたいのですが、今までのトラブルと学んだことを秤にかければ学びの方が大きいです。それは間違いないです。なんせ無料ですしね。無料の動画に文句つけるのもどうなんだ、と自分でも思います。ところどころ嫌みっぽい書き方になっているのは「まだ理解していないことをノーヒントで解決しなきゃいけないストレスが尋常でない」ことを書きとめておくためで、わざと感情のままに書いています。私の「わからない」に対する耐性の低さもあります。
「プログラミングの勉強が嫌になってきた。また楽しく勉強したい」の解決策としては、CSSの動画を最後まで見終えた後、HTMLのときのように復習はせず、他の動画か学習サイトで学び直すかするのがベストかなと思っています。まだ方法は決まっていませんが、自分が快適に、楽しく続けられる方法を見つけます。
