position: fixed;を上手に飼う方法

Transcript

1. position: fixed;を上手に飼う方法 2015.02.21 Frontrend Conference DMM.com Labo 石橋啓太
2. DMM.com Labo デザイナー ! 昔はバナーとか作ってたけど、 フロントエンド技術に興味がでてきた人。 ! コーダーだったり、UI考えたり、アプリ作ったり。 ! 最近AngularJSいじくってます。 石橋 啓太 ishibashi keita
3. 固定表示の実装でハマったこと ありますか？
4. 固定表示の実装でハマったこと ありますか？ あるある
5. かわいいアイツ UETQNN UETQNN fixed fixed
6. 自由自在に扱えるように fixedについてもっと知ろう！ !
7. position: fixed;の中身
8. position: fixed;の中身 absoluteと同じ絶対配置 基準にするのはviewport
9. .red { position: fixed; left: 0; bottom: 0; width: 100%; } position: fixed;の中身 fixed 基準値：viewport UETQNN body div
10. position: fixed;の中身 やってること　大体おなじ なーんだ。
11. viewportってなんだっけ あー、知ってる知ってる。 アレでしょ？アレ。
12. PC ウィンドウエリア＝viewport viewportってなんだっけ
13. スマホ ウィンドウ……？ viewportってなんだっけ
14. visual viewport layout viewport 実際の表示領域（ズーム時含む） metaタグによって設定される ズームした時の挙動について デバイス・OS毎に大きく異なるので ピンチイン許可する場合は要注意！ ! スマホ viewportってなんだっけ
15. 上手に飼うにはどうすれば？
16. 上手に飼うにはどうすれば？ 以下の要素は要注意！ <textarea> <input> <button> <select> position（入れ子） transform （ハードウェアアクセラレータ） z-index
17. <input type=“text”> <textarea> <button> fixed 中身もりもりの固定要素を丸ごと動かす！ これをtransformで動かしたい！ 例：
18. fixed positionプロパティが入れ子状態で乱立！ 例： absolute relative absolute
19. fixed 適当なz-index値の設定でおかしくなる 例： <div>
20. 上手に飼うにはどうすれば？ formへのフォーカス formからformへの移動 スクロール ズーム Javascript
21. 上手に飼うにはどうすれば？ 固定する要素はシンプルに デバイス独自の挙動を考慮する
22. ଞͷཁૉͷӨڹΛड͚΍͍͢ʂ
    େن໛։ൃͷࡍ͸৻ॏʹ࣮૷͠·͠ΐ͏ʂ
23. THANK YOU ! ありがとうございました。