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

サイト構築 -CSS

Post on:2021年2月18日

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コンポーネントだけを実装するためのコードで、余分なコードは一切ありません。その中からいくつか紹介します。

カードレイアウト

<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>

<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;

<div style="

/* There will be 4 cards per row */

flex-basis: 25%;

padding-left: 8px;

padding-right: 8px;

...

</div>

...

</div>

同じ高さのコラム

<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>

<div style="

flex: 1;

/* Space between columns */

margin: 0 8px;

/* Layout each column */

display: flex;

flex-direction: column;

...

<div style="

/* Take available height */

flex: 1;

...

</div>

...

</div>

...

</div>

スティッキーセクション

<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>

<div style="

height: 100%;

overflow: scroll;

<section style="

/* Take full size */

height: 100%;

width: 100%;

/* Stick to the top */

position: sticky;

top: 0;

...

</section>

...

</div>

パンくず

<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>

<div style="

/* Content is centered vertically */

align-items: center;

display: flex;

...

</div>

ドロワー

<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>

<div style="

/* Container takes full size */

height: 100%;

left: 0;

position: fixed;

top: 0;

width: 100%;

z-index: 9999;

<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;

" />

<div style="

/* Take full height */

height: 100%;

left: 0;

position: fixed;

top: 0;

width: 200px;

/* Background */

background-color: #fff;

...

</div>

検索ボックス

<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>

<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);

<input

type="text"

style="

border-color: transparent;

/* Take available width */

flex: 1;

...

</div>

中央揃え

<div style="
    align-items: center;
    display: flex;
    justify-content: center;
">
    ...
</div>

<div style="

align-items: center;

display: flex;

justify-content: center;

...

</div>

角にバッジ

<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>

<div style="

position: relative;

<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>

横に固定表示

<!-- Fixed at the middle of side -->
<div style="
    right: 0;
    position: fixed;
    top: 50%;
    transform: translate(0px, -50%);
">
    ...
</div>