CSS

View Transitions API で画面遷移アニメーション

View Transitions API とは 異なるDOM状態間のアニメーション遷移を簡単に実現できるAPI これまでネイティブアプリでしか実装できなかったページをまたがるズムーズなアニメーション遷移も可能になる Chrome、Edgeはバージョン111以降でサポートされているが…

CSS Container Queries を理解する

Container Queriesとは MDNによると、「コンテナのサイズを見て、コンテナ内のスペースに応じてレイアウトを調整できる」とあります。 この「コンテナ」とは、基本的にスタイル指定を行うコンポーネントの親要素になります。 例えば、サイドバーとメインエリ…

:modal 擬似クラスを試してみた

:modal 擬似クラスとは MDNでは、下記のように説明されています。 JavaScriptの showModal() によって表示される dialog 要素 JavaScriptの requestFullscreen() によって表示されるフルスクリーン要素 先日リリースされたChrome 105、Edge 105でSafari、Fir…

Sass で random

CSS

.scss でランダム処理をする機会があり使ってみたのでメモしておきます。 random() という関数で、コンパイル時にランダム数値が書き出される。 (なので表示上は異なるユーザー/端末でも同じ値) random(10) とすると 1〜10 の間で整数をランダムにとってく…

Sass の `map-get`

CSS

例えば、 <div class="object object_01"><amp-img src=""></amp-img></div> <div class="object object_02"><amp-img src=""></amp-img></div> <div class="object object_03"><amp-img src=""></amp-img></div> <div class="object object_04"><amp-img src=""></amp-img></div> <div class="object object_05"></div>