CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

タイポグラフィ

エンジニアのためのWebチートシート

CSSタイポグラフィのチートシートです。折り返し制御、文字詰め、カーニング、流体タイポグラフィなど、テキスト表示を美しく制御するためのプロパティをまとめました。

折り返し・改行制御

overflow-wrap

overflow-wrap: anywhere;
/* or */
overflow-wrap: break-word;

normal:

Thisisaverylongwordthatdoesnotbreak

anywhere:

Thisisaverylongwordthatdoesnotbreak

line-break

line-break: strict;
/* 禁則処理を厳格に適用 */

auto:

「こんにちは」と言った。

strict:

「こんにちは」と言った。

word-break

word-break: break-all;
/* or */
word-break: keep-all;

normal:

Hello World Test

break-all:

Hello World Test

white-space

white-space: nowrap;
white-space: pre-wrap;

nowrap:

This text will not wrap

pre-wrap:

Text with spaces

テキストラップ

text-wrap: balance

h1 {
  text-wrap: balance;
}

normal:

The quick brown fox jumps over

balance:

The quick brown fox jumps over

text-wrap: pretty

p {
  text-wrap: pretty;
}

pretty (prevents orphans):

This paragraph uses text-wrap pretty to prevent orphaned words at the end.

文字詰め・カーニング

font-feature-settings

h1 {
  font-feature-settings: "palt";
}

normal:

「見出し」テスト

palt:

「見出し」テスト

font-kerning

/* 英語見出し */
h1:lang(en) {
  font-kerning: normal;
}
/* 日本語本文 */
p:lang(ja) {
  font-kerning: none;
}

none:

AVATAR WAY

normal:

AVATAR WAY

文字間・単語間スペース

letter-spacing

p {
  letter-spacing: 0.1em;
}
h1 {
  letter-spacing: -0.02em;
}

normal:

Typography Text

0.1em:

Typography Text

-0.02em:

Typography Text

word-spacing

p {
  word-spacing: 0.2em;
}

normal:

Hello World Test

0.3em:

Hello World Test

約物・トリミング

text-spacing-trim

p {
  text-spacing-trim: trim-start;
}
/* 段落先頭の括弧の余白を削除 */

normal:

「括弧で始まる文」

trim-start:

「括弧で始まる文」

テキスト省略

line-clamp

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-y: clip;
}

2 lines:

This is a long text that will be clamped to only two lines. Any additional content will be hidden with an ellipsis.

text-overflow

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

clip:

This text will be clipped

ellipsis:

This text will be clipped

流体タイポグラフィ

clamp()関数

h1 {
  /* min: 1rem, preferred: 5vw, max: 3rem */
  font-size: clamp(1rem, 5vw, 3rem);
}

p {
  /* min: 0.875rem, preferred: 2vw, max: 1.125rem */
  font-size: clamp(0.875rem, 2vw, 1.125rem);
}

Resize window to see effect:

Fluid Heading

This paragraph uses clamp() for responsive sizing.

単位の使い分け

rem vs px

/* rem: ブラウザの文字設定と連動 */
h1 { font-size: 2rem; }
p { margin-bottom: 1rem; }

/* px: 文字設定と非連動 */
.border { border-width: 1px; }
.icon { width: 24px; }

rem を使う:

  • font-size
  • margin / padding
  • line-height

px を使う:

  • border-width
  • box-shadow
  • アイコンサイズ