my bookshelf

parts

基本の形

本についての説明など。

本についての説明など。

<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>
  • 親要素のclassebs-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の直下の要素classnewを設定すると新着マークを表示します

その他の装飾

文字サイズ(小)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>以外の要素にも設定可能
タイトルとURLをコピーしました