レスポンシブの効率的なスタイルシートには、いつまで立っても頭を悩まされている私ですが、functions.phpでwp_enqueue_style()関数を使ってCSSを読み込む際に、メディアクエリ指定したいケースがあり…
position:fixedの基準値を親要素の左上にする
position:fixed は、ブラウザの左上を基準に固定されると思っていたのですが、親要素の左上にすることが出来ることがわかりました。やるべきことは非常にシンプルです。 親要素のpositionは、relative又…
CSSアニメーションを可視領域に入ったら発火（inview.js その１）
cssアニメーションはとても便利なのですが、アニメーションをいつ発動させるかは、CSSだけでは操作できません。そこで要素が画面内に入ったことをシンプルに判定したい。そんな時は「inview.js」の出番です。 使用方法の…
wow.jsのアニメーションをリピートさせたい
手軽なアニメーションの導入方法として、みんな大好き wow.js。 こういう使い方がシンプルなスクリプトは便利ですが、もし弱点をあげるとすれば、一度表示してしまったアイテムは二度とアニメーションしないこと。 何度表示して…
FlexboxベースのCSSフレームワークを比較する
私は普段、CSSフレームワークは「bootstrap」か「foundation」を利用しています。ワードプレスのテーマを自作する場合も、これらのフレームワークを使うことが多いのですが、正直なところ全部の機能を必要としてい…
Chromeで突如background-position:fixedが効かなくなった朝！
朝、制作中のサイトのデザイン変更をしようとしたら、Chromeだけbackground-position:fixedが効かなくなっていまして、一大事。クライアントに知られる前に、なんとかせねばと、海外サイトを検索。同じケ…
flexboxを利用してulを横並びのリストにする
flexboxを使って、floatなしでulを横並びのリストに。原理がわかれば簡単。
ul要素の中央寄せ（flexbox）
foundation6.4のmenuクラスは、flexboxが使われています。（気づかなくて、どうも思った通りの挙動にならないと思って調べたらそうなっていました。） ですから要素をセンターに揃えるのは実に簡単です。