ブログパーツとか: CSSシミュレータ（list-style-type）

2020年3月29日日曜日

CSSシミュレータ（list-style-type）

【使い方】textareaの中身（値）を下から順に消す（CSSは一番下が適用される）

<style>
#listDisplay {
    list-style-type: katakana-iroha ;
    list-style-type: hiragana-iroha ;
    list-style-type: katakana ;
    list-style-type: hiragana ;
    list-style-type: lower-greek ;
    list-style-type: upper-roman ;
    list-style-type: lower-roman ;
    list-style-type: upper-alpha ;
    list-style-type: lower-alpha ;
    list-style-type: cjk-ideographic ;
    list-style-type: decimal-leading-zero ;
    list-style-type: decimal ;
    list-style-type: square ;
    list-style-type: disc ;
    list-style-type: circle ;
    list-style-type: none ;
   }
</style>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F9e6a3f8215e534ba2b704686ae6d3ff8%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる日韓・日中歴史の真実</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Ff3800e155e3799141130e1cad729c659%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる「日韓併合」時代の真実</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Fccbb2f0f1afbd4335457f903a78b8d53%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる「日中戦争」時代の武士道精神</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Fe40d7b8389a20a3c9549a7a329d8ce69%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる「アジア解放」時代の日本精神</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F3e97635c8544dc4c362dd005dde92eee%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる「戦前日本」の真実</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F4e0ce015aeba42a9f2b924b272fa6c29%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる「大正・昭和初期」の真実</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F973193c6fe5dddefa29b16532b1ff0bd%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる「慰安婦問題」の真実</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Fd972ff55850082d658ecb3ed15482496%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる「日の丸で歓迎されていた」日本軍</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Fdc4c8b723c847573a383cc618ccd51ae%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる「ＧＨＱの日本人洗脳計画」の真実</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Feabdcc4f7209bba04361d7758fd80da0%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる「戦前の昭和天皇と皇室」の真実</a></li>
<li><a href="https://hb.afl.rakuten.co.jp/hgc/0dc8ab51.9cb34df5.0dc8ab52.784fe5e5/?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2285a6594fad91348f23047741f7036a%2F%3Fscid%3Daf_pc_etc%26sc2id%3Daf_101_0_0" target="_blank" rel="nofollow noopener noreferrer" style="word-wrap:break-word;"  >【広告】ひと目でわかる皇室の危機 天皇家を救う秘中の秘</a></li>

HTML

<div id="listDisplay"></div>

<⚠textarea id="listTextarea" oninput="listSimulator();" style="height: 550px; width: 99%;"><style>
#listDisplay {
    list-style-type: katakana-iroha ;
    list-style-type: hiragana-iroha ;
    list-style-type: katakana ;
    list-style-type: hiragana ;
    list-style-type: lower-greek ;
    list-style-type: upper-roman ;
    list-style-type: lower-roman ;
    list-style-type: upper-alpha ;
    list-style-type: lower-alpha ;
    list-style-type: cjk-ideographic ;
    list-style-type: decimal-leading-zero ;
    list-style-type: decimal ;
    list-style-type: square ;
    list-style-type: disc ;
    list-style-type: circle ;
    list-style-type: none ;
   }
</style>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
<⚠/textarea><!--⚠は削除する-->

JavaScript

<script>
var listSimulator=function(){
    document.getElementById("listDisplay").innerHTML=document.getElementById("listTextarea").value;
   }
setTimeout("listSimulator()",0);
</script>