JSONをHTML/CSSで表現する
突然JSONをHTML/CSSでいい感じに表現したくなったのでやってみた。
例
<div class="json"> <div class="js-value js-object"> <div class="element"> <div class="js-key">key1</div> <div class="js-value js-string">value1</div> </div> <div class="element"> <div class="js-key">key2</div> <div class="js-value js-object"> <div class="element"> <div class="js-key">key3</div> <div class="js-value js-number">12345</div> </div> <div class="element"> <div class="js-key">key4</div> <div class="js-value js-array"> <div class="element"> <div class="js-value js-string">A</div> </div> <div class="element"> <div class="js-value js-string">B</div> </div> <div class="element"> <div class="js-value js-number">3</div> </div> <div class="element"> <div class="js-value js-object"> <div class="element"> <div class="js-key">fuga</div> <div class="js-value js-number">12345</div> </div> <div class="element"> <div class="js-key">hoge</div> <div class="js-value js-number">12345</div> </div> </div> </div> <div class="element"> <div class="js-value js-string">4</div> </div> </div> </div> <div class="element"> <div class="js-key">key6</div> <div class="js-value js-string">めっちゃ長い文字列ABCDEFGめっちゃ長い文字列ABCDEFGめっちゃ長い文字列ABCDEFGめっちゃ長い文字列ABCDEFG</div> </div> </div> </div> </div> </div>
表示結果
解説
箇条書きで簡潔に
- 1つの要素は<div class="element">で表現している
- キーは<div class="js-key">, 値は<div class="js-value 型の名前">で表現。型の名前は以下の通り
- js-string ... 文字列型
- js-number ... 数値型
- js-boolean ... 真偽型
- js-array ... 配列
- js-object ... オブジェクト
- js-nullを忘れてた…(あとでやる)
ここがすごいの
CSSのafter, before要素を使ってるので「"」や「,」「{」「[」をつけなくてもいい
誰が得するの?
...