シンプルなHTMLでダークモード対応、Webページを簡単に実装するためのclassレス超軽量フレームワーク -SPCSS
Post on:2020年12月16日
sponsors
HTMLは非常にシンプルな実装で、テキストベースのWebページをさくっと実装するための超軽量でシンプルなclassレスの超軽量CSSフレームワークを紹介します。
HTMLにclassは一切不要です、外部CSSを記述するだけで簡単に利用できます。ダークモードにも対応しており、カスタマイズも簡単。テキストベースのドキュメントとか、シンプルなブログや自己紹介ページなど、備えておくと便利です。
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も非常にシンプルです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<body> <h1>SPCSS Demo</h1> <p> SPCSS is a simple and minimal stylesheet for simple text-based websites. To learn more about it and how to use it, visit <a href="https://github.com/susam/spcss">github.com/susam/spcss</a>. </p> <p> This page demonstrates how some common HTML elements are styled with this stylesheet. </p> <h2 id="code-block">Code Block<a href="#code-block"></a></h2> <p> Here is a code block that displays the famous "hello, world" program written in C: </p> <pre> <code>#include <stdio.h> int main() { printf("hello, world\n"); return 0; }</code> </pre> <!-- 以下、略 --> |
SPCSSの使い方
使い方は、簡単です。
HTMLファイルを用意し、外部ファイルを加えるだけで完成です。
Step 1: 外部ファイル
head内に、下記を記述するだけです。
|
1 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spcss@0.5.0"> |
カスタマイズ
カスタマイズが必要な場合は、sp.cssをダウンロードしてご利用ください。
sponsors
