oshushichangのブログ

プログラマになるため、勉強した内容を日報として家庭用esaに記録し、旦那からFBを貰っている日々を綴っています。

0702日報

日報

やったこと

やったこと ないよう さんこう
CSSの基本を理解する CSSだけで三角形を作ろう! CSSだけで三角形を作ろう!その2:吹き出しやリボンをデザインする | 株式会社グランフェアズ
Flexbox CSS3のFlexboxを基本から理解して、使い倒そう! | 東京上野のWeb制作会社LIG
Flexbox flexboxfroggy Flexbox Froggy - CSS flexbox学習ゲーム

こまったこと・わかったこと

参考サイトに表示されているものを同じものが作れない

f:id:oshushichang:20180712181849p:plain

Flexbox

  • display: flex; がはじめのいっぽ!
  • flexboxコンテナ で指定できるプロパティ
    • flex-direction : 子要素の配置する方向
    • justify-content : 水平方向の揃え方
    • align-items : 垂直方向の揃え方
    • flex-wrap : 子要素の折返し
    • flex-flow : flex-directionflex-wrap をまとめる
    • align-content : 行の揃え方

Flexbox の order の考え方がわからない

  • flexboxfroggy の Lv.17 でつまづいた。黄色い :frog: を右側にどうやって連れて行くのか...そもそも :frog: たち各々が order の何番なんだろう?と思い、いったいなんぼをいれたら黄色い :frog: が右にいくのかわからなかった。
    • 何も書いていないなら、全ての要素は0かな?1と仮定して0 より大きい値を入れたら黄色が右側にいったので :ok_woman:

ひとこと

  • 昨日から悩んでいたことが自分で解決できて嬉しいしスッキリしたが、わからないことをどのくらいの時間をかけて一人で考えるかは決めておいたほうがいいのかなあと思った。成功体験ウレシーと、それにかかる・かかった時間の天秤のかけかたがむずかしい。
  • 結局、三角形を作ろうのパターンBもうまくできず...モチベーションが下がりそうなので、今日は続きのステップの flexbox に進み、明日以降に再度三角形を作ろうを行うことにする。写経もろくにできなくてかなしい :sob:

旦那より

昨日から悩んでいたことが自分で解決できて嬉しいしスッキリしたが、わからないことをどのくらいの時間をかけて一人で考えるかは決めておいたほうがいいのかなあと思った。成功体験ウレシーと、それにかかる・かかった時間の天秤のかけかたがむずかしい。

バランスむずかしいよね。

今日のまとめ

  • 本当にバランスが難しい!人に聞けば答えは出るけれど、自分で探して出てきて正解だったときの成功体験も、間違ってたときの失敗体験も、どっちも記憶に残るから経験になると思いつつ。それでも無限に時間をかけていいわけじゃないし、難しい。

  1. 家に帰って flexboxfroggy をやり直してみたところLv.14 に書いてあった…!