CSSだけでHTMLは一切無し！Webページを構成するすべてのマークアップをCSSで構築するフレームワーク -CJSS

Post on:2019年8月2日

sponsorsr

当ブログで「CSSで実装できる」という言葉を使いますが、厳密に言うとHTMLが必要です。しかし、今回紹介するのは、HTMLのマークアップも、データも、そしてJavaScriptもCSSファイルに記述するCSSベースのフレームワークを紹介します。

かなり特殊なフレームワークです。body内にHTML要素を一切記述したくない時にいいかもしれません。

CJSS
CJSS -GitHub

CJSSの特徴

CJSSはすべてのデータ、マークアップ、スクリプト、そしてもちろんスタイルをCSSで構築するフレームワークです。

下記ページの内容はすべて、style.cssで構築されています。もちろん、中央にあるトグルボタンもCSSです。

CJSS

上記ページのbody内は、下記の通りです。

HTML

<body>  JS is required to view this page</body>

<body>

JSisrequiredtoviewthispage

</body>

マークアップをCSSで実装するには例えば、h1要素で見出しを実装する場合は下記のように記述します。

CSS

h1 {  --body: html(    これは見出しです  );}

h1{

--body:html(

これは見出しです

);

}

CJSSのデモ

デモでは、CJSSで実装されたページを確認できます。

See the Pen
cjss-example by Richard Ekwonye (@ekwonye)
onCodePen.

シンプルなデモも用意されています。

See the Pen
Page construction in CSS. by Scott Kellum (@scottkellum)
onCodePen.

CJSSの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

外部ファイル

<head>  ...  <script src="cjss.min.js"></script></head>

<head>

...

<scriptsrc="cjss.min.js"></script>

</head>

Step 2: HTML

HTMLは一切不要です。要素にマークアップを追加するには、CSSファイルで要素を選択します。

基本書式

--body: html(ここにマークアップ);

1	--body:html(ここにマークアップ);

Step 3: CSS

すべてのデータ、マークアップ、スクリプト、そしてスタイルをCSSで定義します。単一要素の記述は上記でh1の実装を紹介したので、コンポーネントの実装例を紹介します。

CSS

component {  --html:(    <h2>${yield}</h2>    <p>This is a component</p>  );}

component{

--html:(

<h2>${yield}</h2>

<p>Thisisacomponent</p>

);

}

上記のCSSは、下記のHTMLと同じです。

HTML

<component>  <h2>My Component</h2>  <p>This is a component</p></component>

<h2>MyComponent</h2>

<p>Thisisacomponent</p>

</component>

Step 4: JavaScript

CSSからJavaScriptを実行して、HTMLを操作することもできます。JavaScriptファイルに記述する必要はありません。

CSS

.item {  cursor: pointer;  --script: js(    function toggle() {      this.classList.toggle('active');    }    this.addEventListener('click', toggle );  );}

.item{

cursor:pointer;

--script:js(

functiontoggle(){

this.classList.toggle('active');

}

this.addEventListener('click',toggle);

);

}

Recnet Entry

Pickup Entry

Recommend

top of page

Movatterモバイル変換