HTML

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…

HTML セクショニングと見出しのマークアップ

最近の案件でマークアップに関していろいろ気づきがあったのでメモしておきます。 見出しタグが入らないエリアは <section> で囲まない 良くないと思われる例 <section> <p>テキストです。</p> </section> 改善例 <div> <p>テキストです。</p> </div> <section> の中には見出しタグはひとつにする 良くないと思われる例 <section> <h1>見</h1></section></section></section>…