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

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

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

サイトのキャプチャ

CJSS
CJSS -GitHub


CJSSの特徴

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

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

サイトのキャプチャ

CJSS

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

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

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: 外部ファイル

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

Step 2: HTML

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

Step 3: CSS

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

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

Step 4: JavaScript

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

sponsors

top of page

©2024 coliss