コンポーネントサンプル集

テキストコンポーネント

text - 001

Hello!world

HTMLソースコード

<p class="js-text">Hello!world</p>

text - 002

ここに文字を入れる

HTMLソースコード

<p class="js-text2">ここに文字を入れる</p>

text - 003

ぱぴぷぺぽ

HTMLソースコード

<p class="js-text3">ぱぴぷぺぽ</p>

text - 004

soundbox

HTMLソースコード

<p class="js-text4">soundbox</p>

text - 005

フクロモモンガ

HTMLソースコード

<p class="js-text5">フクロモモンガ</p>

text - 006

ど根性ガエル

HTMLソースコード

<p class="js-text6">ど根性ガエル</p>

text - 007

こんにちは世界

HTMLソースコード

<p class="js-text7">こんにちは世界</p>

text - 008

DONDOKOQUEST

HTMLソースコード

<p class="js-text7">DONDOKOQUEST</p>

リストコンポーネント

list - 001

ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

HTMLソースコード


<ul class="card-list">
    <li class="card">
        <div class="dummy-img"></div>
        <div class="text-wrap">
            <p class="card-title">ダミーテキスト</p>
            <p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div>
    </li>
    <li class="card">
        <div class="dummy-img"></div>
        <div class="text-wrap">
            <p class="card-title">ダミーテキスト</p>
            <p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div>
    </li>
    <li class="card">
        <div class="dummy-img"></div>
        <div class="text-wrap">
            <p class="card-title">ダミーテキスト</p>
            <p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div>
    </li>
    <li class="card">
        <div class="dummy-img"></div>
        <div class="text-wrap">
            <p class="card-title">ダミーテキスト</p>
            <p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div>
    </li>
    <li class="card">
        <div class="dummy-img"></div>
        <div class="text-wrap">
            <p class="card-title">ダミーテキスト</p>
            <p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div>
    </li>
    <li class="card">
        <div class="dummy-img"></div>
        <div class="text-wrap">
            <p class="card-title">ダミーテキスト</p>
            <p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div>
    </li>
</ul>

list - 002

ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

HTMLソースコード


<ul class="card-list">
    <li class="card">
        <div class="dummy-img"></div>
        <div class="text-wrap">
            <p class="card-title">ダミーテキスト</p>
            <p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div>
    </li>
    <li class="card">
        <div class="dummy-img"></div>
        <div class="text-wrap">
            <p class="card-title">ダミーテキスト</p>
            <p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div>
    </li>
    <li class="card">
        <div class="dummy-img"></div>
        <div class="text-wrap">
            <p class="card-title">ダミーテキスト</p>
            <p class="card-text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </div>
</li>

list - 003

HTMLソースコード


<nav>
    <ul class="anchor-list">
        <li><a href="" class="anchor-link">リスト項目>/a</li>
        <li><a href="" class="anchor-link">リスト項目>/a</li>
       <li><a href="" class="anchor-link">リスト項目>/a</li>
    </ul>
</nav>

アコーディオンUI

accordion - 001

タイトルテキスト

ここにテキストを入れる

タイトルテキスト

ここにテキストを入れる

タイトルテキスト

ここにテキストを入れる

タイトルテキスト

ここにテキストを入れる