どうも！LSSです！！
昨日の記事のあれ。
マリオに触発されて、とりあえず「クリックで動き出す」部分だけ作れて、入口に到達したつもりになっていましたが、「当たり判定」の方がCSSでは格別むずかしいですね^^;
これまた見当もつかないｗｗｗ
で、ソースは見ない方針で、でも検索はかけてみると、
のページに行きあたりました。
なるほど…？
自分はまだ十分理解したわけではありませんが、どうやらマリオでいうと、
「→を押した時点で、そのままだと〇秒後にクリボーに当たってやられるアニメーションがセットされ、ジャンプで回避するとやられるアニメーションをキャンセルする」
ような仕組みを作れば可能、という事のようです…？
が、それはそれとして、別に気になった部分がありました。
「え！？CSSにカウンターがあるの！？」
CSSのカウンター使用例
まず、試しに書いてみたコードから。
コード
<style><!--
.cnt{counter-increment:nmb;}
.cnt:after{content:counter(nmb);}
--></style>
<div class="cnt">てすと</div>
<div class="cnt">てすと</div>
<div class="cnt">てすと</div>
<div class="cnt">てすと</div>
<div class="cnt">てすと</div>
<div class="cnt">てすと</div>
<div class="cnt">てすと</div>
このコードを表示すると…
のようになります。
番号付きリスト
↑はてなブログでいうとコレ、HTMLタグでいうと<ol>タグみたいな事ができて、なおかつ自由が利きそうです！
詳しくは↓
.cnt{counter-increment:nmb;}
.クラス名{counter-increment:変数名;}
…と<style>タグ内に書いておくと、そのクラス名を持つ要素が出てくる度にカウントが１増えます。
カウンターは複数利用する事もできて、任意の名前をつけた変数で管理します。（今回の例ではnmbとしました）
.cnt:after{content:counter(nmb);}
このカウンター変数、CSSのプロパティ指定に使えたら面白そうなんですが（要素が出てくる度に少しづつ色が変わるとか出来そう…だったのに）、残念ながら今のところは実質、content（前か後ろに実際にそのカウントを表示する）ぐらいしか使えないようです^^;
今回は:afterに当ててみました。
.クラス名:after{content:counter(変数名);}
という書き方ですね。
こうしておいた上で、最初のコードのように
<div class="cnt">てすと</div>
をただ並べるだけで、「てすと」の後に連番がつきます！
（afterをbeforeに変えると「1てすと 2てすと」のようになります。）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
