CSSのcounter-incrementを使ってリスト以外に番号を付ける方法

「counter-increment」というプロパティを初めて聞いたという方も多いかもしれません。「counter-increment」は、サンプルのように番号を自動的に付けるときに使われます。リスト（list-style-type: decimal）のような感じですね。「counter-increment」で番号を付ける対象を指定して、疑似要素を使って表示することになります。

疑似要素を使っているため、IE7以下は非対応ですのでご注意ください。

今回サンプルを２つ用意しました。

ではHTMLから順番に解説していきます。

HTML

HTMLはどちらのサンプルも同じで以下のようになっています。

<div class="divCount">
  <h4><a href="#">タイトル</a></h4>
  <p>内容</p>
</div>
<div class="divCount">
  <h4><a href="#">タイトル</a></h4>
  <p>内容</p>
</div>
<div class="divCount">
  <h4><a href="#">タイトル</a></h4>
  <p>内容</p>
</div>
<div class="divCount">
  <h4><a href="#">タイトル</a></h4>
  <p>内容</p>
</div>
<div class="divCount">
  <h4><a href="#">タイトル</a></h4>
  <p>内容</p>
</div>

今回は記事タイトルとその記事の内容を書いています。

jQuery

別にできなくてもいいのですが、jQueryを使ってdiv全体をクリックできるようにしてみました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
     $(".divCount").click(function(){
         window.location=$("h4 a",this).attr("href");
    });
});
</script>

クラス名divCountをクリックした際に、中にあるh4要素の中のa要素のリンク先にアクセスすることになります。

CSS（共通部分）

数字のところに「Google Web Fonts」のWebフォントを使いますので、head内に以下のコードを入れておきます。

<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>

続いて共通して使うCSSを先に。

p{
  margin: 0;
  padding: 10px 0;
  font-size: 15px;
  line-height: 150%;
}
a:link, a:visited{
  color: #0A6363;
  text-decoration: none;
}
a:active, a:hover{
  color : #b50;
}
h4{
  padding: 0;
  margin: 0;
  font-size: 16px;
}

この辺はサイトに合わせて変更していただければいいと思います。

この先はサンプルごとに解説します。

サンプル１

ボックスの上部に左右交互に番号を付けています。数字にはWebフォントを使っています。

CSSは次のようになります。後で１つずつ解説します。

.divCount{
  display: block;
  position: relative;
  width: 400px;
  margin: 30px;
  padding: 20px 30px 10px 30px;
  border-radius: 5px;
  background: #cadbad;
  counter-increment: divCount;
  cursor: pointer
}
.divCount:nth-of-type(odd){
  margin: 30px 30px 30px 50px;
}
.divCount:nth-of-type(even){
  margin: 30px 50px 30px 30px;
}
.divCount:hover{
  background: #b4cb8a;
}
.divCount:hover a{
  color: #b50;
}
.divCount:before{
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 30px;
  margin: 0;
  padding: 10px 5px;
  border-radius: 50%;
  background: #707332;
  color: #edeed8;
  font: normal 30px/1 'Luckiest Guy', cursive;
  text-align: center;
  content: counter(divCount);
}
.divCount:nth-of-type(odd):before{
  left: -20px;
}
.divCount:hover:before{
  background: #4d4f23;
  color: #dddfb4;
}

こんな感じになります。counter-incrementの他にも、CSS3セレクタ、擬似要素、Webフォントなど勉強になりそうなものを使っていますので、以下で解説していきます。

個別に解説

では個別に解説します。コード→解説の順になっています。

.divCount{
  display: block;
  position: relative;
  width: 400px;
  margin: 30px;
  padding: 20px 30px 10px 30px;
  border-radius: 5px;
  background: #cadbad;
  counter-increment: divCount;
  cursor: pointer
}

後で使う擬似要素に「position: absolute;」を使いますので、基準となるこのボックスには「position: relative;」を指定します。

「counter-increment: divCount;」で、このボックスに対してカウンタ名「divCount」を定義します。数字の表示には、後で紹介する疑似要素を使います。ここではカウントする対象を示すだけになります。

.divCount:nth-of-type(odd){
  margin: 30px 30px 30px 50px;
}
.divCount:nth-of-type(even){
  margin: 30px 50px 30px 30px;
}

