UI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit
Post on:2024年12月5日
sponsors
ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。
このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。
Orbitの特徴
Orbitは、サークル・放射状のラジアルUIを実装するために設計された初の汎用CSSフレームワークです。CSSの機能（cos(), sin()など）を使用してサークル・放射状のレイアウトを簡単に実装できます。
ランディングページをはじめ、ナビゲーションに使用したり、ダッシュボードや円形データなどで、ユニークで視覚的に魅力的で直感的なレイアウトを作成できます。
CSSの三角関数（sin(), cos(), tan()）はすべてのブラウザにサポートされています。詳しくは下記をご覧ください。
ラジアルUIの利点
- 円形レイアウト: あらゆる要素をサークル・放射状、または曲線状のパターンで配置できます。
- 中心にフォーカス: 円の中心はフォーカスとして機能します。
- 対称性: 放射状のUIは対称性を示し、バランス感覚を生み出します。
- 角度関係: 要素は互いに対して特定の角度で配置されます。
- スペース効率: ラジアルUIを使用すると画面領域を効率的に使用できます。
サークル・放射状のUIを実装するには、角度や半径や距離などを計算するため通常はJavaScriptなど他の言語に頼る必要がありますが、Orbitを使用するとCSSだけでこれらのUIを実装できます。
放射状のプログレスバーやテキストを放射状に配置することもOrbitでは簡単です。HTMLとCSSなので、テキストを変更したり、カラーやサイズを変更するのも簡単です。
また、複数の異なる要素をカプセルとして放射状に配置することもできます。
Orbitのデモ
まずは、Orbitのページ自体がOrbitでサークル・放射状のレイアウトで実装されています。
デモも用意されています。
Orbitの使い方
Orbitの使い方は、簡単です。
まずは、GitHubからorbit.cssとorbit.jsをダウンロードします。
もしくは、CDNからも利用できます。
- https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css
- https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js
使用するHTMLファイルに、外部ファイルとして記述します。
|
1 2 3 4 |
<head> <link rel="stylesheet" href="path/to/orbit.css"> <script src="path/to/orbit.js"></script> </head> |
CDNを利用する場合は、下記のように記述します。
|
1 2 3 4 |
<head> <link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css"> <script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script> </head> |
あとは、divなどの要素にclassを追加するだけです。
|
1 2 3 4 5 6 7 8 9 |
<div class="bigbang"> <div class="gravity-spot"> <div class="orbit"> <div class="satellite">1</div> <div class="satellite">2</div> <div class="satellite">3</div> </div> </div> </div> |
.bigbangはOrbitの親コンテナでレイアウトのベースとして機能します。.gravity-spotは放射状レイアウト内でOrbit要素を整理するために機能します。それらの中に.orbitを入れて円形バスを定義します。要素は.satelliteに沿って配置されます。
より詳しく知りたい人はドキュメントをご覧ください。
sponsors
