CSS

2/2ページ

wp_enqueue_styleにメディアクエリ指定をする

2019.08.07

レスポンシブの効率的なスタイルシートには、いつまで立っても頭を悩まされている私ですが、functions.phpでwp_enqueue_style()関数を使ってCSSを読み込む際に、メディアクエリ指定したいケースがあり、調べてみました。簡単です。エンキュースタイルの書式は<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media […]

position:fixedの基準値を親要素の左上にする

CSS

2019.07.02

position:fixed は、ブラウザの左上を基準に固定されると思っていたのですが、親要素の左上にすることが出来ることがわかりました。やるべきことは非常にシンプルです。親要素のpositionは、relative又はabsolute指定。position: fixed ; で指定した子要素にはleft値を指定しない。 leftを指定しない、というのがポイントですね・・・

CSSアニメーションを可視領域に入ったら発火（inview.js その１）

CSS jQuery・JS アニメーション

2019.04.20

cssアニメーションはとても便利なのですが、アニメーションをいつ発動させるかは、CSSだけでは操作できません。そこで要素が画面内に入ったことをシンプルに判定したい。そんな時は「inview.js」の出番です。使用方法の基本も簡単です。（1）CSSの@keyframesでアニメーションをつくる。（2）(1)のアニメーションを適用するCSSクラスをつくる。（2）inview.jsで、可視領域に入った […]

wow.jsのアニメーションをリピートさせたい

CSS jQuery・JS

2018.10.24

手軽なアニメーションの導入方法として、みんな大好き wow.js。こういう使い方がシンプルなスクリプトは便利ですが、もし弱点をあげるとすれば、一度表示してしまったアイテムは二度とアニメーションしないこと。何度表示してもアニメーションしてくれないかなと思う場面もあります。探してみたら、海外の方がGOODなコードを考えてくれていました。 https://github.com/matthieua/ […]

FlexboxベースのCSSフレームワークを比較する

CSS

2018.06.01

私は普段、CSSフレームワークは「bootstrap」か「foundation」を利用しています。ワードプレスのテーマを自作する場合も、これらのフレームワークを使うことが多いのですが、正直なところ全部の機能を必要としているわけではないので、重いよなあ、と考えることも多く、組み込みの際悩みます。といってあまりにレイアウト実現の種類が少ないと顧客のニーズに応えることができません。昨今、各種ブラウザが […]

Chromeで突如background-position:fixedが効かなくなった朝！

CSS

2018.05.10

朝、制作中のサイトのデザイン変更をしようとしたら、Chromeだけbackground-position:fixedが効かなくなっていまして、一大事。クライアントに知られる前に、なんとかせねばと、海外サイトを検索。同じケースで悩んでいる人がそれなりにいることに気が付きまして。下記のサイトに記載の方法で私のケースは無事事なきをえました。（文字だけびっしり並んでいて、一見怪しげなんですが・・・） ht […]