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

サイト構築 -CSS

Post on:2019年12月13日

sponsorsr

Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。

フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。

CSS Layout
CSS Layout -GitHub

CSS Layoutの特徴
CSSで実装するレイアウト・UIコンポーネント

CSS Layoutの特徴

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

CSS Layout

依存関係は一切無し
フレームワークは必要無し
Flexboxなど、現代の実装状況に合わせて使用
ピュアCSSで実装、CSSハックは無し
実際の使用例
MITライセンス

60種類以上のレイアウトやUIコンポーネントの実装コードが揃っています。

CSS Layout

コードは各デモページから、簡単にコピペで利用できます。

Sidebar

CSSで実装するレイアウト・UIコンポーネント

CSS Layoutには2019年12月現在、61種類のレイアウト・UIコンポーネントが揃っています。

CSS Layout Patterns

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

Sidebar

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

...

</aside>

<main style="

/* Take the remaining width */

flex: 1;

/* Make it scrollable */

overflow: scroll;

...

</main>

</div>

Split screen

<div style="display: flex;">
    <!-- Left content -->
    <div style="flex: 1;">
        ...
    </div>

    <!-- Right content -->
    <div style="flex: 1;">
        ...
    </div>
</div>

...

</div>

...

</div>

Sticky header

<div>
    <header style="
        position: sticky;
        top: 0;
    ">
        ...
    </header>
    <main>
        ...
    </main>
</div>

<div>

<header style="

position: sticky;

top: 0;

...

</header>

<main>

...

</main>

</div>

Accordion

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

<div style="

/* Border */

border: 1px solid rgba(0, 0, 0, 0.3);

border-bottom-color: transparent;

border-radius: 4px;

<div style="

border-bottom: 1px solid rgba(0, 0, 0, 0.3);

<div style="

/* Center the content horizontally */

align-items: center;

display: flex;

cursor: pointer;

padding: 16px;

<div style="

flex: 1; /* Take remaining width */

...

</div>

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

<div style="

border-bottom: 1px solid rgba(0, 0, 0, 0.3);

<div style="

display: flex;

align-items: center;

justify-content: space-between;

...

...

</div>

</div>

Cookie banner

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

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

<div style="

/* Take available width */

flex: 1;

...

</div>

...

</div>

Floating label

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