HTMLはシンプルなまま、classレスでモダンなWebページを簡単に作成できる超軽量CSSフレームワーク -dev.css
Post on:2026年6月9日
sponsorsr
プレーンなHTMLを使用して、モダンでレスポンシブ対応のWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。
ポートフォリオやブログ、プロトタイプなどをさくっと作成したい時に便利で、リセットCSSに利用してもよさそうです。
dev.cssの特徴
dev.cssはnew.cssにインスパイアされた、シンプルでclassレスの超軽量CSSフレームワークです。あらゆるプレーンなHTMLファイルをモダンでレスポンシブ対応のデザインにするために設計されました。
CSSファイルのミニファイされた容量は4.8Kbで、オプションのサイドバーやヘッダ固定やページトップに戻るなども用意されています。
- 超軽量4.8KbのCSSフレームワーク。
- 用意するのは、HTMLファイルのみ。
- マークダウンで生成されたHTMLのレンダリング。
- ポートフォリオやブログ、プロトタイプに最適。
- MITライセンスで、商用プロジェクトでも無料で利用できます。
dev.cssは、非常に複雑なサイト向けには設計されていません。しかし、より複雑なサイトを実装する際にこのdev.cssをベースにして利用することは可能です。
dev.cssのデモ
デモでは、HTMLのさまざまな要素のスタイルを確認できます。
デモページ: 見出し
デモページ: サイドバー
デモページ: 本文・ハイライト・リンク・リスト
デモページ: 引用・コード・定義リスト
デモページ: article要素
デモページ: テーブル・フォーム
dev.cssの使い方
dev.cssの使い方は、簡単です。
Step 1: 外部ファイル
HTMLでdev.cssを使用するには、HTMLファイルの<head>セクションに下記を追加するだけです。
|
1 2 3 |
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5"> </head> |
また、パッケージマネージャーを使用してnpmパッケージをプロジェクトに追加することもできます。下記のコマンドを実行すると、最新バージョンがプロジェクトに追加されます。
|
1 2 3 |
npm add @intergrav/dev.css # or pnpm add @intergrav/dev.css |
Step 2: HTML
あとは、HTMLでページを作成するだけです。classレスなので、HTMLでマークアップするだけでスタイルが適用されます。
Step 3: 拡張機能
dev.cssはWebページで使用するスタイルの基本的なセットのみ提供されています。必要に応じて拡張機能も用意されています。
header-oneline.css: 狭いビューポートでのヘッダ表示をコンパクトにします。header-sticky.css: ヘッダを固定表示し、常にビューポート上部に表示させますscroll-to-top.js: スクロールダウンしたときに、右下隅に「ページトップへ」ボタンを設置します。responsive-sidebar.js: ブレークポイントで自動的に開閉するサイドバーを設置します。
テーマも用意されており、カスタムカラーやフォントもサポートしています。themeフォルダにテーマがあり、head内のdev.cssの後にテーマ用のCSSを適用します。
|
1 2 3 4 |
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5"> <link rel="stylesheet" href="theme/night.user.css"> </head> |
テーマには、ナイト・デイ・カプチーノ・ターミナルなど、7種類が揃っています。
デモページ: ナイト
デモページ: ターミナル
デモページ: カプチーノ
sponsors
