よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
Post on:2020年5月27日
sponsors
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。
すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。
ブックマークや、スニペットに登録しておくと便利ですね。
CSS Layoutの特徴
CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。
- 依存は一切なし
- フレームワークも必要なし
- CSSハックもなし
- すべて実際の使用例
- MITライセンスで、商用プロジェクトでも無料で利用できます。
CSS Layoutの使い方
使い方は、簡単です。
レイアウトやUI要素の実際の表示を確認しながら、実装コードをコピペできます。
上部の「Source」をクリックすると、コードが表示されます。
実装コードは、下記のようになっています。
CSSはインラインで記述されているので、コピペでそのまま利用できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div style="display: flex;"> <!-- Left content --> <div style="flex: 1;"> ... </div> <!-- Right content --> <div style="flex: 1;"> ... </div> </div> |
CSS LayoutのレイアウトやUI要素91種類
CSS Layoutには、レイアウトやUI要素が91種類掲載されています（2020年5月現在）。よく見かけるものばかりなので、便利ですね。
Layout -レイアウトの一覧
Navigation -ナビゲーションの一覧
Input -フォームの入力要素の一覧
Display -UI要素の一覧
Feedback -インタラクション要素の一覧
sponsors
