Zenn
Open10

CSSを書く上でのtips

CSS
HTML
HTML 5
マークアップ
okita kamegorookita kamegoro

要素の配置に関するもの

要素の中身を原点とする

position: absolute などで要素の位置を右から20%としたい時に、要素の位置が微妙になることがある。
例えば要素の中身が可変長の文字列の場合は、文字の長さによって見た目の中心がズレるから。

こういう時は要素の中身を原点とすることでいい感じになりやすい。

position: absolute;
transform: translate(-50%, -50%);
left: 20%;

translate(0, -50%)とすることで高さだけ中心にすることもできる。

最後の1つの要素のみ下揃えにする

display flex で、縦並びにして、最後の要素に margin:top

.card-item {
    display: flex;
    flex-direction: column;
    ...
}

.card-button {
    margin-top: auto;
}

ref: https://moshashugyo.com/media/flexbox-right-justified

okita kamegorookita kamegoro

サイズの変更に関するもの

画面サイズによってfont-size をいい感じにする (font-size 以外でも利用可能)

画像LPをHTMLにする際とかにかなり便利。
画面サイズによってフォントサイズをブレイクポイントなしに記述できる
https://min-max-calculator.9elements.com/

okita kamegorookita kamegoro

デザインをそのまま再現する方法

PC, SPの2つのデザインがある場合、2つのpxでは綺麗に表示されるが他のサイズでは崩れる場合がある。
このとき画像のようにfont-sizeなども連動して変化して欲しいことがあるが以下のような形にすれば割とうまくいく

p {
    # 750px の幅の時に24pxのフォントサイズ
    font-size: clac(24 / 750 * 100vw);
}