よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout

最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。

すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。
ブックマークや、スニペットに登録しておくと便利ですね。

レイアウトやUI要素のCSSでの実装コードのまとめ -CSS Layout

CSS Layout
CSS Layout -GitHub

CSS Layoutの特徴

CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。

  • 依存は一切なし
  • フレームワークも必要なし
  • CSSハックもなし
  • すべて実際の使用例
  • MITライセンスで、商用プロジェクトでも無料で利用できます。

CSS Layoutの使い方

使い方は、簡単です。
レイアウトやUI要素の実際の表示を確認しながら、実装コードをコピペできます。

レイアウトのキャプチャ

Split Screen

上部の「Source」をクリックすると、コードが表示されます。

コードのキャプチャ

Split Screen

実装コードは、下記のようになっています。
CSSはインラインで記述されているので、コピペでそのまま利用できます。

CSS LayoutのレイアウトやUI要素91種類

CSS Layoutには、レイアウトやUI要素が91種類掲載されています(2020年5月現在)。よく見かけるものばかりなので、便利ですね。

Layout -レイアウトの一覧

Layout -レイアウトの一覧

Navigation -ナビゲーションの一覧

Navigation -ナビゲーションの一覧

Input -フォームの入力要素の一覧

Input -フォームの入力要素の一覧

Display -UI要素の一覧

Display -UI要素の一覧

Feedback -インタラクション要素の一覧

Feedback -インタラクション要素の一覧

sponsors

top of page

©2020 coliss