CSSで作る二進計算機
はじめに
この記事は、「'25 UECプログラミング教室 アドベント・カレンダー」の12月9日分の記事です。
昨日はInTheBloom氏のgVimのススメ + 私のVim操作でした。ご紹介いただきありがとうございました。
私の怪文書よりも他の皆さんの素晴らしい記事をご覧になってください。よろしくお願いします。
イントロ
早速ですがこちらをご覧ください。
八つの0が出てきます。0をクリックすると右の数字が動きます。
勘のいい皆様はもうお気づきでしょうが、二進数の計算機なんです。
そしてソースコードをご覧ください。javascriptは一切使用しておりません。
そう。これらは主にcssのcounterを使って作られたものです。
解説
まず初めに知っておいて欲しいのがcss nesting。scssのようにcssを入れ子にできます(やったことない)。
<div class="binary">の中に<summary>入りの<details>がやっつ入っています。
<details>は個人的にかなり好きなhtmlの要素で、普段は入れ子にした<summary>の中身が表示されるものの、<summary>をクリックすると<summary>に並列して<details>に入った中身が表示されるものです。表示中には<details open>になります。一方、css functionで並列する要素数を出してくれるsibling-index()と現在要素の番号を出すsibling-count()で<details open>のところだけcss counterを動かします。そうするとこれができるわけです。
感想
というわけでcssはどんどん色々できるようになっているわけです。
cssの面白そうで個人的にやってみたいなと思った要素は他にも、
css関数のattr()やif()、counter()、counters()など。
css function、css varidatesなど。
時間ができたら試してみたいです。
大変な駄文、失礼しました。実のところ、作ったものを見せびらかしたかっただけなのです。
以上。それでは、
* {--merry: 'xmas';}
p.s. リンク間違えてました。すみません。
明日はnzp89氏のGitのイメージの記事だそうです。よろしくお願いします。
Discussion