技術メモ昨日書いた記事(1つ手前の記事)で、文字を細くする方法について書きました。ここでは、AOS.js(JavaScriptのライブラリで、簡単にスクロール連動型のアニメーションを実装できるものです)と併用した場合に、transformが効かないことがあったので、それについて書き残しておきます。AOS.jsのプロパティにはtransformが組み込まれているものがあります。アニメーションで動きをつけている表現なので、当たり前と言われればそうなのですが、私はこのことに気づくのが遅かったです。AOS.jsを実装している要素に対して、文字を細くしたいからと、先日説明したtransformを用いても想定通りにあたってくれません。このような時は、AOS.jsを実装する要素は別に用意してあげて競合をなくしてあげる方法で解決しました。World!!</h2>と既にAOS.jsを実装している部分があったとして、後からこのh2に対してtransformで文字の細さを表現しようとしてもうまくいきません。そこで以下のように、AOS.jsを実装するようの固まりを外側に作ってあげて、子要素でAOS.jsが外れたh2に対してtransformを指定します。0);}そうすると、AOS.jのアニメーションはしっかりh2にかかりつつ、h2の文字の細長さも表現することができます。AOS.jとの競合は、私はこのように解決しました。[...]2022年7月12日CSS技術メモPugでインライン要素を表現したいpugで改行する時、エラーが発生したので備忘録としてメモしておきます。技術メモCSSレスポンシブ対応するためにmax-widthの指定を解除する方法よく使うmax-widthですが、レスポンシブ対応の実装をしている時に「そういえばmax-widthを解除する方法ってどうやったっけ?」と考え込んでしまったため、調べたことをメモで残しておきます。[...]2022年6月24日CSSCSS文字を細くする方法~transformを使った方法~デザインカンプからのコーディングを行っている時に、文字のサイズや行間、文字間は指定通りなのに、なぜか文字がデザイン通りに合わない、ということが出てきました。..)φメモしておきます。[...]2022年4月28日CSSこの投稿へのトラックバックコメントはありません。Comments表示できるコメントはありません。