Sizing

Inhouseでは、要素どうしの間隔やボタンの高さ、角丸の半径など、あらゆるサイズはタイポグラフィを根拠にして決めています。具体的には、ブラウザの文字サイズの100%に相当する16pxと、文字サイズの150%に相当する24pxを行の高さの基準として、16pxまたは24pxの倍数のバリエーションの中から選んでサイズを決めることで、ページの縦方向のリズム(バーティカルリズム)を揃えています。

このドキュメントでは、サイズのバリエーションの一覧であるSizing scaleと、そのSizing scaleから用途別に最適な値を選んで名前をつけたSemantic tokenを紹介しています。すべての値は、単位をRemにした数値で返ってくるように設計されたSass functionから取得できます。

*このページで表記しているPixelは1remが16pxの場合の値です

Sizing scale

Sizing Scale

Sass function

Sizing scaleのサイズを取得できます。

Syntax

get-sizing-scale-size($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  height: inhouse.get-sizing-scale-size($level: 16);
}
LevelPixel(Pepper flavor)Rem(Pepper flavor)
110.0625
220.125
440.25
880.5
12120.75
16161
20201.25
24241.5
32322
40402.5
48483
56563.5
64644
72724.5
80805
96966
1121127
1201207.5
1281288
1441449
16016010
16816810.5
17617611
19219212
21621613.5
24024015
26426416.5
28828818
31231219.5

*必要以上の選択肢を減らすためにLevel 192以降は24pxの倍数に絞っています

Spacing

Sizing scaleから、要素どうしの間隔を決めるのに最適な値を選び、SpacingとしてLevel XXSからXXLまで名前をつけています。

Spacing

Sass function

Spacingのサイズを取得できます。

Syntax

get-spacing-size($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  margin-top: inhouse.get-spacing-size($level: m);
}
LevelPixel(Pepper flavor)Rem(Pepper flavor)
xxs40.25
xs80.5
s120.75
m161
l241.5
xl322
xxl483

Interactive component

Sizing scaleから、ボタンなどユーザーがタップやクリックできる要素の高さを決めるのに最適な値を選び、Interactive componentとしてLevel XSからXLまで名前をつけています。

Interactive component

Sass function

Interactive componentのサイズを取得できます。

Syntax

get-interactive-component-height($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  height: inhouse.get-interactive-component-height($level: m);
}
LevelPixel(Pepper flavor)Rem(Pepper flavor)
xs241.5
s322
m402.5
l483
xl563.5

Radius

Sizing scaleから、角丸の半径を決めるのに最適な値を選び、RadiusとしてLevel M, L, XLの名前をつけています。

Radius

Sass function

Radiusのサイズを取得できます。

Syntax

get-radius-size($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  border-radius: inhouse.get-radius-size($level: m);
}
LevelPixel(Pepper flavor)Rem(Pepper flavor)
m40.25
l80.5
xl120.75

Line width

Sizing scaleから、線の太さを決めるのに最適な値を選び、Line widthとしてLevel M, L, XLの名前をつけています。

Line width

Sass function

Line widthのサイズを取得できます。

Syntax

get-border-size($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  border-width: inhouse.get-border-size($level: m);
}
LevelPixel(Pepper flavor)Rem(Pepper flavor)
m10.0625
l20.125
xl40.25

Content width

ウェブページのコンテンツに最大幅を指定することを想定して、Content widthとしてLevel XSからXLまでの名前をつけています。

なお、これらは画面の横方向に対するサイズの指定のため、Sizing scaleのバリエーションから選んだ値ではありません。また、タイポグラフィではなくデバイスの画面の解像度を根拠とする値なので、Sass functionもRemではなくPixelの単位の値で返します。

Sass function

Content widthのサイズを取得できます。

Syntax

get-content-size($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  max-width: inhouse.get-content-size($level: m);
  margin: 0 auto;
}
LevelPixel(Pepper flavor)Rem(Pepper flavor)
xs480px-
s640px-
m960px-
l1200px-
xl1440px-

Boundary

レスポンシブデザインのレイアウトを変更するブレークポイントを指定することを想定して、BoundaryとしてLevel XXSからXLまでの名前をつけています。

なお、これらは画面の横方向に対するサイズの指定のため、Sizing scaleのバリエーションから選んだ値ではありません。また、タイポグラフィではなくデバイスの画面の解像度を根拠とする値なので、Sass functionもRemではなくPixelの単位の値で返します。

Sass function

Boundaryのサイズを取得できます。

Syntax

get-boundary-size($level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  @media (min-width: inhouse.get-boundary-size($level: xl)) {
    display: flex;
  }
}
LevelPixel(Pepper flavor)Rem(Pepper flavor)
xxs330px-
xs370px-
s600px-
m800px-
l1100px-
xl1400px-