Help us understand the problem. What is going on with this article?

Vue.jsでnth系擬似クラスのジェネレータを作成しました。

リンク

nth-of-type generator

目的

CSSの疑似クラス nth-child / nth-last-child / nth-of-type / nty-last-of-type について、
感覚的に理解するためのジェネレータです。 CSSの学習にご活用ください。

使い方

  1. 縦方向に表示する要素の数を入力する。
  2. 横方向に表示する要素の数を入力する。
  3. テストしたい擬似クラスを選択する。
  4. 擬似クラスのカッコ内の指定方法を入力する。(odd、even、3n+1など)
  5. 生成された要素をクリックすると、擬似クラスの対象外に指定することができる。

背景

Vue.jsの練習用に、かんたんなジェネレータを作成しようと思いました。
nth-of-typeのジェネレータだったら、自分の仕事でも使えるし、うまくいけば広告収入も得られるんじゃ?と考えて作成してみました。
(後々ググったら、すでに作ってる人いましたけどね。)

感想

おもってたよりは時間かかったけど、
リアクティブなJavaScriptフレームワークや、flexboxや、Github Pagesのおかげで、
こういうジェネレータを作って公開するのがすごく楽になったのだと思います。
自分のしごとのスタイルにあわせた形の、自分用のジェネレータが気軽につくれるのはいいことだと思いました。

お願い

収益化の知識が一切なく、経験がほしいので、よかったら広告クリックしてください。
ていうか収益化の知識とかコメントください。
あと、ジェネレータについても、ここをこうしたらもっとわかりやすいとかのアドバイスもぜひ!

(スマホ用に調整してないので、スマホからだとUI微妙ですね。時間あるときに改善します。)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away