コンテンツにスキップ

Layout State

Lismでは、レイアウトを組む上で特定の役割を持ち、複数のモジュールに対してつけ外しできるような汎用性の高いセレクタを Layout State として分類しています。

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はコンテナ要素を定義するためのクラスです。
-container:{s|m|l}のいずれかでサイズを指定することで、子要素のコンテンツサイズを制御することもできます。

クラス名コンテンツ幅初期値
is--container--item-size100%
-container:s--size--s
-container:m--size--m
-container:l--size--l
Contents…
Contents…
リサイズ可能
<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変数を指定します。

is—container に任意の値をセットする
Contents…
Contents…
リサイズ可能
<div class="is--container" style="--item-size:20rem">
<div>Contents...</div>
<div>Contents...</div>
</div>

is--container関連の挙動を確認できるデモページを用意しています。
ぜひ広い画面でご確認ください。

コンテンツサイズの制御クラスを3種類用意しています。

クラス名説明
is--wide.-container:{s|m|l}クラス直下では、コンテンツ幅よりも1段階広いサイズになります.
is--fullwide.has--gutterの直下でも、親要素のサイズいっぱいに広がります。
is--overwide直前のコンテナ要素が呼び出された位置を基準としたコンテナ幅(100cqw)まで広がります。(@propetryを使っています。)

これらのクラスの挙動についても、別ページで確認できます。

position:absoluteで要素を親要素サイズに合わせて配置できます。

CSSは以下のようになっており、inset:0overflow:hiddenも指定された状態で配置されます。

.is--layer {
position: absolute;
inset: 0;
overflow: hidden;
}

活用例は <Layer> を参照してください。

ボックス全体をリンク化するためのクラスです。

活用例は <LinkBox> を参照してください。

コンテンツの左右に余白をつけることができるクラスです。
サイト全体で統一した余白量を左右に確保するためのものとして、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--wideis--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>