2015/02/21 CSSTrack Lightning Talks #FrontrendCSS

1. position: fixed;を上手に飼う方法
2015.02.21 Frontrend Conference
DMM.com Labo 石橋啓太

2. DMM.com Labo デザイナー
!
昔はバナーとか作ってたけど、
フロントエンド技術に興味がでてきた人。
!
コーダーだったり、UI考えたり、アプリ作ったり。
!
最近AngularJSいじくってます。
石橋 啓太 ishibashi keita

3. 固定表示の実装でハマったこと
ありますか？

4. 固定表示の実装でハマったこと
ありますか？
あるある

5. かわいいアイツ
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
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 !
ありがとうございました。