Upload
-
View
297
Download
0
Embed Size (px)
Citation preview
position: fixed;を上手に飼う方法2015.02.21 Frontrend Conference
DMM.com Labo 石橋啓太
DMM.com Labo デザイナー
!
昔はバナーとか作ってたけど、
フロントエンド技術に興味がでてきた人。
!
コーダーだったり、UI考えたり、アプリ作ったり。
!
最近AngularJSいじくってます。
石橋 啓太 ishibashi keita
固定表示の実装でハマったこと ありますか?
固定表示の実装でハマったこと ありますか?
あるある
かわいいアイツ
fixed
fixed
自由自在に扱えるように fixedについてもっと知ろう!
!
position: fixed;の中身
position: fixed;の中身
absoluteと同じ絶対配置 基準にするのはviewport
.red { position: fixed; left: 0; bottom: 0; width: 100%; }
position: fixed;の中身
fixed
基準値:viewport
body
div
position: fixed;の中身
やってること 大体おなじなーんだ。
viewportってなんだっけ
あー、知ってる知ってる。 アレでしょ?アレ。
PC
ウィンドウエリア=viewport
viewportってなんだっけ
スマホ ウィンドウ……?
viewportってなんだっけ
visual viewport
layout viewport
実際の表示領域(ズーム時含む)
metaタグによって設定される
ズームした時の挙動について デバイス・OS毎に大きく異なるので ピンチイン許可する場合は要注意!
!
スマホ
viewportってなんだっけ
上手に飼うにはどうすれば?
上手に飼うにはどうすれば?
以下の要素は要注意!
<textarea> <input> <button> <select>
position(入れ子)
transform(ハードウェアアクセラレータ)
z-index
<input type=“text”>
<textarea>
<button>
fixed
中身もりもりの固定要素を丸ごと動かす!
これをtransformで動かしたい!例:
fixed
positionプロパティが入れ子状態で乱立!
例:
absolute
relative absolute
fixed
適当なz-index値の設定でおかしくなる
例:
<div>
上手に飼うにはどうすれば?
formへのフォーカス
formからformへの移動
スクロール
ズーム
Javascript
上手に飼うにはどうすれば?
固定する要素はシンプルに
デバイス独自の挙動を考慮する
他の要素の影響を受けやすい! 大規模開発の際は慎重に実装しましょう!
THANK YOU !ありがとうございました。