2020-08-22 / 最終更新日 : 2020-08-22 Uchibaya-school うちばや学園

うちばや学園 – ６限目

皆さんこんにちは、Toudaijiです。
週刊連載『うちばや学園』では、我が家の自主的な学習の記録を掲載していきます。
新しく得た知識のアウトプットの場として、また学習のモチベーションアップのためとして活用していこうというのが目的です。
毎週きっちり、ほどほどに頑張りましょう！そして週末は自分にご褒美を！

今回のmamekariの学習記録……

1 mamekariの学習記録
2 Geee3の学習記録

mamekariの学習記録

日付	学習内容
8/14(金)	PROGATE Rubyレッスン2
8/15(土)	PROGATE Rubyレッスン2
8/16(日)	PROGATE Rubyレッスン３
8/17(月)	PROGATE Rubyレッスン３
8/18(火)	おやすみ
8/19(水)	おやすみ
8/20(木)	おやすみ

今週の振り返り

■盆休みあけてからの醜態

ぎっくり腰の動けない時は勉強がすすんだ。今週は動けるようになりちょっと遊びたくなってしまった。

遊びといっても梅田界隈の本やさん巡りとか、せいぜいお茶をするぐらいだけれど。

時間があまりにも細切れになるので勉強ができなかった。

■暑さのせいにしてはいけません

お盆休みも終わり仕事がはじまった。
電車内がすいていて珍しく座れる。PROGATE勉強しようと予定していたがこっくり眠ってしまった。

PROGATE　レッスン２があまりにも何度も何度も繰り返しても理解できず。
やっぱりメモにしっかりまとめて勉強する事にして、少し頭が整理できた。
理解できたように思い総合問題を解くがプログラムが書けない。
かなり考え込んでも正解にならない。全く理解できていない。
今回はカンニングして先に答えを見た。再度、解答欄を埋めた。

そうやって、とりあえず前に進む事にした。考えてもわからない物はわからない。
何度もみてパターン覚えるしかないかなと思った。

次はレッスン３にはいった。

入ったところで数日勉強を中断したのでまた振り出しに戻ってしまった。
やはり、こういうのは何時間が集中して時間をとって勉強しないといけない。

９８０円がむざむざと無駄になっていく。次週は時間を組んで取り組みたい。

■adobe　キャラクターアニメーターについて

キャラクターについては　月曜日から１週間は全く触れなかった。
こういった時はうちばや学園にUPするのが非常につらいのだが、これも記録として残しておきたい。

学習がとぎれないように、改善点をみつけて行きたいと思っている。
一定の学習リズムを維持できるように、自己管理をしていかないと次のステージにあがっていけない。

ありきたりだが手帳かメモにその日の目標を書いて、実行するようにしたい。

ところで今週のだらだら原因については、お出かけしたい病＆youtubeだらだら見＆今週は雑誌を買ったので見。
久しぶりの昼の勤務疲れなど、言い訳がたくさんあり。だらだらはあまり過ぎると健康と精神に悪い。

来週はどの部分で修正かけていけるか熟考したい。少しピリッとした時間を作りたいと考えている。

来週の予定

PROGATE　レッスン３を終了したい。けふのこうらぼしは２回分をUPしたい。
Adobe　キャラクターアニメーターの詳細設定をみて行きたい。
最近、お菓子作りなどもまた興味がもどってきている。たくさん盛り込むのは危険だが、程よく癒しも求めたい。
toudaijiさんがお菓子作りをしたいといっているので、レシピを選んでトライしてみたい。

その他の感想等

今週のうちばや学園は、珍しく　GEEE3が率先して記事をかいていた。家族の誰かが記事にしていって助け合うのである。
うちばや家が、うまく足並みをそろえる事ができればいいのだが、どこかの車輪が回転不足だとぐるぐる回ってしまうので難しい。
しかし、そのぐるぐるも　うちばや家の特徴でもあるのでしかたないね。

新しいサイトのアイデアを少しづつ進めています。

Geee3の学習記録

日付	学習内容
8/14(金)	うちばや学園の記事作成と検証
8/15(土)	おやすみ
8/16(日)	CSSレイアウトについてのおさらい
8/17(月)	CSSレイアウトについてのおさらい [FlexboxとGridを使ったサイドメニュー作成の違いの学習]
8/18(火)	CSSについて参考図書で学習
8/19(水)	サイドバーのメニューについて調べる
8/20(木)	おやすみ

