スタイルガイド - 株式会社 Joy-can Technology

見出し

ブロックエディタで選択可能な見出し

赤丸見出し

青背景見出し

青二重下線見出し

左に三角のアイコン見出し

左に灰色のボーダー２列

htmlでコーディングが必要な見出し

Various optical layering devices 各種光学層的装置

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<div class="c-heading-ttl-txt">
    <h2 class="c-heading-ttl-txt__ttl">
        <span class="-eng">Various optical layering devices</span>
        各種光学層的装置
    </h2>
    <p>
        テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
    </p>
</div>

C-Series Imaging Colorimeter 画像側色計

<h2 class="c-heading-border">
    <span class="-eng">C-Series Imaging Colorimeter</span>
    画像側色計
</h2>

Feature 特長

<h3 class="c-heading-eng-ttl">
    <span class="-eng">Feature</span>
    特長
</h3>

ボタン

htmlでコーディングが必要なボタン

仕様書PDFのダウンロード

<div class="l-center">
    <a href="test.pdf" class="c-btn-a">
        <div class="-box">仕様書PDFのダウンロード</div>
    </a>
</div>

テンプレート

<div class="c-item-list">
    <a href="" class="c-item-list__card">
        <figure class="c-item-list__thum">
            <img src="/wp-content/uploads/2023/08/item01.png" alt="画像測色計">
        </figure>
        <span class="c-link-arrow">画像測色計</span>
    </a>
    <a href="" class="c-item-list__card">
        <figure class="c-item-list__thum">
            <img src="/wp-content/uploads/2023/08/item02.png" alt="フィルター式画像測色計">
        </figure>
        <span class="c-link-arrow">フィルター式画像測色計</span>
    </a>
    <a href="" class="c-item-list__card">
        <figure class="c-item-list__thum">
            <img src="/wp-content/uploads/2023/08/item03.png" alt="画像測光器">
        </figure>
        <span class="c-link-arrow">画像測光器</span>
    </a>
    <a href="" class="c-item-list__card">
        <figure class="c-item-list__thum">
            <img src="/wp-content/uploads/2023/08/item04.png" alt="2D分光放射計">
        </figure>
        <span class="c-link-arrow">2D分光放射計</span>
    </a>
    <a href="" class="c-item-list__card">
        <figure class="c-item-list__thum">
            <img src="/wp-content/uploads/2023/08/item05.png" alt="視野角アナライザー">
        </figure>
        <span class="c-link-arrow">視野角アナライザー</span>
    </a>
    <a href="" class="c-item-list__card">
        <figure class="c-item-list__thum">
            <img src="/wp-content/uploads/2023/08/item06.png" alt="比色計メーター">
        </figure>
        <span class="c-link-arrow">比色計メーター</span>
    </a>
    <a href="" class="c-item-list__card">
        <figure class="c-item-list__thum">
            <img src="/wp-content/uploads/2023/08/item07.png" alt="応答時間アナライザー">
        </figure>
        <span class="c-link-arrow">応答時間アナライザー</span>
    </a>
    <a href="" class="c-item-list__card">
        <figure class="c-item-list__thum">
            <img src="/wp-content/uploads/2023/08/item08.png" alt="分光放射計">
        </figure>
        <span class="c-link-arrow">分光放射計</span>
    </a>
    <a href="" class="c-item-list__card">
        <figure class="c-item-list__thum">
            <img src="/wp-content/uploads/2023/08/item09.png" alt="ディスプレイ測定システム">
        </figure>
        <span class="c-link-arrow">ディスプレイ測定システム</span>
    </a>
</div>

見出し