引き続き現在のCSSを整理するために本書を手に取った。10冊目。
clamp()
でのfluidタイポグラフィ、CSS GridとFlexboxの使い分け、containerによる基本余白とfigmaから値を取得する装飾方法などが参考になった。
- デモサイト
- Netlify
- Cloudflare Pages
vw, clamp()を使ったFluidタイポグラフィ
h1 {
font-size: clamp(53px, 8.73239vw + 20.2535375px, 146px);
}
/* Clamp */
*,
*::before,
*::after {
/* 最小サイズ、最大サイズ、最小画面幅、最大画面幅(単位px) */
--min-size: 53;
--max-size: 146;
--min-viewport: 375;
--max-viewport: 1440;
/* a 傾き */
--slope: calc(
(var(--max-size) - var(--min-size)) /
(var(--max-viewport) - var(--min-viewport))
);
/* b 切片 */
--intercept: calc(var(--min-size) - var(--slope) * var(--min-viewport));
/* y = ax + b 可変サイズ */
--fluid-size: calc(var(--slope) * 100vw + var(--intercept) / 16 * 1rem);
/* clamp(最小サイズ, 可変サイズ, 最大サイズ) */
--clamp-size: clamp(
var(--min-size) / 16 * 1rem, /* 1rem = 16px のため */
var(--fluid-size),
var(--max-size) / 16 * 1rem
);
}
/* テキスト(Fluid Typography) */
h1 {
font-size: var(--clamp-size);
font-family: "Lora", serif;
font-weight: 400;
}
7列カラムのグリッドレイアウトにする
/* 7列のグリッド */
.container {
display: grid;
grid-template-columns: repeat(3, var(--size1)) auto repeat(3, var(--size1));
row-gap: 44px;
}
.container > * {
grid-column: 2 / -2;
}
親要素figureのサイズに合わせてimgを切り抜いて、高さは固定する(グリッド内)
/* 基本設定 */
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
可変なフォントサイズに合わせて幅や余白が変わるようにする
.hero .body {
width: 21em;
margin-block-start: 2em;
}
before擬似要素で背景に装飾をつくる
.decor::before {
content: "";
background-color: var(--secondary);
position: absolute;
inset: 0; /* 内側「0」の距離に揃える */
z-index: -1;
}
縦並びのflexboxでgapで間の余白を設定する
.posts {
display: flex;
flex-direction: column;
gap: 36px;
}
オーバーレイの下のページが不要にスクロールするのを防ぐ
.open {
position: fixed;
overflow: hidden;
width: 100%;
}