タグ

ブックマーク / ics.media (2)

  • CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA

    CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSSSVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術

    CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
  • ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA

    みなさんは、CSSを書くときに管理のしやすさを意識していますか? CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイルが上書きされすぎていて、 !important せざるを得ない といった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基の手法についてご紹介します。 CSS

    ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA
  • 1