counter()とcounters()でCSS自動採番をシンプルに実装する
CSSのcounter()とcounters()を使って、見出しやリストに番号を自動で振る方法を、サンプルコードと出力例で説明します。数字のフォーマットの指定と、3桁以上の0埋めの方法も扱います。
10件の記事
CSSのcounter()とcounters()を使って、見出しやリストに番号を自動で振る方法を、サンプルコードと出力例で説明します。数字のフォーマットの指定と、3桁以上の0埋めの方法も扱います。
CSSのカスタムプロパティの値にSassの変数を書くと、変数名のまま出力されます。Sassがカスタムプロパティの値を書かれたとおりに出力するためで、インターポレーション #{} を使うと変数の値を渡せます。
CSSのsin()とcos()を使って、8つの丸が回転しているように見えるローディングスピナーをCSSだけで作ります。円周上に等間隔で丸を並べる考え方から、アニメーションのずらし方までを順に解説します。
Visual Studio Codeのユーザースニペットを使うと、短いキーワードでよく使うコードを挿入できます。スニペットの設定方法と、HTMLやCSSで使っているスニペットを紹介します。
ページ内リンクのスムーススクロールは、CSSのscroll-behaviorだけで実装できます。固定ヘッダーに見出しが隠れないようにするscroll-margin-topの使い方と、動きを減らす設定への配慮も紹介します。
CSSのカスケードレイヤー(@layer)は、スタイルをレイヤーに分けて、どのレイヤーを優先するかを決められる機能です。レイヤーの作り方、順番の指定、@importでの読み込み、詳細度との関係を解説します。
文字にマーカーを引くCSSを、linear-gradientを使う方法とtext-decorationを使う方法で比較します。text-decorationなら、線の太さと位置をpxで指定できます。Safariでの注意点も紹介します。
JavaScriptでCSSのカスタムプロパティを扱うには、setProperty()で値をセットし、getComputedStyle()とgetPropertyValue()で値を取得します。Resize Observer APIで高さの変化に追従する方法も紹介します。
Next.js 12.3.1から13.4.10では、next/linkのページ内リンクにscroll-behavior: smooth;が効きません。13.4.11以降へのアップデートか、Pages Routerならscroll={false}で解決できます。
複数行のテキストを指定した行数で省略して末尾に3点リーダーを表示するには、-webkit-line-clampをdisplay: -webkit-box;などと組み合わせて指定します。