のんびり猫プログラマの日常

プログラムのことを書くかもしれない?

 

【CSS3】画像に自動で連番を振るCSS

f:id:catprogram:20130518205652j:plain

元ネタはここです。CSSをダウンロードして使ってみました。

デモもありますよ。

Automatic Figure Numbering with CSS Counters

 ****************************

まずhtmlソースから見ていこう

articleで囲まれた部分にあるfigureクラスの画像がどんどんカウントされていくことになる。
画像の右寄せ・左寄せは、figure-right, figure-leftをfigureクラスに重ねて定義する。
キャプションはfigcaptionで定義する。

<article class="article">
  //articleで囲まれている部分から連番が始まる

  //---Fig.1  デフォルト--------------------
  <figure class="figure">
    <img src="にゃ~ん.jpg" /> 
    <figcaption>キャプション</figcaption>
  </figure>

  //---Fig.2  figure-leftクラスで左寄せ-----
  <figure class="figure figure-left">
    <img src="ビックリ.jpg" />
    <figcaption>左寄せ</figcaption>
  </figure>

  //---Fig.3  figure-rightクラスで右寄せ----
  <figure class="figure figure-right">
    <img src="ニッコリ.jpg" />
    <figcaption>右寄せ</figcaption>
  </figure>

</article>

<article>
 //---またFig.1から始まる------------------
  <figure>
    
  </figure>
  ・・・・・・・
</article>

****************************

次にCSSを見ていこう

counter-resetで変数をリセットするんだね。

・Pattern-1   変数(figures)が1にリセットされる。
・Pattern-2   変数+半角スペース+初期値で変数が初期値(ここでは0)にリセットされる。

//Pattern-1 
.article {
  ・・・
  counter-reset: figures;
}

//Pattern-2
.article {
  ・・・
  counter-reset: figures 0;
}

****************************

キャプションが現れるたびにcounter-incrementで要素のカウンタの値を進めている

.figure figcaption {
  ・・・
  counter-increment: figures;
}

****************************

contentで、キャプションの直前にカウントした変数を入れている。

'Fig.' を 'No.' にしたり '図' にしたりしてもいいですね。

.figure figcaption:before {
  content: 'Fig. ' counter(figures) ' - ';
}

****************************

そして実際の見え方はこうなります。モダンブラウザで見てね。

f:id:catprogram:20130518205540p:plain
デフォルト 幅100%

FIG.1が採番されてる。デフォルトだと画像幅が100%だね。


f:id:catprogram:20130518205526p:image:w250:left
左寄せ

 

 

左寄せされてるよ!FIG.2だね。

そうそう、寄せるのにfloatを使ってるので、clear="both"してから次の段落へ行こう。


f:id:catprogram:20130518205532p:image:w250:right
右寄せ

 

 

右寄せ。FIG.3になってる。

(・∀・)イイネ!!


CSSだけでこういうことができるのは、とてもありがたいです。
スクリプト書く手間が省けるね~。