よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
Post on:2020年5月27日
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。
すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。
ブックマークや、スニペットに登録しておくと便利ですね。
![レイアウトやUI要素のCSSでの実装コードのまとめ -CSS Layout](http://coliss.com/wp-content/uploads-202002/2020052701.png)
CSS Layoutの特徴
CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。
- 依存は一切なし
- フレームワークも必要なし
- CSSハックもなし
- すべて実際の使用例
- MITライセンスで、商用プロジェクトでも無料で利用できます。
CSS Layoutの使い方
使い方は、簡単です。
レイアウトやUI要素の実際の表示を確認しながら、実装コードをコピペできます。
![レイアウトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020052702-01.png)
上部の「Source」をクリックすると、コードが表示されます。
![コードのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020052702-02.png)
実装コードは、下記のようになっています。
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 -レイアウトの一覧](http://coliss.com/wp-content/uploads-202002/2020052703-01.png)
Layout -レイアウトの一覧
![Navigation -ナビゲーションの一覧](http://coliss.com/wp-content/uploads-202002/2020052703-02.png)
Navigation -ナビゲーションの一覧
![Input -フォームの入力要素の一覧](http://coliss.com/wp-content/uploads-202002/2020052703-03.png)
Input -フォームの入力要素の一覧
![Display -UI要素の一覧](http://coliss.com/wp-content/uploads-202002/2020052703-04.png)
Display -UI要素の一覧
![Feedback -インタラクション要素の一覧](http://coliss.com/wp-content/uploads-202002/2020052703-05.png)
Feedback -インタラクション要素の一覧
sponsors