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 | 白抜きのボタン。こんな感じ |