本文へスキップ

#CSS の記事

10件の記事

2025年 1件

  1. counter()とcounters()でCSS自動採番をシンプルに実装する

    CSSのcounter()とcounters()を使って、見出しやリストに番号を自動で振る方法を、サンプルコードと出力例で説明します。数字のフォーマットの指定と、3桁以上の0埋めの方法も扱います。

2024年 7件

  1. カスタムプロパティにSassの変数を渡すと変数のままコンパイルされてしまう

    CSSのカスタムプロパティの値にSassの変数を書くと、変数名のまま出力されます。Sassがカスタムプロパティの値を書かれたとおりに出力するためで、インターポレーション #{} を使うと変数の値を渡せます。

  2. 三角関数を駆使してCSSだけでローディングスピナーを作ろう!

    CSSのsin()とcos()を使って、8つの丸が回転しているように見えるローディングスピナーをCSSだけで作ります。円周上に等間隔で丸を並べる考え方から、アニメーションのずらし方までを順に解説します。

  3. CSSのカスケードレイヤー「@layer」の使い方

    CSSのカスケードレイヤー(@layer)は、スタイルをレイヤーに分けて、どのレイヤーを優先するかを決められる機能です。レイヤーの作り方、順番の指定、@importでの読み込み、詳細度との関係を解説します。

2023年 2件

  1. CSSだけで文末を3点リーダーで省略表示させる

    複数行のテキストを指定した行数で省略して末尾に3点リーダーを表示するには、-webkit-line-clampをdisplay: -webkit-box;などと組み合わせて指定します。