pad

構文

pad: 3 "0";
pad: "+" 5;

値

記述子は、次の 2 つの値を受け入れます。これらの値は、空間で区切られ、任意の順序で指定できます。

<integer>

すべてのマーカー表現が到達しなければならない最小の長さを指定します。値は負ではない必要があります。 pad 記述子の場合、この値は「パッド長」とも呼ばれます。

<symbol>

<integer> で定義された最小長さに到達しなかった場合に、パディングに使用する記号を指定します。pad 記述子の場合、この値は「パディング記号」とも呼ばれます。

解説

マーカー表現を最小の長さにする必要がある場合は、pad 記述子を使用します。マーカー表現が指定したパディング長よりも短い場合、マーカー表現は指定したパディング記号でパディングされます。パディング長よりも長いマーカー表現は、追加のパディングなしで表示されます。

記述子 pad は、最小マーカー長として <integer>、パディングとして <symbol> を取ります。記述子 pad の一般的な用途は、リストの番号付けを 1、2、3、4 ではなく、01 から始めて 02、03、04 のようにする必要がある場合です。この場合、pad 記述子を pad: 2 "0" と指定することで、ブラウザーはカウンターの長さを 2 文字以上に確実にし、必要に応じて 0 によるパディングを追加して、最小の長さである 2 文字に到達します。この例では、すでに 2 文字以上の長さのカウンターは、パディングなしで通常どおり表示されます。

公式定義

形式文法

pad = 
  <integer [0,∞]>  &&
  <symbol>         

<integer> = 
  <number-token>  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

例

カウンターをゼロ埋めにする

この例では、decimal の system を拡張して、3 文字以上の長さのカウンターを作成し、それより短いカウンターは 0 で埋めて最小の長さに到達するようにしています。出力をより読みやすくするために、suffix 記述子が追加されています。

HTML

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li value="40">Forty</li>
  <li>Forty-one</li>
  <li value="200">Two hundred</li>
  <li value="3000">Three thousand</li>
  <li>and so on</li>
</ul>

CSS

@counter-style pad-example {
  system: extends decimal;
  suffix: ": ";
  pad: 3 "0";
}

ul {
  list-style: pad-example;
}

結果

仕様書

ブラウザーの互換性

関連情報

• @counter-style 記述子: system, symbols, additive-symbols, negative, prefix, suffix, range, speak-as, fallback
• リストスタイルのプロパティ: list-style, list-style-image, list-style-position
• symbols(): 無名のカウンタースタイルを生成する関数記法。
• CSS カウンタースタイルモジュール
• CSS リストとカウンターモジュール