nth-of-type generator

制作日: 2019年9月

確認方法

URL: https://h40831.github.io/nth-of-type-generator/
Github Pagesにて公開してあります。
上記URLを開いてご確認ください。

開発環境

言語: HTML/CSS/JavaScript/Vue
OS: Mac OS
ツール: Sublime Text3 / Google Chrome

概要

Vueの学習ついでに、ジェネレーターをゼロからコーディングしてみました。
レスポンシブにも微妙に対応しておりますが、PCでの使用を想定しております。
OGP設定済みですので、SNSにも見栄えの良いリンクを貼っていただけます。
広告収入についての理解を深めるため、試験的にアド広告も導入しております。

目的

CSSの疑似クラス nth-child / nth-last-child / nth-of-type / nty-last-of-type について、素早く直感的に理解するためのジェネレータです。
業務上で上記疑似クラスを使用する際に、頭の中で結果を想像するのが面倒だったので作成しました。
CSSの学習やコーディングの際にご活用ください。

使い方

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