chara set

parts

リスト要素

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

<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>を複数設置すると、キャラクター同士の間隔を離してレイアウトします

コンテンツ列設定

1つ目の要素
2つ目の要素
3つ目の要素
<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列(スマホ表示時)

データ要素

データ項目名1
データ
データ項目名2
データ
データ項目名3
データ
データ項目名1
データ
データ項目名2
データ
データ項目名3
データ
<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を設定すると、数値データ要素としてレイアウトします。数値データ要素はデータ欄が小さく、文字が右寄せになります。

列設定

データ名1
データ
データ名2
データ
データ名3
データ
<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}スマホ表示時の列設定

時系列要素

時系列項目1
データ
時系列項目2
データ
時系列項目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を設定すると、その中に設置した画像を正方形にレイアウトします

縦型

<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-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-imgecs-content-outer-img-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を設定すると、スマホ表示時は上下にレイアウトします
タイトルとURLをコピーしました