よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ

Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。

フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。

サイトのキャプチャ

CSS Layout
CSS Layout -GitHub

CSS Layoutの特徴

CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。
MITライセンスで、商用プロジェクトでも無料で利用できます。

CSS Layoutの特徴

CSS Layout

  • 依存関係は一切無し
  • フレームワークは必要無し
  • Flexboxなど、現代の実装状況に合わせて使用
  • ピュアCSSで実装、CSSハックは無し
  • 実際の使用例
  • MITライセンス

60種類以上のレイアウトやUIコンポーネントの実装コードが揃っています。

CSS Layoutの特徴

CSS Layout

コードは各デモページから、簡単にコピペで利用できます。

サイトのキャプチャ

Sidebar

CSSで実装するレイアウト・UIコンポーネント

CSS Layoutには2019年12月現在、61種類のレイアウト・UIコンポーネントが揃っています。

サイトのキャプチャ

CSS Layout Patterns

HTMLとCSSはそのレイアウトとUIコンポーネントだけを実装するためのコードで、余分なコードは一切ありません。その中からいくつか紹介します。

サイトのキャプチャ

Sidebar

サイトのキャプチャ

Split screen

サイトのキャプチャ

Sticky header

サイトのキャプチャ

Accordion

サイトのキャプチャ

Cookie banner

サイトのキャプチャ

Floating label

sponsors

top of page

©2020 coliss