お断り

「 CSS の縄張り」は日本人向けに書いたため、英語を指定しても日本語で表示されます。時間ができた時に英訳します。

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 で作成しているので、最新のモダンブラウザでないと正しく表示されません。以下のブラウザでご覧下さい。

デモ

キーボード

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

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

カレンダー

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

アナログ時計

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