制作日: 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の学習やコーディングの際にご活用ください。
- 縦方向に表示する要素の数を入力する。
- 横方向に表示する要素の数を入力する。
- テストしたい擬似クラスの種類を選択する。
- 擬似クラスのカッコ内の指定方法を入力する。
- 生成された要素をクリックすると、擬似クラスのカウント対象外に指定することができる。