デイトラWeb制作 -Day30- [display:sticky]と、[flex-basis]を理解する。
大変久しぶりの投稿です。
前回投稿してから、出張やら山行やらあった上に、
・androidスマホ画面割れ（２回目）→ iPhone16Proへ移行、
・WindowsPC故障（マザーボードがアウト）→ Macbookへ移行
と、なんかいろいろありました。
少し前に家族が使わなくなって貰い受けたMacbookAir、アカウント設定していたので割とスムーズでしたが（こうなることを無意識に予測していたのか？）、まだキーボードに慣れていません。半角全角キー押したつもりで「1」とか「｀」って頻繁に誤字打ってます。
課題のデータも消えたので、自力で再作成中。
見本サイトの動作がずっと気になっていた「display: sticky」と、以前からわかっていなかった「flex-basis」でまた引っかかったので、記録しておきます。
◾️display: sticky;
お手本のサイトのサイドバー、メニュー固定なのに一番下までスクロールするとひょいっと上に動くのが、気になる。
header全体ではなく、中身のcontainerにdisplay:stickyを指定しています。
stickyを設定された要素は、通常の位置に配置され、その要素の位置がウインドウ全体を基準として、指定位置の条件を満たすとフロートされます。またその範囲はstickyを囲っている要素内に限られ、囲っている要素の端まで来るとそこで固定されます。そして、指定位置に配置されている間も通常位置に高さを有しています。
↑こちら、大変わかりやすいです。ありがとうございます。
囲っている要素の端まで来るとそこで固定
→つまり、囲っている要素が移動したらそれについていっちゃう。
スマートフォン画面用で、ハンバーガーメニューリストの入っている「header__contents」クラス に高さを指定していて、そのせいでサイドバーの高さが画面の高さを超えていることがわかりました。スクロールすると動くのはこれが原因。PC画面ではここの高さ指定を解除すれば、解決。
だけど、header全体に画面の高さを指定したほうがわかりやすいのではないかとも思ったので、自分の制作ではそっちにしました。
◾️flex-basis: ○%;
同じくサイドバーの、幅指定について。
はじめ、幅をwidthで％指定していたのですが、指定の幅にならない。flexアイテムの幅指定はflex-basisが優先されるようなので、flex-basisに修正。でもやっぱり指定幅になりません。
どうやらFlexの子要素にそれぞれ指定して、合計100％になるようにしないといけないようです。%ではなくてpxなど固定幅でも、片方だといい感じに（勝手に）調整されるようで、flexアイテム全部に指定した方が良さそうです。
(固定幅指定しないほうをflex-basis: auto;にすればいいとの記事もあったけど、これも指定しないのと同じ動作（初期値なので）。）
flex-basis: auto; の経歴が面白い
いろいろ迷って今に至る模様。
・もともと、flex-basis:auto は「自身の width または height プロパティを参照する」という意味でした。
・その後 flex-basis:auto の意味が自動拡大縮小設定に変わり、・・・（省略）
・auto が再び「自身の width または height プロパティを参照する」になり、自動拡大縮小設定を行うための content キーワードを新たに導入しました 。
あとがき
更新、久しぶりすぎました。
早く学習進めたい気持ちと、じっくり理解してから進めたい気持ちがあります。なんかもどかしい。
Macの設定変更もどんどんやりたくなっていくし、キーボードも打ち間違えすぎ。このページ書くだけで100回くらい「｀」打ってます。早く慣れたいです。