Edited at

font-sizeに応じて大きさの変わるコンポーネントを作る話

More than 1 year has passed since last update.


概要

昨今のフロントエンド開発では、コンポーネントを作成し組み立てていくことが多い。

その中で、汎用コンポーネントの内部の位置調整を px で指定してしまうと、別の場所で別のフォントサイズで使いたくなったときに見た目にずれが生じてしまう。

その対策方法。


方針

ただ em を使う。


解説


SampleComponent.html

<div class="sample">

<p class="sample__text"></p>
<svg
xmlns="http://www.w3.org/2000/svg"
class="sample__icon"
viewBox="0 0 15 15"
>
<!-- 略 -->
</svg>
</div>


SampleComponent.scss

@function toEm($value) {

// font-size: 14px; を基準に px を em に変換する
@return $value / 14 * 1em;
}

.sample {
display: inline-flex;
align-items: center;
padding: toEm(8);

&__text {
margin-right: toEm(4);
font-weight: bold;
}

&__icon {
width: toEm(15);
height: toEm(15);
}
}
</style>


こんな感じ。

これでこのコンポーネントのフォントサイズが変わると、コンポーネント内部の文字列だけでなく、アイコンサイズ、 paddingmargin も同じ比率で増減する。