カテゴリー: css/sass

calc()の使い方 cssで変数を使う

jintacss/sass

  あまり使う場面がなさそうだが、どうなのだろうか。 どのように使えるか、あまり思いつかなかったが作って見た。   See the Pen by rea-jin (@rea-jin) on CodePen.     変数を使える① sassなどのcssプリプロセッサで、変数が使えるように、calc()は関数なので、その中で変数を使える。 クラスtitleを見…Continue reading calc()の使い方 cssで変数を使う

画面をスクロールして要素をふわっと表示する css / js / jQuery

jintacss/sass

画面をスクロールして、ボタンなどの要素をふわっと表示したい時。 cssで特定の要素を透明にしたり(opacity)、移動したり(transform)するクラスを付けておいて、jsで画面トップから要素までの高さで、isActiveなどクラスをつけて、要素を元の状態に戻す方法。つけるクラスに、transitionで時間を指定しておく。 参考 ttps://noze.space/archives/415…Continue reading 画面をスクロールして要素をふわっと表示する css / js / jQuery

CSS : hover時に他の要素の操作をしたい時の注意点

jintacss/sass

擬似クラス：hoverを使う 擬似クラスとは。。。 CSS の擬似クラスPseudo-classesは、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。 hover以外にも、activeやvisited,checkedなど、他にもたくさんある。 これをつけることで、特定の状態になり、要素なども別に指定できる。 使い方は、擬似クラスをつけたい要素に、:hoverと…Continue reading CSS : hover時に他の要素の操作をしたい時の注意点