Help

ヘルプメッセージに関する機能の説明と使用例です。

タイプ

文章

簡単なメッセージや単独で使われるヘルプメッセージ(一行/複数行)を表示する場合に使用できます。テキストの冒頭には「！」のアイコンが表示されます。

<!-- ヘルプメッセージ(右側表示) -->
<input type="text" />
 <span class="ec-base-help">ヘルプメッセージの内容を入力してください。</span>
<!-- ヘルプメッセージ(下部表示) -->
<input type="text" />
 <p class="ec-base-help">一行ヘルプメッセージの内容を入力してください。</p>
<p class="ec-base-help">複数行で表示される長文ヘルプメッセージの<br/>内容を入力してください。</p>

数字

数字アイコンを利用してヘルプメッセージの実施順番や優先順位を表示する場合に使用できます。

<div class="ec-base-help">
    <h3>数字タイプのヘルプメッセージ</h3>
    <div class="inner">
        <h4>ヘルプのタイトル</h4>
        <p>ヘルプメッセージが表示されます。</p>
        <h4>ヘルプのタイトル</h4>
        <ol>
            <li class="item1">ヘルプメッセージが表示されます。</li>
            <li class="item2">ヘルプメッセージが表示されます。ヘルプメッセージが表示されます。<br />ヘルプメッセージが表示されます。ヘルプメッセージが表示されます。</li>
            <li class="item3">ヘルプメッセージが表示されます。</li>
            <li class="item4">ヘルプメッセージが表示されます。</li>
            <li class="item5">ヘルプメッセージが表示されます。</li>
            <li class="item6">ヘルプメッセージが表示されます。</li>
        </ol>
    </div>
</div>

ダッシュ

違う内容や情報を含んでいるヘルプメッセージをダッシュアイコンで区別したい場合に使用できます。

<!-- ダッシュタイプのヘルプ：文章 -->
<p class="ec-base-help typeDash">ダッシュタイプのヘルプメッセージです。内容を入力してください。</p>
<!-- ダッシュタイプのヘルプ：ボックス -->
<div class="ec-base-help">
    <h2>ダッシュタイプのヘルプ</h2>
    <div class="inner">
        <ul>
            <li>ヘルプの内容が表示されます。ヘルプの内容が表示されます。</li>
            <li>ヘルプの内容が表示されます。ヘルプの内容が表示されます。</li>
            <li>ヘルプの内容が表示されます。</li>
        </ul>
     </div>
</div>

応用

テキストスタイルとの組み合わせ

すべてのタイプにおいてフォントカラーやサイズなどテキストスタイルの変更・適用が可能です。

<!-- 文章タイプ+テキストスタイル -->
<p class="ec-base-help txtWarn txt11">一行ヘルプメッセージの内容を入力してください。</p>
<p class="ec-base-help txtWarn txt11">複数行で表示される長文ヘルプメッセージの<br/>内容を入力してください。</p>
<!-- 文章タイプ+テキストスタイル -->
<ul class="ec-base-help">
    <li>一般タイプのヘルプメッセージです。</li>
    <li class="txtWarn txt11">強調タイプのヘルプメッセージです。</li>
</ul>

Cafe24 Smart design Support

Help

タイプ

文章

リスト

数字

ダッシュ

応用

テキストスタイルとの組み合わせ