- Published on
Weekly Report 2021/05/03-05/09
今週の振り返り。
振り返り
続けたいこと
- 早寝早起き
- 朝勉強するのが向いていることが改めてわかってきた
- 久しぶりに SF の小説を読んだ
- 公私ともに、技術を深堀りする時間が取れたので満足感は高かった
- 連休明けで久しぶりに人と英語で話したり聞いたりしたけど、思ったより英語能力が劣化していなくてモチベーションが保てた
改善したいこと
- 目の疲れ
- 朝起きたときに目が乾燥？ピントが合わせにくい
- 目薬を買ってはみたけど...
- GW の kindle のセールでまた数冊積ん読が増えてしまったので 1 つずつ消化していく
その他トピック
入門 GUI
入門 GUI | 電子書籍とプリントオンデマンド（POD） | NextPublishing（ネクストパブリッシング）
スクラッチでなにか HTMLElement を作るときの考え方がわかった気がする。
Native アプリっぽい Web アプリどう作ってるんだろう？、が想像できるようになった。
CSS 理解した
MDN のドキュメントを一通り読んだ。細かい装飾はまた後で必要になったら読むが、レイアウト周りの考え方や書き方は理解できたので有益だった。
基礎はわかったので、実践としてBulmaの実装を読んでみた。
プライベートで作ってる Web アプリで Bulma を雰囲気で使っていて、簡単な記述でいい感じにデザインを整えてくれるのでどういう仕組や抽象化をしているのかが気になっていた。
https://github.com/jgthms/bulma/blob/4891c63/css/bulma.css
例えば、Columns
display: flex; にして、その子要素に.colmn.is-halfならwidth: 50%;、.colmn.is-one-fifthならwidth: 20%のように指定してレイアウトしている。
例えば、 Delete
<button class="delete is-small"></button>
<button class="delete"></button>
<button class="delete is-medium"></button>
<button class="delete is-large"></button>
bulma.css の.deleteで検索していくと該当箇所がわかるが、hover, focus, active の状態毎に色を変えたり、以下のように ✗（バツマーク）を表現しているのが面白かった。
バツマークを作るためには、.delete:before と.delete:after で疑似要素として、縦長と横長の四角をそれぞれ挿入している。
これを以下のようにオフセットを与えて十字にし、
transform: translateX(-50%) translateY(-50%);
さらに以下のように 45 度回転させてバツマークにする。
transform: rotate(45deg);
他にもメディアクエリの使い方など面白いものが多いので、CSS の理解を深めるために読みたい。