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
  • アイコンサイズ

引用・参考リンク

WebTerm

WebTermは、AI時代のためのブラウザベースのターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識はエンジニアだけでなく非エンジニアにとっても重要になっています。
WebTermは、ローカル環境を壊す心配なく、Linuxコマンド、Gitワークフロー、CLI AIツールを安全に学べる「一時的・無料・ノーサインアップ」の環境を提供します。

WebTerm Logo

WebTerm

Browser Terminal Sandbox for Learning CLI

Related Cheatsheets

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)
すべてのチートシートを見る

Comments