CSS

【CSSプロパティ】:has()疑似クラスを使ってみました!

  • 2023.10.27

いつのまにか導入されている、新しいCSSプロパティやセレクタ。たまには情報を仕入れておかないと「こんな便利な方法があったんかい!」という打撃を浴びることになります…さて今回紹介しますのは、疑似クラス「:has()」です。 特定の要素を含んでいるものに対する指定 親子要素だけでなく様々なパターンで使用可能です サンプル See the Pen CSS :has() 疑似クラスデモ by BST株式会 […]

Javascript「swup」で簡単にシームレスなページ移動を実現!

  • 2023.10.25

WEBサイトのページ移動がシームレスになるだけで、なんかオシャレだしクオリティもアップした感じになる!(と筆者は思う)これまでにも同じようなライブラリがありましたが、swupは軽量でバージョンアップもしっかり行われていますので、シームレスなページトランジションをWEBサイトに導入されたい方にはお勧めです。 プロジェクトファイルはこちら →プロジェクトをプレビューする(GitHub Pages) → […]

[CSS中級]translate3d()でJSを使わずフリップカードを作りたい!

  • 2023.10.20

結果 See the Pen 【translate3d()アニメーション】JS無しでフリップカードを作る! by BST株式会社 (@BST-web) on CodePen. translate3d()とは? translate3d() は CSS の関数で、要素を三次元空間内で再配置します。返値は データ型です。この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移 […]

[CSS初級]@keyframe プロパティで動きのあるボタンを!

  • 2023.10.17

@keyframesとは? CSS @ 規則の @keyframes は、アニメーションの流れに沿ったキーフレーム(または中間地点)のスタイルを定義することによって、一連のCSSアニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップをCSS Transitionsよりも詳細に制御できます。@keyframes – CSS: カスケーディングスタイルシート | MDN サ […]