Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2012年07月18日

いしはら

スマートフォンサイト用のCSS3チートシートを作成してみた

はじめまして。 ソフトウェア開発部の、いしはらです。 HTMLやJavaScript、CSSといったクライアントサイドの技術を中心に開発をおこなっています。

開発でCSS3をよく使っているのですが 「あれ、ここってどうやって書くんだったっけ…」とプロパティをよく忘れちゃいます。 忘れてしまう度に検索したり本を開いたり…というのは手間なので… スマートフォンサイトで使うCSS3のチートシートを作成しました!

是非ご活用ください。

enter image description here

CSS3 Cheat Sheet For Smart Phone Site


2012年07月10日

スマートフォンで、ロード完了時にアドレスバーを隠すアレの改良版

こんにちわ。ソフトウェア開発部の丹です。
今回はJavaScriptについてです。

スマートフォンでの表示スペースを少しでも確保する為に、1px スクロールさせてアドレスバーを隠してしまうテクニックがありますが、
これだと読み込みながらスクロールしていても、強制的に一番上に戻らされるというデメリットがあります。
それが嫌なので少し改造してみました。

旧1pxスクロール

改造した1pxスクロール

ページ読み込み時(window.onload)に
その時のスクロール位置(document.body.scrollTop)を取得し、
もし(if)スクロールしていない(== 0)だったら
ズラす(function(){scrollTo(0,1)})という風にしています。

ズラすタイミングを変えたい時は、setTimeoutの行の最後の数字(1)を変えて下さい。

追記 7/11

jQueryを使う場合は、

を使った方が実行タイミング的にベターです。

また、setTimeout内は

より

の方が処理が早い様です。