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

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。

それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。

よく見かけるレイアウト・ナビゲーション・UIコンポーネントだけを実装する、HTMLとCSSのシンプルなコードのまとめ

CSS Layout
CSS Layout -GitHub

CSS Layoutの特徴

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

サイトのキャプチャ

CSS Layout

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

以前、紹介した際は60種類ほどでしたが、91種類にパワーアップしています。

サイトのキャプチャ

Patterns -CSS Layout

コードの利用は各デモページから。
右上のボタンで、デモとソースを切り替えることができます。

サイトのキャプチャ

Sticky Header

レイアウトやUIコンポーネントだけを実装するコード

2021年2月現在、91種類のレイアウト・UIコンポーネントが揃っています。

サイトのキャプチャ

Patterns -CSS Layout

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

サイトのキャプチャ

カードレイアウト

サイトのキャプチャ

同じ高さのコラム

サイトのキャプチャ

スティッキーセクション

サイトのキャプチャ

パンくず

サイトのキャプチャ

ドロワー

サイトのキャプチャ

検索ボックス

サイトのキャプチャ

中央揃え

サイトのキャプチャ

角にバッジ

サイトのキャプチャ

横に固定表示

sponsors

top of page

©2021 coliss