リンク
目的
CSSの疑似クラス nth-child / nth-last-child / nth-of-type / nty-last-of-type について、
感覚的に理解するためのジェネレータです。 CSSの学習にご活用ください。
使い方
- 縦方向に表示する要素の数を入力する。
- 横方向に表示する要素の数を入力する。
- テストしたい擬似クラスを選択する。
- 擬似クラスのカッコ内の指定方法を入力する。(odd、even、3n+1など)
- 生成された要素をクリックすると、擬似クラスの対象外に指定することができる。
背景
Vue.jsの練習用に、かんたんなジェネレータを作成しようと思いました。
nth-of-typeのジェネレータだったら、自分の仕事でも使えるし、うまくいけば広告収入も得られるんじゃ？と考えて作成してみました。
（後々ググったら、すでに作ってる人いましたけどね。）
感想
おもってたよりは時間かかったけど、
リアクティブなJavaScriptフレームワークや、flexboxや、Github Pagesのおかげで、
こういうジェネレータを作って公開するのがすごく楽になったのだと思います。
自分のしごとのスタイルにあわせた形の、自分用のジェネレータが気軽につくれるのはいいことだと思いました。
お願い
収益化の知識が一切なく、経験がほしいので、よかったら広告クリックしてください。
ていうか収益化の知識とかコメントください。
あと、ジェネレータについても、ここをこうしたらもっとわかりやすいとかのアドバイスもぜひ！
（スマホ用に調整してないので、スマホからだとUI微妙ですね。時間あるときに改善します。）