JavaScript position: fixed の要素のタッチイベントが発生しないときがあるiOS Safariのバグ
とある要素に「position: fixed」をかけて、そいつにタッチイベントで何か処理をすることってたまにあるかと思います。 例えば上下左右にメニューバーみたいなのが固定で表示してあって、それをスワイプで閉じたり開いたりできるようなものな...
CSS
JavaScript 
CSS iOSでページ全体のスクロールを禁止させるベストプラクティス
モーダルやドロワーメニューなどを実装する際に、表示中はページ全体のスクロールを禁止させたいということがよくあるかと思います。 僕も以前ドロワーメニューのjQueryプラグインを作ったときに、ページ全体のスクロールを止めるために試行錯誤してま...
フロントエンド フロントエンド開発環境 テンプレート 作りました
案件に取り掛かるときに一番めんどくさいのが開発環境の構築です。 いつも過去案件の流用ばかりでしたが、ちゃんとしたベースがあった方が良いかなと思い作ってみました。 一般的なペライチのLPを想定しているので、無駄がないシンプルな開発環境になって...
CSS Microsoft Edgeで animation-fill-mode: backwards が効かない時の回避方法
覚え書き。 Microsoft Edge において animation-fill-mode:backwards; の指定が効かない時の回避方法 overflow: hidden; を指定すると直ることがある。 ※詳しく検証後、記事更新予定。
CSS CSSで画面外からアニメーションさせると表示されなくなるiOSのバグ？
更新 : 2018年11月21日（水） iOS11以降では問題なく動作することが確認できました。 以下の記事はiOS10以前のSafariのみの挙動になります。 iOS10以前に対応する場合のみ参考にしていただければ幸いです。 CSS3のア...
CSS border-width: 1px; はブラウザで縮小表示すると小数点が出てくる？
こういう横並びのメニューを実装することってよくありますよね？ 私はあります。 メニューに限らずなんですが、この横並びのレイアウトは組み方によっては「ブラウザで縮小表示した際にレイアウトが崩れる」という現象が起こりうるので、今回はその原因と解...
CSS Androidでテキストの横幅が狭まってしまう不具合
最近はスマートフォンサイトを作る機会が多いんですが、この前「PCサイトだけどスマホでもとりあえず見れるよ」くらいのページを作った時に躓いたこと。 iPhoneやAndroid2系では何の問題もなく表示されるのに、Android4系では何故か...