奇数番目（odd）と偶数番目（even）の.divCountにそれぞれmarginを指定します。番号を左右交互に付けている関係で、奇数番目は左に偶数版目は右により多くのスペースを取っています。

.divCount:hover{
  background: #b4cb8a;
}
.divCount:hover a{
  color: #b50;
}

ボックス全体をクリックできるようにしますので、ボックスにマウスを乗せたときに背景やリンクの色が変化するようにしています。

.divCount:before{
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 30px;
  margin: 0;
  padding: 10px 5px;
  border-radius: 50%;
  background: #707332;
  color: #edeed8;
  font: normal 30px/1 'Luckiest Guy', cursive;
  text-align: center;
  content: counter(divCount);
}
.divCount:nth-of-type(odd):before{
  left: -20px;
}

番号の部分です。「content: counter(divCount);」で、先ほど指定したカウンタ名divCountが現れた番目の数が表示されます。ちなみに「counter-reset:カウンタ名;」でカウントをリセットします。

表示位置については、まず右から-20pxのところに配置するよう指定して、「.divCount:nth-of-type(odd):before」で奇数番目のみを左から-20pxに配置するよう指定します。

偶数の場合は右から-20px、奇数の場合は左から-20pxという風にそれぞれ指定してもいいのですが、「:nth-of-type」はIE8以下で非対応なので今回のようにしました。IE8以下の場合、すべて右から-20pxに表示されます。

.divCount:hover:before{
  background: #4d4f23;
  color: #dddfb4;
}

マウスを乗せたときの色の変化を指定します。

ということで１つ目のサンプルでした。

サンプル２

次は右下に大きな数字が表示されます。ある程度コンテンツがないと数字が途切れてしまいますので注意してください。

こちらの方が短いです。

.divCount{
  display: block;
  position: relative;
  width: 400px;
  margin: 30px;
  padding: 20px;
  border-radius: 5px;
  background: #b3e0f2;
  counter-increment: divCount;
  cursor: pointer;
}
.divCount:hover{
  background: #b4cb8a;
}
.divCount:hover a{
  color: #b50;
}
.divCount p{
  position: relative;
  z-index:100;
}
.divCount:before{
  position: absolute;
  z-index: 10;
  right: 20px;
  bottom: 0;
  color: #d0ecf7;
  font: bold 128px/1 'Luckiest Guy', cursive;
  text-align: center;
  content: counter(divCount2);
}
.divCount:hover:before{
  color: #cadbad;
}

個別に解説

それではこちらも個別に解説していきます。

.divCount{
  display: block;
  position: relative;
  width: 400px;
  margin: 30px;
  padding: 20px;
  border-radius: 5px;
  background: #b3e0f2;
  counter-increment: divCount;
  cursor: pointer;
}

サンプル１と同じように、後で使う擬似要素に「position: absolute;」を使いますので、基準となるこのボックスには「position: relative;」を指定します。「counter-increment: divCount;」で、このボックスに対してカウンタ名「divCount」を定義します。

.divCount:hover{
  background: #b4cb8a;
}
.divCount:hover a{
  color: #b50;
}

ボックス全体をクリックできるようにしますので、ボックスにマウスを乗せたときに背景やリンクの色が変化するようにしています。

.divCount p{
  position: relative;
  z-index:100;
}

次の擬似要素（大きな数字の部分）よりも優先して表示するために書いておきます。

.divCount:before{
  position: absolute;
  z-index: 10;
  right: 20px;
  bottom: 0;
  color: #d0ecf7;
  font: bold 128px/1 'Luckiest Guy', cursive;
  text-align: center;
  content: counter(divCount2);
}

右下にある大きな数字の部分です。「content: counter(divCount);」で、先ほど指定したカウンタ名divCountが現れた番目の数が表示されます。

内容を書いたテキストの下に表示されるよう「z-index」の値を「.divCount p」よりも小さくします。

.divCount:hover:before{
  color: #cadbad;
}

ボックスにマウスを乗せた際の数字の色になります。

ということで２つ目のサンプルでした。

さいごに

今回あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介しました。

個人的にもあまり使ったことがないのですが、使い方しだいで面白いものが作れそうです。