レイアウト一覧

MODULES

CSSクラス解説

メインコンテンツエリアでのMDOの挿入位置について

メインコンテンツエリアでのMODの挿入は、原則的にクラス「block」内に行ってください。

よく使用するCSSクラス

.block MODやコンテンツが入るブロックで、下に50px※ のマージン、スマホでは左右に10px※ のパディングがつきます。
※ settinds.scssで変更可能
.part block の子要素で、下に20px※ のマージンがつきます。
※ settinds.scssで変更可能
.texts .texts をつけた子のpにline-heightとmargin-bottomがつきます。
この中で ul や ol を使うとCSSが効いたリストになり、em には色がつき太字になります。
p.text pにline-heightとmargin-bottomがつきます。
この中のem には色がつき太字になります。
.font-mincho 文字が明朝体になります。こんな感じ
.font-designed 文字がGoogleFontで指定したものになります。Look like this.
デフォルトでは Montserrat:800 。
.headin0X .heading01 ~ 06 まで。見出しになります。
.white-text .white-text の子要素(見出し、本文など)が白文字になります。
secttion背景が暗く、反転させる必要があるときに使用。
.cover

罫線とpaddingがついたボックスになります。コラム化。

こんな感じ
.bg-cover

背景画像を指定する要素にこのクラスを使うと、backgroud-size:cover と、background-position: center center の効果になります。

.bg-atfix

背景画像を指定する要素にこのクラスを使うと、background-attachment:fixed の効果がつきます。スマホでは解除されます。

.radius 角丸になります。
.oval 比率が正方形のとき、正円になります。
.outline

文字に1pxの白枠がつきます。

TEXT OUTLINE

.aspect-fix-wrap

子要素.aspect-fixが、16:9の横長方形になります。

.aspect-fix-wrap-even

子要素.aspect-fixが、正方形になります。

.vertical-center 指定した要素が、親要素の天地中央になります。
ただし、この親要素のpositionが設定されていると効かないときがあります。jQueryプラグインを使用しているときは注意してください。
display:flex ではうまくいかない場合に使用してください。
.vh-center 親要素に指定すると、子要素が天地中央になります。上記同様、positionが設定されていると効かないときがあります。jQueryプラグインを使用しているときは注意してください。
display:flex ではうまくいかない場合に使用してください。
.flex display: flex;
.flex-center 天地中央にしたい要素の親要素に指定
.fadeup スクロールしたときに、指定した要素がふわっと下から上ににあがります。
.transition transition: all 0.8s ease; がつきます。
.bg-light 主に section で使用してください。背景にうすい色がつきます。.has-side内では効きません。
.caution 文字がアクセントカラーになります。こんな感じ
.supple 文字が少し小さくなります(78%)。こんな感じ
.huge 文字が少し大きくなります(128%)。こんな感じ
.more-huge 文字が少し大きくなります(114%)。こんな感じ
.mbcut 要素のmargin-bottomを削除します。
.pic 子要素のimgが横幅100%になり、下に10pxのマージンがつきます。
.center text-align:center
.right text-align:right
.tx-icon inline 要素につけると、文字入りのアイコンになります。
br.sp-br スマホだけで有効な改行
br.pc-br PCだけで有効な改行
a.ref a のテキストリンクにアイコンがつきます。 こんな感じ
a.button aにつけるとボタンになります。 こんな感じ
a.button.btn-small 小型のボタン。こんな感じ
a.button.bc-ghost ゴーストボタン。こんな感じ
a.button.bc-white 白抜きのボタン。こんな感じ