Submit Search
Upload
position: fixed;を上手に飼う方法
•
3 likes
•
1,862 views
石橋 啓太
Follow
2015/02/21 CSSTrack Lightning Talks #FrontrendCSS
Read less
Read more
Design
Report
Share
Report
Share
1 of 23
Download now
Download to read offline
Recommended
Api設計のつぶやき
Api設計のつぶやき
xyzplus_net
NTTレゾナント主催のセミナーで発表した内容です。
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
2016.7.23 UI Live ! in Kanazawa
良いUIをエンジニアに作ってもらうために、デザイナーができること
良いUIをエンジニアに作ってもらうために、デザイナーができること
石橋 啓太
UI Live ! in Kanazawaでの登壇資料です。 https://90c0ba03fdaf930c0a4048bb06.doorkeeper.jp/events/47401
Ui live資料
Ui live資料
Ryota Iida
8/18におこなわれたCSS Nite in OSAKA, Vol.32での発表用スライドです。4/27のCSS Nite in OSAKA, Vol.29で使用したスライドをベースに、若干の追記・修正をした内容となっています。
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
CSS Nite in OSAKA, Vol.29 で発表したスライドです。改訂版を http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 にアップしました。
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
Hiroaki Wakamatsu
10/31 プログラミング生放送勉強会 第36回@株式会社 DMM.com ラボ にて発表した内容です。
新卒が半年で転職をした話
新卒が半年で転職をした話
naba0123
DMM Study night (2015.11.26)
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
石橋 啓太
Recommended
Api設計のつぶやき
Api設計のつぶやき
xyzplus_net
NTTレゾナント主催のセミナーで発表した内容です。
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
2016.7.23 UI Live ! in Kanazawa
良いUIをエンジニアに作ってもらうために、デザイナーができること
良いUIをエンジニアに作ってもらうために、デザイナーができること
石橋 啓太
UI Live ! in Kanazawaでの登壇資料です。 https://90c0ba03fdaf930c0a4048bb06.doorkeeper.jp/events/47401
Ui live資料
Ui live資料
Ryota Iida
8/18におこなわれたCSS Nite in OSAKA, Vol.32での発表用スライドです。4/27のCSS Nite in OSAKA, Vol.29で使用したスライドをベースに、若干の追記・修正をした内容となっています。
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
CSS Nite in OSAKA, Vol.29 で発表したスライドです。改訂版を http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 にアップしました。
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
Hiroaki Wakamatsu
10/31 プログラミング生放送勉強会 第36回@株式会社 DMM.com ラボ にて発表した内容です。
新卒が半年で転職をした話
新卒が半年で転職をした話
naba0123
DMM Study night (2015.11.26)
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
石橋 啓太
【創】トラック五回表のセッションでのスライド
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
Chihiro Tomita
2015年7月25日 マカベン × HTML5fun のセッションで使用したスライドです。
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
Swift勉強会 Vol.4の資料 - PDFから資料内リンクに飛べます Original: hayate1996.github.io/swift-animation-presentation http://swiftstarter.connpass.com/event/15102/
Swift Study Vol.4
Swift Study Vol.4
Nagamine Hiromasa
2012年10月開催の WordBench 神戸での発表資料です。シェアするにあたって、発表時とはタイトルのみ変更させて頂いています。
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Yuji Nojima
関西モバイルアプリ研究会 #1
ObjectMapperでJSONマッピング
ObjectMapperでJSONマッピング
Syo Ikeda
2015年2月10日セカイラボ主催のセミナー「オフショア開発はなぜ失敗するのか?」より。中村健太氏が実際にダナン(ベトナム)に行ってアプリ開発をした際の体験記。どうやったらオフショア開発って上手くいくんでしょう?
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
セカイラボ(Sekai Lab Pte. Ltd.)
Swiftにおける enum と struct の利用方法を説明しています。 2015/03/25 にHatchUp主催で行われた勉強会資料です。 https://atnd.org/events/62318
【Swift】 それ、enumとstructでやってみましょう!!
【Swift】 それ、enumとstructでやってみましょう!!
Yu Tanaka
第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会 にて発表した資料。 http://kokucheese.com/event/index/90708/
ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場
Shota Suzuki
当日参加者向けスライド
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
Takahide Hosokawa
ソニックムーブ島根勉強会 βでの発表資料です
マルチデバイスに対応するためのAuto layout
マルチデバイスに対応するためのAuto layout
asakahara
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
WP-D Fes #03 in GMO Yours Web制作の最新事情を理解制作現場をいまこそアップデートしましょう!! Tokyo 2015.02.22.sun Osaka 2015.03.07.sat
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
Core Image や vImage、GPUImage 等々、便利な画像/映像処理フレームワークが存在する昨今のiOS開発環境においても、OpenCVも依然として魅力的ですよ、という話。
OpenCV 3.0 on iOS
OpenCV 3.0 on iOS
Shuichi Tsutsumi
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介
Mori Shingo
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
Kentaro Matsumae
CSS Nite in OSAKA, Vol.30でプレゼンしたスライド。 getUserMedia()やBatteryStatus API, Chrome実装のSpeech Input APIやバイブレーションなど、先行実装をまとめてライブデモ。
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
Cssアニメーションとその制御
Cssアニメーションとその制御
Muyuu Fujita
More Related Content
Similar to position: fixed;を上手に飼う方法
【創】トラック五回表のセッションでのスライド
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
Chihiro Tomita
2015年7月25日 マカベン × HTML5fun のセッションで使用したスライドです。
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
Swift勉強会 Vol.4の資料 - PDFから資料内リンクに飛べます Original: hayate1996.github.io/swift-animation-presentation http://swiftstarter.connpass.com/event/15102/
Swift Study Vol.4
Swift Study Vol.4
Nagamine Hiromasa
2012年10月開催の WordBench 神戸での発表資料です。シェアするにあたって、発表時とはタイトルのみ変更させて頂いています。
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
Yuji Nojima
関西モバイルアプリ研究会 #1
ObjectMapperでJSONマッピング
ObjectMapperでJSONマッピング
Syo Ikeda
2015年2月10日セカイラボ主催のセミナー「オフショア開発はなぜ失敗するのか?」より。中村健太氏が実際にダナン(ベトナム)に行ってアプリ開発をした際の体験記。どうやったらオフショア開発って上手くいくんでしょう?
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
セカイラボ(Sekai Lab Pte. Ltd.)
Swiftにおける enum と struct の利用方法を説明しています。 2015/03/25 にHatchUp主催で行われた勉強会資料です。 https://atnd.org/events/62318
【Swift】 それ、enumとstructでやってみましょう!!
【Swift】 それ、enumとstructでやってみましょう!!
Yu Tanaka
第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会 にて発表した資料。 http://kokucheese.com/event/index/90708/
ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場
Shota Suzuki
当日参加者向けスライド
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
Takahide Hosokawa
ソニックムーブ島根勉強会 βでの発表資料です
マルチデバイスに対応するためのAuto layout
マルチデバイスに対応するためのAuto layout
asakahara
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
WP-D Fes #03 in GMO Yours Web制作の最新事情を理解制作現場をいまこそアップデートしましょう!! Tokyo 2015.02.22.sun Osaka 2015.03.07.sat
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
Core Image や vImage、GPUImage 等々、便利な画像/映像処理フレームワークが存在する昨今のiOS開発環境においても、OpenCVも依然として魅力的ですよ、という話。
OpenCV 3.0 on iOS
OpenCV 3.0 on iOS
Shuichi Tsutsumi
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介
Mori Shingo
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
Kentaro Matsumae
CSS Nite in OSAKA, Vol.30でプレゼンしたスライド。 getUserMedia()やBatteryStatus API, Chrome実装のSpeech Input APIやバイブレーションなど、先行実装をまとめてライブデモ。
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
Cssアニメーションとその制御
Cssアニメーションとその制御
Muyuu Fujita
Similar to position: fixed;を上手に飼う方法
(18)
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
【DevLOVE甲子園2014】デザイナーも、 アジャイル開発に 挑みたい!(希望)
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Swift Study Vol.4
Swift Study Vol.4
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
ObjectMapperでJSONマッピング
ObjectMapperでJSONマッピング
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
ベトナム・ダナン オフショア開発記 by 中村健太(株式会社ビットエー/日本ディレクション協会)
【Swift】 それ、enumとstructでやってみましょう!!
【Swift】 それ、enumとstructでやってみましょう!!
ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場
バレンタイン直前開催Web勉強会
バレンタイン直前開催Web勉強会
マルチデバイスに対応するためのAuto layout
マルチデバイスに対応するためのAuto layout
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
OpenCV 3.0 on iOS
OpenCV 3.0 on iOS
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Cssアニメーションとその制御
Cssアニメーションとその制御
position: fixed;を上手に飼う方法
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 ! ありがとうございました。
Download now