そういや勉強ってしんどかったな
こんにちは。理解しているようでしていない感がもどかしいかえちです。
学生時代を思い出しますね。
私は理数が不得意で、特に化学はどうやっても理解できませんでした。テスト前日に人生初の徹夜を経験したのですが、結果から言うと30点でした。無駄すぎる徹夜。もはや潔く寝た方が賢いですね。
徹夜中も理解しているという手応えがなく苦痛な時間が過ぎていく…
まさに今そんな感じです。
でもProgateしている時もそうでしたが、実践していくうちにわからないところぶち当たりながら、調べて試して理解していくんです。
その経験があるから今なんとかなると思って流し読みしています！！！皆さんもまだ諦めないでね。
レイアウトとか学ぶ
世の中のWebサイトを例にレイアウトを学びました。カラム数が１つだとこうで、２つだとこうだ。といった感じです。
今はカラム１つのものが多く使われる傾向にあるようです。情報が多いyahooのサイトなどは３カラムです。
世の素敵なWebサイトを見て夢が広がりました。こんなサイト作れたらいいな〜。頑張るぞ。
カラムを作る方法
今はflexboxを使うことが主流で、少し前まではfloatだった様子。コードの書き方にも流行りとかがあるんですね。１カラムの時は、flex-direction: column; を使います。２カラムの時は、flex-direction: row; 。「:２column;」にしてよ〜と思いました。
方向を指定するプロパティも勉強しました。正直苦手です。親要素に指定するのか小要素なのかなどがわからなくて…。
縦方向、横方向の揃え方などのプロパティ、justify-contentやalign-itemsがあります。
両方flexアイテムに対して指定するようです。display:flexでflexアイテムにして、上記のプロパティで揃えていくということですかね。
指定方法もいろいろあるので、その都度調べて使う必要がありそうです。
ここで一番わからなかったポイント！それは calc()。CSSのプロパティ値に式を指定できます。単位の違う数同士の計算も行えるので、便利そうではあるのですが。
何をいつ計算するの（したくない）
理数が苦手でどうも使う予感がしない（その発想に至らない）かえちでした。
実際にコードを書いていく
いよいよHTMLやCSSも実際に書いていきます。「まずは見本通りに書いてね」といった感じですが。
headとbody があって、head には設定を、bodyには実際にサイトに表示される部分を書いていくことを学びます。bodyにはさらに header main footerがある。
意外と知らなかったのが、<!– –> の非表示コメントで、「ここからこの部分を書いているよ」といったメモを書くものなんですね。
確かにそれがあるかないかでは、パッと見たときにわかりやすさが天と地の差です。CSSでも同じようにコメントで詳細を書いていました。これは取り入れていきたいです。
head部分のCSSやFont Awesome、Google fontなどの読み込みをしていきます。後々出てきますが、jQueryやカルーセルといったプラグインも読み込むんですよね。そういうものだと思った方が早いですここは。
CSS複数個所で使い回す指定
今まで１箇所ずつ律儀に指定してきたのですが、なんと共通部分はまとめて指定できるようです。それもそうか。なんてめんどくさいことをしていたんだ。
どこまでを共通部分として指定するかや、どの部分を共通にしたか忘れちゃいそうです。まあ下に書いたものが優先されるからいいのか、知らんけど。
それを元にフォントサイズとか字間とかを「rem」などの相対的な単位で表せるようになるから絶対必要だと感じました。
アイコンと文字が綺麗に横に並ばない問題勃発
課題で「サンプルコードを自分用に置き換えろ」というのがありまして、自分のスキルを書く部分がありました。そのスキルに合うアイコンをFont Awesomeから探して『（アイコン）（スキル名）』のように書くのです。
スキルなんもないので、無難に「communication」にしたのですが、長すぎてボックスからはみ出ちゃいました。そこでピンときた私は自信満々に文字を小さくしたのですが
なんか下にいっちゃった…(^_^;) 左のように横に並ばせたいのに〜！
わからなかったのでスクールのサービスを使って質問してきました。
個人の質問チャンネルがあって、それにメンターさんがざっと20人くらい入っていて待機してくれてるんです。すごいですよね。見張られている感じがして少し怖いけど。
すると、もっと文字を小さくするように言われました！なーんだ！
次は上にいっちゃったんですけど(^^;;
「結論、課題には合格できるからそのままでもいい」とか言われる。モヤるだろうがよう。
どうしても気になるならアイコンをpaddingを０にするよに言われ、、、
無事解決！！！
もともとアイコンと揃えるために、文字の方にpaddingが指定されており、文字が小さくなったからpaddingを指定する必要がなくなったとのこと。アイコンと文字が横並びしたものの、少し上にいたままだったので、２つまとめてpaddingで下に下げていい感じになりました。
メンターさんすげえ。
わからないから「合格できるからそのままでよし」って言われたと思ってすみませんでした。
そんなこんなで、この課題はうっかりミスでなんと再提出にはなりましたが、のちに合格して事なきを得ました。
今後の目標とか
わからないところは今回のように聞いて解決していこうと思いました。
独学と違うところはやはり
質問できる人がいるところ！！！
しかもちゃんとお金払っているから遠慮なく聞けるのがいいですね。それでももう少し自分で調べてから聞けよとか思われそうで、聞く前にめっちゃ調べるのですが。
あとは、早く自分でコード書いてコツを掴みたいです。見本見ているだけではピンとこない部分がたくさんあるので。
漫画見ない！仕事帰ったら風呂早く入って勉強する！頑張れ私！！！
コメント