5月5日 -isaraの模写を進める-

１．今日の目標

isaraの模写、「運営メンバー」、「実現可能です」の三角形を色んなパターンで作れるようにする、「isara」で学べる内容、あたりまで進めていきたい。

２．結果・感想

「運営メンバー」のセクションは2時間で終了した。一昨日のブログのリンクに貼った「仕事を任せられるエンジニアになるために意識してほしいこと」という記事の中で、作業の見積もり、あるいは作業のそれぞれのタスクがどれくらいで終わるかの予想が立てられるようになってほしいという言葉があった。今はまだプログラミング関係の勉強を始めたばかりで、時間管理もへったくれもない状態だ。でも今後、仕事として取り組んでいくならばやはり、自分がどれくらいの時間で終わらせられる作業なのかを把握できるようになっておきたい。可能な限り時間を測って作業していきたいと思う。同じような作業をして、前回より時間が短縮できるのか、あるいはどうやったら今より短縮できるのかなども考えられる時に考えていきたいと思う。自分で考えるだけでなく、先輩たちの意見に耳を傾けて効率よく学んでいきたい。やっぱりメンターって大事なんだろうな。求められる知識量が多いし、必要な知識、必要でない知識も分からないから非効率的に全てを学ぼうとしている現在。

「isaraで学べる内容」のセクション1時間40分で終了。vertical-alignで上中下に揃えられるという部分を知らなくてrelative,absolute使って無理やり動かそうとしたけど、結果的にこんな簡単に揃えられてよかった。relative,absoluteで無理やり動かしたサイトってきっと保守性低いんだろうなぁ。

３．学んだことの書き出し

border-radiusはimgタグを囲ってるdivタグではなく、imgタグに直接指定する

display:inline-blockで横並びにしたdivをｘ個ごとに並べるには並べたい個数分divタグで囲う。でもそれを小さいディスプレイにした時にwidthを50%より大きくした場合の動作は未確認。場合によってはディスプレイがX以下ならdivサイズ変更するとか設定しないといけない可能性あり。

display:inline-blockで横並びにした際に下に図形がずれた場合はvertical-align:top;で上に揃える。中央に揃えたければmiddle;

４．明日の課題

 isaraの模写を進める

５．参考URL

横並びの要素を上揃えにする方法

 https://macoblog.com/display_align_top/