Box
グルーピングや区分けの際に設置する汎用的なレイアウト CSS。
INFO
v8 で Flexbox の設定 .is-flex は flex に移動しました
Table of Contents
Basic
.boxでコンテンツを包みます.boxにはposition: relative;display: block;が付与されています
ボックス
<div class="box">ボックス</div>Background
.is-bg-lightで背景をvar(--theme-bg-1)で塗れます.is-bg-coverで背景画像をいっぱいに広げられます.is-bg-containで背景画像を見切れないサイズにできます
ボックス
ボックス
ボックス
<div class="box is-bg-light">ボックス</div>
<div class="box is-bg-cover">ボックス</div>
<div class="box is-bg-contain">ボックス</div>Outline
.is-outlineで周囲にボーダーを引けます.is-outline-{way}で指定した方向にボーダーを引けます{way}はtoprightbottomleftの 4 種類
ボックス
ボックス
ボックス
ボックス
ボックス
<div class="box is-outline">ボックス</div>
<div class="box is-outline-top">ボックス</div>
<div class="box is-outline-right">ボックス</div>
<div class="box is-outline-bottom">ボックス</div>
<div class="box is-outline-left">ボックス</div>Separate
.is-separateで子要素の境にボーダーを付与できます.is-separate-parentと.is-separate-childで任意の子要素の境にボーダーを付与
子要素
子要素
子要素
子要素1
子要素2
子要素1
子要素2
子要素1
子要素2
<div class="box is-separate">
<div>子要素</div>
<div>子要素</div>
<div>子要素</div>
</div>
<div class="box is-separate-parent">
<div class="box is-flex">
<div>子要素1</div><div class="box is-separate-child">子要素2</div>
</div>
<div class="box is-flex">
<div>子要素1</div><div class="box is-separate-child">子要素2</div>
</div>
<div class="box is-flex">
<div>子要素1</div><div class="box is-separate-child">子要素2</div>
</div>
</div>Angle
.is-angle-rightや.is-angle-leftで指定方向に角マークを付与します.is-angle-upや.is-angle-downで角マークが指定方向を向きます
テキスト
テキスト
テキスト
テキスト
テキスト
テキスト
<div class="box is-angle-right"><p class="text">テキスト</p></div>
<div class="box is-angle-left"><p class="text is-right">テキスト</p></div>
<div class="box is-angle-right is-angle-up"><p class="text">テキスト</p></div>
<div class="box is-angle-left is-angle-up"><p class="text is-right">テキスト</p></div>
<div class="box is-angle-right is-angle-down"><p class="text">テキスト</p></div>
<div class="box is-angle-left is-angle-down"><p class="text is-right">テキスト</p></div>Link
.is-linkでホバー効果が付与されます
ボックス
<div class="box is-link">ボックス</div>Disabled
[disabled]または[aria-disabled="true"]または.is-disabledで非活性化します- 非活性化すると
pointer-events: none;が付与されホバー効果などが打ち消されます
ボックス
<div class="box is-link" aria-disabled="true">ボックス</div>Compatible
推奨のクラス名と同様の効果を互換のあるクラス名で得ることもできます。
| 推奨のクラス名 | 互換のあるクラス名 |
|---|---|
.is-bg-light | .is-bg |
Variables
上書きできる変数は以下の通りです。
.box {
--box-bg-light-bg: var(--theme-bg-1);
--box-outline-border-width: 1px;
--box-outline-border-color: var(--theme-bd-1);
--box-separate-border-width: 1px;
--box-separate-border-color: var(--theme-bd-1);
--box-angle-position: 0.75em;
--box-angle-size: 0.5em;
--box-angle-width: 2px;
--box-angle-color: var(--theme-dark);
--box-angle-color-alpha: 24%;
--box-link-transition: ease-out 0.12s;
--box-link-hover-bg: var(--theme-bg-2);
}Import
PostCSS で読み込む場合のパスは以下となります。
@import "musubii/src/layouts/box/main.css";v7 を再現する場合は legacy.css を追加で読み込んでください。
@import "musubii/src/layouts/box/legacy.css";