シンプルなHTMLでダークモード対応、Webページを簡単に実装するためのclassレス超軽量フレームワーク -SPCSS

HTMLは非常にシンプルな実装で、テキストベースのWebページをさくっと実装するための超軽量でシンプルなclassレスの超軽量CSSフレームワークを紹介します。

HTMLにclassは一切不要です、外部CSSを記述するだけで簡単に利用できます。ダークモードにも対応しており、カスタマイズも簡単。テキストベースのドキュメントとか、シンプルなブログや自己紹介ページなど、備えておくと便利です。

classレス超軽量フレームワーク -SPCSS

SPCSS -GitHub

SPCSSの特徴

SPCSSはclassレスで使用できる、テキストベースのサイトを実装するための超軽量CSSです。

  • ダークテーマをサポート(prefers-color-scheme: dark;)。
  • ライトモードのテキストカラーはブラック(#000)ではなく、ダークグレー(#333)に。
  • 一行が長くなりすぎないように<body>に最大幅を設定。
  • line-heightの値は増やして、読みやすくしました。
  • 見出しの上にマージンを増やして、前のコンテンツから目立つように区別します。
  • 見出しの下のマージンを少なくしたり、マージンのline-heightを低くすることで、後続のコンテンツとの関連付けをより強固にします。
  • セクションへの直接リンクの共有を簡単にするため、各見出しにアンカーリンクを設置。
  • コードブロックとブロッククォートの明るいグレーの背景。
  • コードの行が非常に長い場合コードブロックの外側にオーバーフローしないように設定。長い場合は、スクロール可能に。
  • コードブロック(<pre>)内でキーボード入力(<kbd>)の特別なスタイルのサポート。
  • 画像の幅は<body>要素の最大幅を超えないようにしてください。
  • <figure>要素と<figcaption>要素のシンプルなスタイル。
  • MITライセンスで、商用プロジェクトでも無料で利用できます。

SPCSSのデモ

実際の動作は、デモをご覧ください。
テキストベースのページで見かけるさまざま要素が実装されています。

サイトのキャプチャ

デモページ: ライトモード

ダークモードにも対応しています。

サイトのキャプチャ

デモページ: ダークモード

デモページのHTMLは、下記の通りです(一部のみ)。
CSSはclassレスなので、HTMLも非常にシンプルです。

SPCSSの使い方

使い方は、簡単です。
HTMLファイルを用意し、外部ファイルを加えるだけで完成です。

Step 1: 外部ファイル

head内に、下記を記述するだけです。

カスタマイズ

カスタマイズが必要な場合は、sp.cssをダウンロードしてご利用ください。

sponsors

top of page

©2021 coliss