CSSのcounter()関数の実装サンプル_技術三昧ブログ

ホーム » ブログ » CSSのcounter()関数の実装サンプル

@2019/05/10

本日はCSSのcounter()関数の使い方を少し話していきたいと思います。
WEBページで順番などを表示する場合、直接番号をテキストで書くことがもちろんできます。
なお、ケースによって不便を招くこともあります。
例えば、コンテンツを番号を1～10付けてページに表示させるように作りました。そのあとに3番目のコンテンツを消したい場合、元の4番を3番に修正が必要となり、元の5番を4番に、つまり元4番～元10番のすべての番号を1個にずれるように修正しなければならない。
この時はcssのcounter()関数を使ったらスムーズに対応できる。

早速ですが、サンプルコードをここに載せて、ご参考ください。もちろん、コピペで使えます。

サンプル１：数字を順番につけて表示


<html>
<head>
<style>
.Number--decimal {
  counter-reset: list-number;
  list-style: none;
  padding: 0;
}

.Number--decimal__item:before {
  content: counter(list-number);
  counter-increment: list-number;
}
</style>
</head>
<body>
<ol class="Number--decimal">
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
  <li class="Number--decimal__item">順序付きリスト</li>
</ol>
</body>
</html>

上記、

content: counter(list-number);

でcounter関数の引数がlist-number一つしかないですが、実は第二引数を省略しています。省略しない書き方は下記です。

content: counter(list-number,decimal);

共通の書き式：content: counter(list-number, 表示形式);
ここの第二引数は以下の種類があります。


decimal　→数字（初期値）
decimal-leading-zero　→0つき数字（例：01、02、03）
lower-roman　→ローマ数字（小文字）（例：ⅰ、ⅱ、ⅲ）
upper-roman　→ローマ数字（大文字）（例：Ⅰ、Ⅱ、Ⅲ）
lower-alpha　→アルファベット（小文字）（例：a、b、c）
upper-alpha　→アルファベット（大文字）（例：A、B、C）
cjk-ideographic　→漢数字（例：一、二、三）
hiragana　→ひらがな（例：あ、い、う）
katakana　→カタカナ（例：ア、イ、ウ）
hiragana-iroha　→いろは順（例：い、ろ、は）
katakana-iroha　→イロハ順（例：イ、ロ、ハ）

また、状況によって、第1位,第2位・・・のような順番を付けたい場合があります。下記のように書ける。

content: "第"counter(list-number)"位";

おまけで、①②…のような表示方法を掲載します。


<html>
<head>
<style>
.Number--en {
  counter-reset: en-counter;
  list-style: none;
  padding: 0;
}

.Number--en__item {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}
.Number--en__item:before {
  content: counter(en-counter);
  counter-increment: en-counter;
  background-color: #bada55;
  color: #222;
  display: block;
  float: left;
  line-height: 22px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}
</style>

</head>
<body>
<ol class="Number--en">
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
  <li class="Number--en__item">順序付きリスト</li>
</ol>
</body>

</html>

上記、CSSのcounter()関数の使い方でした。コピぺーでご利用できるので、ぜひお試してみてください。
また、便利ジャパンサイトに上記の技術を利用し、今後のどこのタイミングで活用したいと考えております。ぜひご覧ください。

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/317.html

閉じる

CSSのcounter()関数の実装サンプル_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！