my bookshelf

基本の形

<div class="ebs-base ebs-md">
  <div>
    <div class="ebs-img"><img src="【画像URL】"></div>
    <div class="ebs-text">
      <p>本についての説明など。</p>
    </div>
  </div>

  <div class="ebs-reverse">
    <div class="ebs-img"><img src="【画像URL】"></div>
    <div class="ebs-text">
      <p>本についての説明など。</p>
    </div>
  </div>
</div>

• 親要素のclassにebs-baseと、それぞれの画像サイズ設定用クラスを設定
• ebs-baseの直下の要素内に、classに以下を設定した要素をそれぞれ設置
  • ebs-img … 画像用要素
  • ebs-text … テキスト用要素
• ebs-baseの直下の要素にebs-reverseクラスを設定すると、画像とテキストの位置を反対に配置します。
• 作品を増やす場合はebs-baseの直下の要素を増やす

画像サイズ設定用クラス

幅100px	ebs-sm
幅150px	ebs-md
幅200px	ebs-lg

テキスト位置を縦並びに変更

<div class="ebs-base ebs-col">
    <div>
        <!-- 省略 -->
    </div>
</div>

• ebs-baseを設定した要素にebs-colを設定

複数列に並べる

列設定用クラス一覧

1～5列まで。
設定しない場合1列で表示。

スマホの場合、2～3列は1列、4～5列は2列にして表示する。

1列	1列は指定なし
2列	ebs-line-2
3列	ebs-line-3
4列	ebs-line-4
5列	ebs-line-5

テキスト横並び

<div class="ebs-base ebs-sm ebs-line-2">
    <div>
        <!-- 省略 -->
    </div>
    <!-- 省略 -->
</div>

• ebs-baseを設定した要素に列設定用クラスを設定

テキスト縦並び

<div class="ebs-base ebs-sm ebs-col ebs-line-3">
    <div>
        <!-- 省略 -->
    </div>
    <!-- 省略 -->
</div>

• ebs-baseを設定した要素にebs-colと列設定用クラスを設定
• サイズ設定用クラスを指定すると、画像サイズを変更する

<div class="ebs-base ebs-col ebs-line-3">
    <div>
        <!-- 省略 -->
    </div>
    <!-- 省略 -->
</div>

• ebs-baseを設定した要素に列設定用クラスを設定
• サイズ設定用クラスを指定しない場合、画像サイズは列幅に合わせる

枠線

<div class="ebs-base ebs-border">
    <div>
        <!-- 省略 -->
    </div>
</div>

• ebs-baseを設定した要素にebs-borderを設定

新着マーク

<div class="ebs-base ebs-md">
  <div class="new">
    <!-- 省略 -->
  </div>

  <div class="ebs-reverse new">
    <!-- 省略 -->
  </div>
</div>

• ebs-baseの直下の要素のclassにnewを設定すると新着マークを表示します

その他の装飾

文字サイズ（小）	ebs-text-sm
文字サイズ（大）	ebs-text-lg
文字サイズ（大）	ebs-text-bold
下線	ebs-text-border
強調	ebs-text-em
ボダン風リンク	ebs-link-btn
ボタン風リンク（全幅）	ebs-link-btn-block ※ebs-link-btnと一緒に設定する

<span class="ebs-text-sm">文字サイズ（小）</span>
<span class="ebs-text-lg">文字サイズ（大）</span>
<span class="ebs-text-bold">太字</span>
<span class="ebs-text-border">下線</span>
<span class="ebs-text-em">強調</span>
<a href="【URL】" class="ebs-link-btn">強調リンク</a>
<a href="【URL】" class="ebs-link-btn ebs-link-btn-block">強調リンク（角丸）</a>

• 使用したい装飾用のクラスを要素に設定すると装飾が表示される
• <span>や<a>以外の要素にも設定可能