よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Post on:2019年12月13日
sponsors
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。
フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。
CSS Layoutの特徴
CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。
MITライセンスで、商用プロジェクトでも無料で利用できます。
- 依存関係は一切無し
- フレームワークは必要無し
- Flexboxなど、現代の実装状況に合わせて使用
- ピュアCSSで実装、CSSハックは無し
- 実際の使用例
- MITライセンス
60種類以上のレイアウトやUIコンポーネントの実装コードが揃っています。
コードは各デモページから、簡単にコピペで利用できます。
CSSで実装するレイアウト・UIコンポーネント
CSS Layoutには2019年12月現在、61種類のレイアウト・UIコンポーネントが揃っています。
HTMLとCSSはそのレイアウトとUIコンポーネントだけを実装するためのコードで、余分なコードは一切ありません。その中からいくつか紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div style="display: flex;"> <!-- Sidebar --> <aside style="width: 30%;"> ... </aside> <!-- Main --> <main style=" /* Take the remaining width */ flex: 1; /* Make it scrollable */ overflow: scroll; "> ... </main> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<div style="display: flex;"> <!-- Left content --> <div style="flex: 1;"> ... </div> <!-- Right content --> <div style="flex: 1;"> ... </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<div> <header style=" position: sticky; top: 0; "> ... </header> <main> ... </main> </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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!-- Container --> <div style=" /* Border */ border: 1px solid rgba(0, 0, 0, 0.3); border-bottom-color: transparent; border-radius: 4px; "> <!-- Each accordion item --> <div style=" border-bottom: 1px solid rgba(0, 0, 0, 0.3); "> <!-- Heading --> <div style=" /* Center the content horizontally */ align-items: center; display: flex; cursor: pointer; padding: 16px; "> <!-- The toggle icon --> <div style="margin-right: 12px;">...</div> <!-- The title --> <div style=" flex: 1; /* Take remaining width */ "> ... </div> </div> <!-- The content --> <div style=" /* For selected item */ display: block; /* For not selected item */ display: none; border-top: 1px solid rgba(0, 0, 0, 0.3); padding: 16px; "> ... </div> </div> <!-- Repeat other item --> ... </div> <div style=" border-bottom: 1px solid rgba(0, 0, 0, 0.3); "> <!-- Heading --> <div style=" display: flex; align-items: center; justify-content: space-between; "> <!-- Question --> ... <!-- The toggle icon sticks to the right --> ... </div> <!-- Answer --> </div> |
|
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=" /* Banner is displayed at the bottom */ bottom: 0; left: 0; position: fixed; width: 100%; /* Center the content */ align-items: center; display: flex; justify-content: center; "> <!-- Tells visitors that the website uses cookie --> <div style=" /* Take available width */ flex: 1; "> ... </div> <!-- Close button --> ... </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 |
<style> .p-floating-container { position: relative; } .p-floating-container label { /* Position the label */ left: 8px; position: absolute; top: 0; /* Hide it by default */ opacity: 0; transition: 'all 200ms', } /* Show the label at desired position when the placeholder of input isn't shown */ .p-floating-container input:not(:placeholder-shown) + label { background: #FFF; transform: translate(0, -50%); opacity: 1; } </style> <div class="p-floating-container"> <!-- The input --> <input placeholder="Placeholder" /> <!-- The label --> <label>Placeholder</label> </div> |
sponsors
