CSSだけでHTMLは一切無し！Webページを構成するすべてのマークアップをCSSで構築するフレームワーク -CJSS
Post on:2019年8月2日
sponsors
当ブログで「CSSで実装できる」という言葉を使いますが、厳密に言うとHTMLが必要です。しかし、今回紹介するのは、HTMLのマークアップも、データも、そしてJavaScriptもCSSファイルに記述するCSSベースのフレームワークを紹介します。
かなり特殊なフレームワークです。body内にHTML要素を一切記述したくない時にいいかもしれません。
CJSSの特徴
CJSSはすべてのデータ、マークアップ、スクリプト、そしてもちろんスタイルをCSSで構築するフレームワークです。
下記ページの内容はすべて、style.cssで構築されています。もちろん、中央にあるトグルボタンもCSSです。
上記ページのbody内は、下記の通りです。
|
1 2 3 |
<body> JS is required to view this page </body> |
マークアップをCSSで実装するには例えば、h1要素で見出しを実装する場合は下記のように記述します。
|
1 2 3 4 5 |
h1 { --body: html( これは見出しです ); } |
CJSSのデモ
デモでは、CJSSで実装されたページを確認できます。
See the Pen
cjss-example by Richard Ekwonye (@ekwonye)
on CodePen.
シンプルなデモも用意されています。
See the Pen
Page construction in CSS. by Scott Kellum (@scottkellum)
on CodePen.
CJSSの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <script src="cjss.min.js"></script> </head> |
Step 2: HTML
HTMLは一切不要です。要素にマークアップを追加するには、CSSファイルで要素を選択します。
|
1 |
--body: html(ここにマークアップ); |
Step 3: CSS
すべてのデータ、マークアップ、スクリプト、そしてスタイルをCSSで定義します。単一要素の記述は上記でh1の実装を紹介したので、コンポーネントの実装例を紹介します。
|
1 2 3 4 5 6 |
component { --html:( <h2>${yield}</h2> <p>This is a component</p> ); } |
上記のCSSは、下記のHTMLと同じです。
|
1 2 3 4 |
<component> <h2>My Component</h2> <p>This is a component</p> </component> |
Step 4: JavaScript
CSSからJavaScriptを実行して、HTMLを操作することもできます。JavaScriptファイルに記述する必要はありません。
|
1 2 3 4 5 6 7 8 9 |
.item { cursor: pointer; --script: js( function toggle() { this.classList.toggle('active'); } this.addEventListener('click', toggle ); ); } |
sponsors
