JavaScript無し！CSSで簡単に動きを実装するテクニックまとめ
作成：2016/07/19 Web制作 > JavaScript無しで実装するCSS小技まとめです。細部にちょっとした動きを取り入れたいときなど、知っておくと便利なエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 メタ言語でなく、CSSで見たい方は「View Compiled CSS」でコンパイルして見てください。 ※CodepenのURLの末尾に「?editors=1100」を付与するとhtml/cssのみの編集画面で閲覧できるので、今回は全てのURL末尾に付与してます。 モーダルウィンドウ チェックボックスを使わないタイプ。擬似クラスである:targetを使い、アンカーリンク（#シャープ）にスタイルを適用しモーダルウィンドウを表示しています。 .foo:target { color: red; } :target擬似クラスを利用すれば、J
iOS の Safari で Sticky (スクロール固定) 要素がカタカタしてお困りの時は | WP-E (仮)
スクロール位置に応じて画面内に固定されたりされなくなったり、そんな要素を Sticky 要素と呼んだりします。スクロールをトリガーに CSS の position プロパティを切り替えて実装するのが一般的なやり方と思いますが、iOS の Mobile Safari だけはスクロールを一度止めるまで position の変更が反映されない現象が起こります。 文字で説明しても全く分からない気がしていますので、次の画像を御覧ください。 こんな感じで一度スクロールをやめるまで、position: fixed に切り替わって上部に固定されるはずのその要素はまるで応答無く画面外へと消えていきます。メニューを使った例ですが、メニューでなくとも同様です。これは PC ブラウザや Android 端末では発生せず、スクロールイベントの実行頻度を下げたり、Passive Event Listeners を用い
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
スマホのposition: fixed;で再描画を使って位置ズレを防ぐ - Qiita
スマホでposition: fixed;を使うと、よくページ進む・戻るボタンで画面遷移をしたときにfixedを指定した要素の位置がズレたりタップ位置がずれたりする。 そういう場合に、以下のような方法で再描画をさせることで位置ズレを解消してあげることができる //// JavaScript (ここでの$はjQueryみたいなもの) var html = $("html"); // pageshowのイベントでhtmlに.do-fixedを付ける window.addEventListener("pageshow", function() { html.addClass("do-fixed"); }, false); // pagehideのイベントでhtmlから.do-fixedを外す window.addEventListener("pagehide", function() { html
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
Refresh-SF - Online JavaScript and CSS Compressor
