chara set

リスト要素

リンク等に利用するための、キャラクターのリストを設置する要素です。

<div class="ecs-list リストタイプ設定用クラス">
    <a href="#">キャラクター名</a>
    <a href="#">キャラクター名</a>
    <a href="#">キャラクター名</a>
    <span>キャラクター名</span>
    <span>キャラクター名</span>
    <span>キャラクター名</span>
</div>

• ecs-listを設定した要素にリストタイプ設定用クラスを設定します
• ecs-listを設定した要素内に<a>を設置するとリストボタンを、<span>を設置すると準備中レイアウトを表示します

リスト設定用クラス

ecs-list-btn	ボタン
ecs-list-btn-img	ボタン＋画像
ecs-list-thumbnail	サムネイル

ボタン

<div class="ecs-list ecs-list-btn">
    <a href="#">キャラクター名</a>
    <span>キャラクター名</span>
    <!-- 省略 -->
</div>

ボタン＋画像

<div class="ecs-list ecs-list-btn-img">
    <a href="#"><div><img src="【画像URL】"></div>キャラクター名</a>
    <span><div><img src="【画像URL】"></div>キャラクター名</span>
    <!-- 省略 -->
</div>

• <a>または<span>の中に画像とキャラクター名を設置できます
• 画像は<div><img src="【画像URL】"></div>の形で、<div>で囲ってください

サムネイル

<div class="ecs-list ecs-list-thumbnail">
    <a href="#"><div><img src="【画像URL】"></div>キャラクター名</a>
    <span><div><img src="【画像URL】"></div>キャラクター名</span>
    <!-- 省略 -->
</div>

• <a>または<span>の中に画像とキャラクター名を設置できます
• 画像は<div><img src="【画像URL】"></div>の形で、<div>で囲ってください

コンテンツ要素

キャラクター情報をまとめるのに役立つ、コンテンツ要素です。

コンテンツ要素の設定

<div class="ecs-content">
    <div>
       <!-- 省略・ここにキャラクター情報 -->
    </div>
    <div>
        <!-- 省略・ここにキャラクター情報 -->
    <div>
    <!-- 省略 -->
</div>

• ecs-contentを設定した要素内に<div>～<div>を設置します
• ecs-contentを設定した要素内に<div>～<div>を複数設置すると、キャラクター同士の間隔を離してレイアウトします

コンテンツ列設定

<div class="ecs-content">
    <div>
       <div class="ecs-content-column ecs-content-column-3 ecs-content-column-sp-2">
          <div>1つ目の要素</div>
          <div>2つ目の要素</div>
          <div>3つ目の要素</div>
       </div>
    </div>
</div>

• 列設定を行いたい要素にecs-data-columnと列設定クラスを設定すると、中に設置した要素の表示列数を増やします
• PC表示時用のクラスとスマホ表示時用のクラスを一緒に設定すると、画面幅によって表示列数を変更します

列設定クラス

ecs-content-column-{1~3}	PC表示時の列設定
ecs-content-column-sp-{1~3}	スマホ表示時の列設定1列（スマホ表示時）

データ要素

<div class="ecs-content">
    <div>
        <dl class="ecs-data">
            <dt>データ項目名</dt>
            <dd>データ</dd>
            <!-- 省略 -->
        </dl>
        <dl class="ecs-data-num">
            <dt>データ項目名</dt>
            <dd>データ</dd>
            <!-- 省略 -->
        </dl>
    </div>
</div>

• <div>内に設置した<dl>にクラスecs-dataを設定すると、データ要素としてレイアウトします
• <div>内に設置した<dl>にクラスecs-data-numを設定すると、数値データ要素としてレイアウトします。数値データ要素はデータ欄が小さく、文字が右寄せになります。

列設定

<div class="ecs-content">
    <div>
        <dl class="ecs-data ecs-data-column ecs-data-column-2 ecs-data-column-sp-1">
            <dt>データ名1</dt>
            <dd>データ</dd>
            <!-- 省略 -->
        </dl>
    </div>
</div>

• ecs-dataまたはecs-data-numと一緒にecs-data-columnと列設定クラスを設定すると、データ要素の列数を増やします
• PC表示時用のクラスとスマホ表示時用のクラスを一緒に設定すると、画面幅によって表示列数を変更します

列設定クラス

ecs-data-column-{1～3}	PC表示時の列設定
ecs-data-column-sp-{1～3}	スマホ表示時の列設定

時系列要素

<div class="ecs-content">
    <div>
        <dl class="ecs-history">
            <dt>時系列項目名</dt>
            <dd>データ</dd>
            <!-- 省略 -->
        </dl>
    </div>
</div>

• <div>内に設置した<dl>にクラスecs-historyを設定すると、時系列要素としてレイアウトします

画像要素

正方形・円形

<div class="ecs-content">
    <div>
        <div class="ecs-content-img-square"><img src="【画像URL】"></div>
    </div>
</div>

• <div>内に設置した<div>にクラスecs-content-img-squareまたはecs-content-img-circleを設定すると、その中に設置した画像を正方形にレイアウトします

正方形・円形（小）

<div class="ecs-content">
    <div>
        <div class="ecs-content-img-square-sm"><img src="【画像URL】"></div>
    </div>
</div>

• <div>内に設置した<div>にクラスecs-content-img-square-smまたはecs-content-img-circle-smを設定すると、その中に設置した画像を正方形にレイアウトします

縦型

<div class="ecs-content">
    <div>
        <div class="ecs-content-img-vertical"><img src="【画像URL】"></div>
    </div>
</div>

• <div>内に設置した<div>にクラスecs-content-img-verticalを設定すると、その中に設置した画像を正方形にレイアウトします

画像横にコンテンツ配置

通常配置

<div class="ecs-content">
    <div>
        <div class="ecs-content-outer-img">
            <div class="ecs-content-img-square"><img src="【画像URL】"></div>
            <div>
                <p>画像横コンテンツ</p>
            </div>
        </div>
    </div>
</div>

• <div>内にecs-content-img-squareまたはecs-content-img-verticalを<div class="ecs-content-outer-img">～</div>で囲みます
  ※正方形・円形（小）を使用する場合は、ecs-content-outer-img-smにしてください
• ecs-content-img-squareまたはecs-content-img-verticalの隣に、画像横に表示したいコンテンツ<div>～<div>を設置します

反対配置

<div class="ecs-content">
    <div>
        <div class="ecs-content-outer-img-reverse">
            <div>
                <p>画像横コンテンツ</p>
            </div>
            <div class="ecs-content-img-vertical"><img src="【画像URL】"></div>
        </div>
    </div>
</div>

• <div>～<div>とecs-content-img-squareまたはecs-content-img-verticalの位置を入れ替え、ecs-content-outer-imgをecs-content-outer-img-reverseに変更すると、画像の位置を反対にしてレイアウトします
  ※正方形・円形（小）を使用する場合は、ecs-content-outer-img-sm-reverseにしてください

スマホ表示で解除

<div class="ecs-content">
    <div>
        <div class="ecs-content-outer-img ecs-content-outer-sp-none">
            <div>
                <p>画像横コンテンツ</p>
            </div>
            <div class="ecs-content-img-square"><img src="【画像URL】"></div>
        </div>
    </div>
</div>

• ecs-content-outer-imgまたはecs-content-outer-img-reverseと一緒にecs-content-outer-sp-noneを設定すると、スマホ表示時は上下にレイアウトします