Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
position: fixed;を上手に飼う方法
Search
usagi-f
February 21, 2015
Programming
2
280
position: fixed;を上手に飼う方法
usagi-f
February 21, 2015
Tweet
Share
More Decks by usagi-f
See All by usagi-f
フロントエンド実装から見たAtomic Design開発のポイント
usagif
3
6.8k
Take into Accessibility in React
usagif
1
600
platoを使ったコードメトリクス生成
usagif
0
250
How Github works and How Google works
usagif
0
93
良いUIをエンジニアに作ってもらうために、デザイナーができること
usagif
1
77
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
usagif
0
100
Frontend summary in 2015 summer
usagif
0
42
なるべく噛み砕いたGit基礎講習
usagif
1
71
Other Decks in Programming
See All in Programming
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
630
Ruby Parser progress report 2024
yui_knk
2
190
マルチモジュールにおけるテスト最適化
fxwx23
0
190
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
240
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Architecture Decision Record (ADR)
nearme_tech
PRO
1
580
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
320
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
120
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
4
1.5k
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
2.5k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.4k
null or undefined
susisu
22
6k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
508
110k
In The Pink: A Labor of Love
frogandcode
139
22k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Facilitating Awesome Meetings
lara
49
5.9k
How to Ace a Technical Interview
jacobian
275
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
GitHub's CSS Performance
jonrohan
1029
450k
How STYLIGHT went responsive
nonsquared
93
5.1k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
23
580
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Transcript
position: fixed;を上手に飼う方法 2015.02.21 Frontrend Conference DMM.com Labo 石橋啓太
DMM.com Labo デザイナー ! 昔はバナーとか作ってたけど、 フロントエンド技術に興味がでてきた人。 ! コーダーだったり、UI考えたり、アプリ作ったり。 ! 最近AngularJSいじくってます。
石橋 啓太 ishibashi keita
固定表示の実装でハマったこと ありますか?
固定表示の実装でハマったこと ありますか? あるある
かわいいアイツ UETQNN UETQNN fixed fixed
自由自在に扱えるように fixedについてもっと知ろう! !
position: fixed;の中身
position: fixed;の中身 absoluteと同じ絶対配置 基準にするのはviewport
.red { position: fixed; left: 0; bottom: 0; width: 100%;
} position: fixed;の中身 fixed 基準値:viewport UETQNN 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 ! ありがとうございました。