(WCS)給与技術 稲発酵粗飼料(WCS)給与技術 …...はじめに 飼料用稲の生産は、水田農業の枠組みをそのまま残しながら粗飼料を生産し、稲発酵粗飼料
position: fixed;を上手に飼う方法
Transcript of position: fixed;を上手に飼う方法
![Page 1: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/1.jpg)
position: fixed;を上手に飼う方法2015.02.21 Frontrend Conference
DMM.com Labo 石橋啓太
![Page 2: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/2.jpg)
DMM.com Labo デザイナー
!
昔はバナーとか作ってたけど、
フロントエンド技術に興味がでてきた人。
!
コーダーだったり、UI考えたり、アプリ作ったり。
!
最近AngularJSいじくってます。
石橋 啓太 ishibashi keita
![Page 3: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/3.jpg)
固定表示の実装でハマったこと ありますか?
![Page 4: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/4.jpg)
固定表示の実装でハマったこと ありますか?
あるある
![Page 5: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/5.jpg)
かわいいアイツ
fixed
fixed
![Page 6: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/6.jpg)
自由自在に扱えるように fixedについてもっと知ろう!
!
![Page 7: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/7.jpg)
position: fixed;の中身
![Page 8: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/8.jpg)
position: fixed;の中身
absoluteと同じ絶対配置 基準にするのはviewport
![Page 9: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/9.jpg)
.red { position: fixed; left: 0; bottom: 0; width: 100%; }
position: fixed;の中身
fixed
基準値:viewport
body
div
![Page 10: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/10.jpg)
position: fixed;の中身
やってること 大体おなじなーんだ。
![Page 11: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/11.jpg)
viewportってなんだっけ
あー、知ってる知ってる。 アレでしょ?アレ。
![Page 12: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/12.jpg)
PC
ウィンドウエリア=viewport
viewportってなんだっけ
![Page 13: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/13.jpg)
スマホ ウィンドウ……?
viewportってなんだっけ
![Page 14: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/14.jpg)
visual viewport
layout viewport
実際の表示領域(ズーム時含む)
metaタグによって設定される
ズームした時の挙動について デバイス・OS毎に大きく異なるので ピンチイン許可する場合は要注意!
!
スマホ
viewportってなんだっけ
![Page 15: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/15.jpg)
上手に飼うにはどうすれば?
![Page 16: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/16.jpg)
上手に飼うにはどうすれば?
以下の要素は要注意!
<textarea> <input> <button> <select>
position(入れ子)
transform(ハードウェアアクセラレータ)
z-index
![Page 17: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/17.jpg)
<input type=“text”>
<textarea>
<button>
fixed
中身もりもりの固定要素を丸ごと動かす!
これをtransformで動かしたい!例:
![Page 18: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/18.jpg)
fixed
positionプロパティが入れ子状態で乱立!
例:
absolute
relative absolute
![Page 19: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/19.jpg)
fixed
適当なz-index値の設定でおかしくなる
例:
<div>
![Page 20: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/20.jpg)
上手に飼うにはどうすれば?
formへのフォーカス
formからformへの移動
スクロール
ズーム
Javascript
![Page 21: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/21.jpg)
上手に飼うにはどうすれば?
固定する要素はシンプルに
デバイス独自の挙動を考慮する
![Page 22: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/22.jpg)
他の要素の影響を受けやすい! 大規模開発の際は慎重に実装しましょう!
![Page 23: position: fixed;を上手に飼う方法](https://reader033.fdocuments.net/reader033/viewer/2022052400/55a53e401a28abec748b463b/html5/thumbnails/23.jpg)
THANK YOU !ありがとうございました。