Proviso

"Territory of CSS" is for Japanese, therefore this category is written by Japanese language. When I have a time, I will translate to English. Demo pages have no probrems for seeing.

HTML & CSS & Javascript

HTML と Javascript と CSS にはそれぞれの守備範囲があります。文書構造を HTML のタグで表現して、CSS でその装飾方法を指定。ユーザー操作に応じて処理を動的に行う場合は Javascript に任せるといった具合です。

CSS がまだ貧弱だった頃は、背景色が徐々に変化するアニメーション処理を Javascript で実装することもありました。現在の CSS は強力で、アニメーション処理は勿論、折り畳みメニューの開閉やタブの切り替え処理を CSS だけで実装可能で、かつて Javascript が分担していた縄張りをどんどん浸食しています。

そこで、CSS だけで一体どこまで実装できるのかについて研究してみました。CSS の可能性を追求する事で、HTML, CSS, Javascript それぞれの縄張りを明確にしてみようという試みです。

紹介したデモページへ移動した後、そのページのソースコードをご覧下さい。次の二点が確認できると思います。

1. Javascript が使われてない事
2. HTML の縄張りが減っている事

HTML の縄張り

「HTML の縄張りが減っている」件について補足します。Web サイトでキーボードやカレンダーを実装する場合、それらは HTML タグで構成されます。タグの役割は文書構造を指定する事ですが、以下のものは文書構造ではありません。

• キーボードのキーに表示される文字
• カレンダーの日付
• 時計の文字盤の数字

文書構造は HTML の縄張りですが、文書構造でないならその文字を Javascript や CSS が分担していても差し支えないという訳です。

キーボードやカレンダーは、「大きなひとつのパーツ」と見做せます。だとすると、パーツ内に表示される文字はデザインの一部と考えられます。デザインの範疇であるなら CSS で扱うのは自然だと言えるでしょう。そのような理由から、文書構造以外の文字列は可能な限り CSS に管理させています。

注記

本記事の目的が「CSS の可能性を追求する」事なので、現時点で最大能力を発揮できる CSS3 でデモを作成しています。本文中で「CSS」とある時は、「CSS3」と読み替えて下さい。CSS3 が対象なので、HTML も HTML5 を意味します。

HTML5 + CSS3 で作成しているので、最新のモダンブラウザでないと正しく表示されません。以下のブラウザでご覧下さい。

Demo

Keyboard

HTML タグで実装した キーボードです。フラット配列と QWERTY 配列の切り替えまで実装してみました。キーを押した時の処理だけが Javascript の縄張りになるので Javascript の実装量が減り、バグの可能性とメンテナンスコストが減るメリットがあります。

デモでは Javascript を使ってないため、キーをクリックしても何も起きません。

Calendar

カレンダーを表示させるライブラリは数多ありますが、Javascript を使わないものは珍しいと思います。ソースコードを見た時、一瞬だけ不思議な感覚を味わえるでしょう。

Analog Clock

HTML タグで実装した アナログ時計です。