calme

コンテンツエリア

DEMOで左右交互に配置されているコンテンツです。

<article>
    <div>
        <p>
            DEMOで左右交互に配置されているコンテンツです。
        </p>
    </div>
</article>
  • <article>~</article>を増やしたり減らしたりすると、自動で位置と背景色をレイアウトします。

水平位置

デフォルトの水平位置は、<article>が奇数なら右配置、偶数なら左配置です。
classを設定することで、配置の変更が可能です。

<article class="p-center">
    <div>
        <p>
            水平位置
        </p>
    </div>
</article>
  • 水平位置設定用クラスを<article>に設定することで、水平位置を変更できます。
  • 水平位置設定用クラス
    • 左寄せp-left
    • 中央寄せp-center
    • 右寄せp-right

背景色

デフォルトの背景色は、<article>が奇数ならベージュ、偶数ならグリーンです。
classを設定することで、背景色の変更が可能です。

<article class="bg-beige">
    <div>
        <p>
            背景色
        </p>
    </div>
</article>
  • 背景色設定用クラスを<article>に設定することで、背景色を変更できます。
  • 水平位置設定用クラス
    • ベージュbg-beige
    • グリーンbg-green
    • グレーbg-gray