スムーススクロールの実装例 ｜ TAKLOG

2024/04/15 7 users スムーズスクロール smooth CSS ゴス HTML要素

html要素にscroll-behavior:smoothを指定するだけのコストの低さ、それでいて従来のアンカーリンクの機能を損ねないことから「スムーススクロールはCSSのみで十分」といった技術記事やポストが多く広まっています。 ただ、そういった技術記事やポストは「CSSのみで対応できる」「ワンライナーで実装できる」と言ったコス... 続きを読む

タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG

2024/04/02 12 users Hidden None display アコーディオン タブ

タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるhidden="until-found"はhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキ... 続きを読む

横スクロールバーの発生源を素早く特定する方法と最新の防止策 ｜ TAKLOG

2024/03/18 114 users デベロッパーツール outline Console 防止策

横スクロールバーの発生源はデベロッパーツールのConsoleですぐに特定できる横スクロールバーの発生源の特定方法として有名なのは全称セレクタですべての要素にoutlineを付与して確認する方法だと思われますが、次のスクリプトをデベロッパーツールのConsoleに貼り付けて確認したほうが手っ取り早いです。 const windowW... 続きを読む

あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG

2024/03/16 598 users CSSテクニック あなた

Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:... 続きを読む

【令和最新版】Google Fontsの読み込み最適化の結論 ｜ TAKLOG

2024/03/12 12 users CLS href link rel 結論 head内

当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。 結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.googleapis.com" /... 続きを読む