CSS

1/2ページ

overflow:hiddenでsticky要素が動かない場合

  • 2019.11.30

使い所によって楽しい効果が簡単に出せるstickyですが、親要素にoverflow-x:hiddenを設定しているとうまく動かないことがあります。個別に親要素を指定するのは大変なので、jQueryのparentsでoverflow-x:visibleを使うと動くのですが、スマホの画面の左右が動いてしまう。というわけで、PCやタブレットのときだけ、親要素をvisibleにするときのメモです。

タブレットをPC表示の縮小で対応する

  • 2019.09.12

レスポンシブの解決策として、何がベストか日頃悩むところなのですが、その際に扱いが難しいのがタブレット。複雑なデザインの場合は、単純にPCの表示をそのまま縮小するのが一番楽ではあります。 まず前提として、レスポンシブでない場合、タブレット端末はPCの表示をそのまま適切なサイズに縮小して表示します。レスポンシブのあtめのviewportの設定はだいたい下記のタイプです。 スマホの場合、上記の devi […]

固定ヘッダーのある場合のアンカー位置ズレ問題

  • 2019.08.22

ヘッダーを上部に固定して表示しているときに、アンカーリンクを使うと、固定ヘッダーの高さ分、記事の頭が隠れてしまうため、アンカー位置がズレているように見えます。この問題、単純なようで結構厄介なのです。 有名な方法のひとつは、CSSでターゲットになるボックスにネガティブマージンを設定し、それと同じ数値のパディングを設定する。でもこの方法、ターゲット要素が重なった場合に、リンククリックが出来ない場面があ […]

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

  • 2019.08.07

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

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

CSS NO IMAGE
  • 2019.07.02

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

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

  • 2019.04.20

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

wow.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 NO IMAGE
  • 2018.05.10

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