【CSS3】画像に自動で連番を振る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) ' - '; }
****************************
そして実際の見え方はこうなります。モダンブラウザで見てね。
FIG.1が採番されてる。デフォルトだと画像幅が100%だね。
左寄せされてるよ!FIG.2だね。
そうそう、寄せるのにfloatを使ってるので、clear="both"してから次の段落へ行こう。
右寄せ。FIG.3になってる。
(・∀・)イイネ!!
CSSだけでこういうことができるのは、とてもありがたいです。
スクリプト書く手間が省けるね~。