上の図は以前作成したコミックレイアウトを再作成したものだ。もっとその先へと目指したが、途中で問題が発生した。三分割の場合、左端の上から下方向へ並べて表示されるようだ。だが、モバイルのLandscapeだと上の図の右下のようになる。

これではレスポンシブで同じ順番に並べることは不可能のようなので、「masonry」を使って新規に作成してみることにした。ここでは敢えて深追いはしない。

「masonry」は左上から右方向へ並べていき、二段目からは画像の位置が高いものから順番に表示する。それ故、困ったことに1コマ跳んだ順番で画像を表示してしまうことがある。

各コマの幅や高さを一定にすれば、オーダーという指示を使って順番を指定できるのだが、それでは別ものになってしまう。デザイン的に不連続が好ましい。

そこで、コマ毎に順番の番号を振ることにした。余り目立たぬようにデザインした。CSS2より追加された「counter（カウンタ）」を使う。基本設定は「countercounter-reset」プロパティと「counter-increment」プロパティを使う。

この自動ナンバリング機能によって、使い方が広くなった。ワークフローとして図をページに挿入することができる。イメージの縦長と横長を並列できるのが良い。

「コミック2nd」に画像の横と縦のサイズを全て統一させたもので作っている。htmlの記述の順番に並んでくれる。