よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Post on:2021年2月18日
sponsorsr
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。
それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。
CSS Layoutの特徴
CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。
MITライセンスで、商用プロジェクトでも無料で利用できます。
- 依存関係は一切無し
- フレームワークは必要無し
- ピュアCSSで実装、CSSハックは無し
- Flexboxなど、現代の実装状況に合わせて使用
- 実際の使用例
- MITライセンスで、商用プロジェクトでも無料で利用できます
以前、紹介した際は60種類ほどでしたが、91種類にパワーアップしています。
コードの利用は各デモページから。
右上のボタンで、デモとソースを切り替えることができます。
レイアウトやUIコンポーネントだけを実装するコード
2021年2月現在、91種類のレイアウト・UIコンポーネントが揃っています。
HTMLとCSSはそのレイアウトとUIコンポーネントだけを実装するためのコードで、余分なコードは一切ありません。その中からいくつか紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div style=" display: flex; /* Put a card in the next row when previous cards take all width */ flex-wrap: wrap; margin-left: -8px; margin-right: -8px; "> <!-- A card with given width --> <div style=" /* There will be 4 cards per row */ flex-basis: 25%; padding-left: 8px; padding-right: 8px; "> ... </div> <!-- Repeat other cards --> ... </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div style="display: flex;"> <!-- Column --> <div style=" flex: 1; /* Space between columns */ margin: 0 8px; /* Layout each column */ display: flex; flex-direction: column; "> <!-- Cover --> ... <!-- Content --> <div style=" /* Take available height */ flex: 1; "> ... </div> <!-- Button sticks to the bottom --> ... </div> <!-- Repeat with other columns --> ... </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div style=" height: 100%; overflow: scroll; "> <section style=" /* Take full size */ height: 100%; width: 100%; /* Stick to the top */ position: sticky; top: 0; "> ... </section> <!-- Repeat other sections --> ... </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div style=" /* Content is centered vertically */ align-items: center; display: flex; "> <!-- Breadcrumb item --> <a>...</a> <!-- Separator --> <div style="margin: 0 8px;">/</div> <!-- Repeated items and separators --> ... </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div style=" /* Container takes full size */ height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999; "> <!-- Backdrop --> <div style=" /* Take full size */ height: 100%; left: 0; position: fixed; top: 0; width: 100%; /* User still can see the content of main page */ background-color: rgba(0, 0, 0, 0.5); z-index: -1; " /> <!-- Sidebar --> <div style=" /* Take full height */ height: 100%; left: 0; position: fixed; top: 0; width: 200px; /* Background */ background-color: #fff; "> ... </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div style=" display: flex; /* If you want to place the icon before the text input */ flex-direction: row-reverse; /* Border */ border: 1px solid rgba(0, 0, 0, 0.3); "> <!-- Text input --> <input type="text" style=" border-color: transparent; /* Take available width */ flex: 1; " /> <!-- Search icon sticks to the left or right --> ... </div> |
|
1 2 3 4 5 6 7 |
<div style=" align-items: center; display: flex; justify-content: center; "> ... </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div style=" position: relative; "> <!-- Docked at the top right corner --> <div style=" position: absolute; right: 0; top: 0; transform: translate(50%, -50%); /* Center the content */ align-items: center; display: flex; justify-content: center; "> ... </div> ... </div> |
|
1 2 3 4 5 6 7 8 9 |
<!-- Fixed at the middle of side --> <div style=" right: 0; position: fixed; top: 50%; transform: translate(0px, -50%); "> ... </div> |
sponsors
