0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【技術書まとめ】HTML&CSS コーディング・プラクティスブック 8 実践シリーズ

Last updated at Posted at 2023-03-01

引き続き現在のCSSを整理するために本書を手に取った。10冊目。

clamp()でのfluidタイポグラフィ、CSS GridとFlexboxの使い分け、containerによる基本余白とfigmaから値を取得する装飾方法などが参考になった。

vw, clamp()を使ったFluidタイポグラフィ

h1 {
  font-size: clamp(53px, 8.73239vw + 20.2535375px, 146px);
}

スクリーンショット 2023-02-13 9.27.00.png

/* 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%;
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?