Layout State
Lismでは、レイアウトを組む上で特定の役割を持ち、複数のモジュールに対してつけ外しできるような汎用性の高いセレクタを Layout State として分類しています。
is--flow
Section titled “is--flow”Lismでは、メインコンテンツ間の余白を管理するためのクラスとして、.is--flow
を用意しています。
.is--flow
系の直下では、コンテンツの間隔が margin-block-start
で管理されます。
クラス名 | 余白量 | 初期値 |
---|---|---|
.is--flow | --flowGap | --s40 |
.is--flow.-flow:s | --flowGap--s | --s30 |
見出しタグのみ、--flowGap
が--flowGap--h
に上書きされ、余白が広くなるようになっています。
-flow:s
クラスを併用すると、余白が少し狭くなります。さらにこの時、見出しタグも同じ余白量になります。
is--flow
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
Heading
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。
- Lorem ipsum, LIST content…
- Lorem ipsum, LIST content…
- Lorem ipsum, LIST content…
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
<div class="is--flow"> <p>Lorem ipsum content...</p> <p>Lorem ipsum content...</p> <h2>Heading</h2> <p>Lorem ipsum content...</p> <p>Lorem ipsum content...</p></div>
-flow:s
を併用するロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
Heading
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。長年にわたり、私は学区と長寿であれば、そのような Liberroy, Foo の取り組み、我らのうち、Mulla Sunt の利点を提案したのなら。
- Lorem ipsum, LIST content…
- Lorem ipsum, LIST content…
- Lorem ipsum, LIST content…
ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。ブラインド行うにはいくつかの重要な事柄が流れます。
<div class="is--flow"> <p>Lorem ipsum content...</p> <p>Lorem ipsum content...</p> <h2>Heading</h2> <p>Lorem ipsum content...</p> <p>Lorem ipsum content...</p></div>
is--container
Section titled “is--container”is--container
はコンテナ要素を定義するためのクラスです。
-container:{s|m|l}
のいずれかでサイズを指定することで、子要素のコンテンツサイズを制御することもできます。
クラス名 | コンテンツ幅 | 初期値 |
---|---|---|
is--container | --item-size | 100% |
-container:s | --size--s | |
-container:m | --size--m | |
-container:l | --size--l |
<div class="is--container -container:s"> <div>Contents...</div> <div>Contents...</div></div>
-container:{s|m|l}
を使用すると、--item-size
だけではなく .is--wide
の幅(.--wide-size
)も同時に調整されます。
.is--container
に 任意の値をセットする方法
s, m, l 以外の値をセットしたい場合は、--item-size
変数を指定します。
<div class="is--container" style="--item-size:20rem"> <div>Contents...</div> <div>Contents...</div></div>
is--container
関連の挙動を確認できるデモページを用意しています。
ぜひ広い画面でご確認ください。
is--{wide|fullwide|overwide}
Section titled “is--{wide|fullwide|overwide} ”コンテンツサイズの制御クラスを3種類用意しています。
クラス名 | 説明 |
---|---|
is--wide | .-container:{s|m|l} クラス直下では、コンテンツ幅よりも1段階広いサイズになります. |
is--fullwide | .has--gutter の直下でも、親要素のサイズいっぱいに広がります。 |
is--overwide | 直前のコンテナ要素が呼び出された位置を基準としたコンテナ幅(100cqw )まで広がります。(@propetry を使っています。) |
これらのクラスの挙動についても、別ページで確認できます。
is--layer
Section titled “is--layer”position:absolute
で要素を親要素サイズに合わせて配置できます。
CSSは以下のようになっており、inset:0
とoverflow:hidden
も指定された状態で配置されます。
.is--layer { position: absolute; inset: 0; overflow: hidden;}
活用例は <Layer>
を参照してください。
is--linkBox
Section titled “is--linkBox”ボックス全体をリンク化するためのクラスです。
活用例は <LinkBox>
を参照してください。
has--gutter
Section titled “has--gutter”コンテンツの左右に余白をつけることができるクラスです。
サイト全体で統一した余白量を左右に確保するためのものとして、padding系のユーティリティとは別のクラスとして用意しています。
クラス名 | 余白量 | 初期値 |
---|---|---|
has--gutter | --gutter | --s40 |
Lorem ipsum content…
Lorem ipsum content…
Lorem ipsum content…
<div class="has--gutter"> <p>Lorem ipsum content...</p> <p>Lorem ipsum content...</p> <p>Lorem ipsum content...</p></div>
コンテンツのサイズ制御について
Section titled “コンテンツのサイズ制御について”ページのコンテンツエリアが次のような構造をしているとします。
<main> <article> ...コンテンツ... </article></main>
ここで、例えばarticle
内のコンテンツ幅を800px
にしたい時を考えてみてください。
主に、次の①か②の選択肢があると思います。
/* ① コンテナ自身(コンテンツの親要素)の幅を制御する */article{ max-width: 800px;}
/* ② 各コンテンツ(コンテナの直下要素)の幅を制御する */article > * { max-width: 800px; margin-inline: auto;}
どちらも一長一短ありますが、とくに理由がなければ①を採用することが多いのではないでしょうか。
しかし、Lismでは ② の方法を推奨しています。
この②のアプローチに対応するためのコンテンツ制御クラスが、-container:
クラスです。また、②を前提としてis--wide
やis--fullwide
クラスは設計されています。
これはなぜかというと、① のアプローチをベースにした場合、途中で全幅サイズで表示したいコンテンツを作る場合の処理が複雑になってしまうためです。
②であれば、基本のCSSはmax-width:100%
だけでOKで、少しの例外処理を加えれば済みます。
しかし①では、次のようなCSSになってしまいます。
.fullwide{ max-width: 100vw; left: calc(50% - 50vw);}
/* その他環境を考慮したCSS... */
これだけみるとそこまで複雑ではないように見えますが、vw
ではスクロールバーの幅が考慮されないという問題点があったり、汎用性を考慮するとCSSがどんどん複雑化していきます。
ただし、@property
が有効なブラウザでは①の問題点もほぼ解消されるようになってきました。
そこで、Lismでは、is--overwide
を用意しています。
①のようなアプローチを採用するには、is--container
にmax-widthを指定して運用し、全幅コンテンツに対してis--overwide
クラスを使用てください。
<Box hasGutter> <Container maxW='30rem' py='40' bd='u:guide' bdc='blue'> <Box bd='u:guide' py='10'>...コンテンツ...</Box> <Box isOverwide hasGutter bgc='gray:20%' py='20'>全幅コンテンツ</Box> <Box bd='u:guide' py='10'>...コンテンツ...</Box> </Container></Box>