M1チップのMac Miniを母の実家に置いてきた

こんばんは。1月6日に九州に居場所を移しました。 デザインの話やリサーチの雑記をちょっと書いています。

・画面推移アニメーション

・段落タグをホバーでアニメーション

・ハンバーガーメニューが飛び出すアニメーション

・コードエディタなどの折り返し

・画面内に収まらない要素のページはmarginで間を取っています。

・画面内に収まる要素はセンターでスタイリングしています。

1@mixin CenString {
2  position: absolute;
3  inset: 0%;
4  margin: auto;
5  width: fit-content;
6  height: fit-content;
7}

Sassを書いていて上下センタリングや微調整が全然仕様に用意されていないことがわかると思います。

たいていflex使ったり無理やりtransformして中央に配置するんですがこのinset: 0%;でfit-contentを取る方法は斬新で正に求めていた数行で書ける簡単なわかりやすい、いいコードです。

このサイトで参考にしてるデザインのリサーチ先

appleとかメルカリとかgoogle yahoo amazon audibleなんか参考になります。

: Desney(みんな大好きディズニー) : 車のメーカー(かなり参考になる) : Nintendo : Sony

: オンラインゲームサイト

とにかく大手ほどイコールで閲覧されてる需要のあるコンテンツなのでGoogle Developers Tool で検証しまくっています。

このサイトのヘッダーはAppleのヘッダーマネしてます(そろそろ変えるか)

基本的にデザインと設計は引き算ベースで作った方がいいです。

あとインフェニティでループさせるアニメーションはスマホのバッテリーとか心配してしまいますがどうなんでしょうか。