ターミナルのシンプルなUIが好きな人に! モダンでミニマルなCSSの超軽量フレームワーク -Terminal CSS
Post on:2023年11月13日
ターミナルのUIを模した、モダンでミニマルなCSSの超軽量フレームワークを紹介します。
ターミナルで見かけるようなデザインのUIコンポーネントが豊富に揃っており、ライトテーマ・ダークテーマもサポートされています。
![ターミナルのUIが好きな人に! モダンでミニマルなCSSのフレームワーク -Terminal CSS](http://coliss.com/wp-content/uploads-202304/2023111210@2x.gif)
Terminal CSS
Terminal CSS -GitHub
Terminal CSSの特徴
Terminal CSSは、ターミナル愛好家のためのモダンでミニマルなCSSのフレームワークです。ソースはCSSで記述されており、アクセシブルで、非常に軽量(3k gzip)です。
MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202304/2023111211-01@2x.png)
個人の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のコンポーネント](http://coliss.com/wp-content/uploads-202304/2023111211-02@2x.png)
![Terminal CSSのコンポーネント](http://coliss.com/wp-content/uploads-202304/2023111211-03@2x.png)
リスト、コンテンツのテーブル
![Terminal CSSのコンポーネント](http://coliss.com/wp-content/uploads-202304/2023111211-04@2x.png)
タイポグラフィ
![Terminal CSSのコンポーネント](http://coliss.com/wp-content/uploads-202304/2023111211-05@2x.png)
テーブル
Terminal CSSでは、さまざまな特殊要素もサポートしています。
![Terminal CSSのコンポーネント](http://coliss.com/wp-content/uploads-202304/2023111211-06@2x.png)
引用、ターミナルプロンプト
![Terminal CSSのコンポーネント](http://coliss.com/wp-content/uploads-202304/2023111211-07@2x.png)
フォーム
![Terminal CSSのコンポーネント](http://coliss.com/wp-content/uploads-202304/2023111211-08@2x.png)
プログレスバー、ボタン
![Terminal CSSのコンポーネント](http://coliss.com/wp-content/uploads-202304/2023111211-09@2x.png)
カード、タイムライン
Terminal CSSでは、Highlight.jsのテーマが組み込まれています。
![Terminal CSSのコンポーネント](http://coliss.com/wp-content/uploads-202304/2023111211-10@2x.png)
Highlight.js
sponsors