今週の振り返り

調べものと検証用データの作成が主な作業でした。

CSS設計について。
CSSの命名ルールと記述に関してはいくつかの方法があり、それぞれの方法に沿って記述していくことで、ソースコードの視認性や管理がしやすくなるということがわかりました。
こういう管理に関することはCSSのリファレンスだけを読んでいても理解しにくい部分ではないでしょうか。

また、導入のための環境構築などにすこしハードルがありますが、Sass (サス: Syntactically Awesome Style Sheets) と呼ばれるCSSを拡張した言語を使うことで、効率的な記述をすることが出来るというのも新しい発見でした。

来週の予定

検証用データの作成のところで少し足踏み状態になっています。アコーディオンメニューの実装のしかたも、CSSやJavascript、jQueryなどいろいろな方法があり調べるのに時間がかかりました。
アコーディオンメニューひとつとってもサイトのコンセプトによってデザインや実装の方法も色々あり、まずはどんなサイトにするのかというコンセプトをしっかり持っておかないとデザインの見栄えだけで探し回ることになるので注意したいところだと思いました。
来週は検証用データの作成と実装の仕方をテストして、来週こそは表示方法などをいろいろ試しながらうちばや家のみんなに意見を出してもらう予定です。まだまだ項目の分類など悩むところはあるのですがね。

その他の感想等

今回は、CSSレイアウトについてざっとおさらいをしました。
ぼくがHTMLを知ってホームページの作り方などを調べはじめたころはMacromedia社から発売されていたFireworksでレイアウトを作るという作業の流れがありました。FireworksはPhotoshopとIllustratorの両方あわせたような機能を持っているアプリケーションでした。

Fireworksでベージ全体の要素を作って、ブロックごとにスライスの指定をして書き出すとtableタグでガチガチに組んだhtmlファイルが生成されるのでした。それを元にしてhtmlのタグを調整したり、CSSなどを適用してデザインを完成させるという作業の流れがあってぼくもそういう風にしてホームページを作った覚えがあります。
その後、MacromediaはAdobeに買収されて、Fireworksもいまはアップデートされなくなってしまいました。
アニメーション作成のFlashやサイト管理などもできる多機能なwebエディターのDreamweaverも元は同じくMacromediaの製品なのですが、知っている人はマニアかベテランの方だと思います。

Webページ全体のレイアウトのコーディングを調べていて、ページのレイアウト作成方法が時代とともに変化していく技術を面白く感じました。
ぼくが最初にホームページを作った頃は、ページ全体のレイアウトを作るときは、大きなTableで囲んでその中に細かくtableを入れ子にして作り込むというような作り方をしていました。
うちばや家のmamekariさんがHTMLを勉強したときは、CSSを使ってFloatでレイアウトを組む方法を、AtaliのときはFlexboxとかGridを習ったそうです。今回、調べたときに知ったのはGrid レイアウトを使ったページ全体のレイアウト方法で、ほんとうに簡単そうにレイアウトが組み上げられそうで驚きました。

調べているときに参考になった動画です。
発信されているい「しまぶー」さんは初心者からドットインストールでプログラミングを学習をしてプログラマーになられた方で、HTML/CSSやほかにもJavascriptの入門講座などがあり、自分の体験をもとに初心者にもわかりやすくて詳しく説明されていておすすめです。

しまぶーのIT大学

【HTML/CSSレイアウト】聖杯レイアウトのコーディング実践、デザイン解説【ヤフー出身エンジニアの初心者向けプログラミング講座】

【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】

WebやIT関連の技術は少し離れているとどんどんと日々進化していて、この中で現役で活躍する人は常に新しい技術に触れられるということが楽しめるときはよいと思うのですが、現実の仕事とのギャップを感じたときに自分の中での腑に落ちる方法が必要になってくるじゃないでしょうか。

追いかけるだけだとぼくなんかは疲弊してしまいそうで、新しい技術が常に生まれてくるという業界とか環境もなかなかに大変だなぁと感じました。

Follow me!

@uchibaya_Info