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

Post on:2020年5月27日

sponsorsr

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

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

CSS Layoutの特徴

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

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

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

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

HTML

<div>    <!-- Left content -->    <div>        ...    </div>    <!-- Right content -->    <div>        ...    </div></div>

<divstyle="display: flex;">

<divstyle="flex: 1;">

...

</div>

<divstyle="flex: 1;">

...

</div>

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

Layout -レイアウトの一覧

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

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

Display -UI要素の一覧