勉強頑張ってます！！！

f:id:akemi_12mg:20190512210423j:plain

今日の学習の過程の画像。

ブログではあんまり触れていないけど、実はウェブデザインの勉強はちらほらやってるんだな。学びサイトの再構築に向けて今日は遂にレスポンシブデザインについて学んだのだ。

やったお！！！

あれほど恐れていたレスポンシブデザインの学習であったが、案外さららんと修了しちまったぜ！　要するに@mediaで指定した(max-width: 〇〇px)とか(min-width: 〇〇px)の幅によってそれぞれのwidthの％をいじっていけばいいってことだった！！！

プロゲートで習った範囲では、な？

プロゲートでの復習を繰り返していたからか、学びサイトで立てた予定からは1か月遅くなったけど、やっとこさエビスコムのデザインブックの内容を学習し始めた。

この本。

この本ではプロゲートで習った、指定したwidthに合わせて％を変えるという基本にプラスして、PCで見る際のwidthからスマホで見る際のwidthに変更されたときの各種BOXの動き方についても解説してあって、留意する点が分かりやすい。

ひんじょ～～～～にわかりやすい。

ちなみに備忘録としてまとめておくが、留意する点って言うのは、スマホサイズで縦のBOX並びから、PCサイズで横のBOX並びになった際に、任意のBOXが中央に来るためのfloatの組み方とかそんなん。

今日アイキャッチにしている画像は、まさにその学習を実践テストしていた時のもの。3カラムの構成でboxA内のBOX2～4のfloatをすべてleftにしていたらPCサイズでは一番左に表示される筈のBOX2を、中央に表示するための方法を試していた。

boxA内で更にBOX2と3をひとくくりのboxBとして、BOX2のfloatをrightにし、boxBとBOX4を並べるというやり方で、BOX2を中央に置くことに成功しているわけだ。

こういうのって、実際ぶち当たると結構頭を悩ませそうだから、やり方を丁寧にわかりやすく解説してくれて私ちゃんは大変助かるのだ。

頭の中にあるものを組み立てるのも大変だけど、それをサイトという形でアウトプットするのはきっともっと大変だから、その方法に関する知識はどんどん深めて引き出しを多くしていきたいのだ。

わかりやすいとはいっても、いきなりエビスコムに入っていたらもっと理解するのに苦労していたと思うから、プロゲートをやっておいてよかったなぁって思う本当に。

デザイン関係の誰かの言葉で、「デザインセンスは知識量で決まる」というものがあった。結構自分の中では革新的な言葉だったのでよく覚えているぞよ。

センスは知識を増やして見識を広げれば磨いて行けると信じて、学びサイトの再構築に向けてまた頑張っていこうと思う～。

努力が実を結ぶように。

ていうか今ある学びサイトは右も左もわからない中で作ってたんだなぁって今になると思う。いやぁ、勉強始めて1か月少々の右も左もわかってなかった頃の割にはよく作ったなぁって自画自賛もしてみたり。

プロゲートやデザインブックのお陰で、サイト作りがすこーし明るくなって見えるようになってきた。ありがてぇだ、先人の知識と、彼さんのご指導ご鞭撻、非常にありがてぇだ……。

明日からも時間見つけてちょこちょこ見識を深めていきたいな！！！

やったるで！！！

読んでくださりありがとうございました。

優しさ12mg