ターミナルのシンプルなUIが好きな人に！ モダンでミニマルなCSSの超軽量フレームワーク -Terminal CSS
Post on:2023年11月13日
sponsors
ターミナルのUIを模した、モダンでミニマルなCSSの超軽量フレームワークを紹介します。
ターミナルで見かけるようなデザインのUIコンポーネントが豊富に揃っており、ライトテーマ・ダークテーマもサポートされています。
Terminal CSS
Terminal CSS -GitHub
Terminal CSSの特徴
Terminal CSSは、ターミナル愛好家のためのモダンでミニマルなCSSのフレームワークです。ソースはCSSで記述されており、アクセシブルで、非常に軽量（3k gzip）です。
MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。
個人のWebサイトやブログ、サイドプロジェクトに最適です。
Terminal CSSの使い方
Webpackなどを使用する場合は、npm i terminal.cssでインストールするだけです。
|
1 |
import 'terminal.css' |
また、Webページに使用する場合は、HTMLに外部ファイルとして記述します。
|
1 |
<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css" /> |
Terminal CSSのコンポーネント
Terminal CSSにはたくさんのUIコンポーネントが用意されており、通常のWebサイトやブログなどのコンポーネントが揃っています。
まずは、グリッドシステムとナビゲーション。
リスト、コンテンツのテーブル
タイポグラフィ
テーブル
Terminal CSSでは、さまざまな特殊要素もサポートしています。
引用、ターミナルプロンプト
フォーム
プログレスバー、ボタン
カード、タイムライン
Terminal CSSでは、Highlight.jsのテーマが組み込まれています。
Highlight.js
sponsors
