← Hubに戻る

CSS文字装飾 チートシート

テキストシャドウ

Shadow!
.text-shadow {
  color: #4f8cff;
  text-shadow: 2px 2px 8px #2563eb88;
}

グラデーションテキスト

Gradient!
.gradient-text {
  background: linear-gradient(90deg, #4f8cff, #ff6ec4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

太字

Bold!
.bold-text {
  font-weight: bold;
}

イタリック

Italic!
.italic-text {
  font-style: italic;
}

下線

Underline!
.underline-text {
  text-decoration: underline;
}

点線下線

Dotted Underline!
.dotted-underline {
  text-decoration: underline dotted #4f8cff;
}

二重線

Double Underline!
.double-underline {
  text-decoration: underline double #4f8cff;
}

取り消し線

Line Through!
.line-through {
  text-decoration: line-through;
}

影付きテキスト

Shadow Text!
.shadow-text {
  color: #222;
  text-shadow: 2px 2px 8px #4f8cff88;
}

アウトラインテキスト

Outline!
.outline-text {
  color: #fff;
  -webkit-text-stroke: 2px #4f8cff;
}

マーカー風

Marker!
.marker-text {
  background: linear-gradient(transparent 60%, #ffe66e 60%);
}

角丸背景

Rounded BG!
.rounded-bg {
  background: #4f8cff22;
  border-radius: 12px;
  padding: 4px 16px;
}

斜体＋太字

Bold Italic!
.bold-italic-text {
  font-weight: bold;
  font-style: italic;
}

大文字化

Uppercase!
.uppercase-text {
  text-transform: uppercase;
}

小文字化

Lowercase!
.lowercase-text {
  text-transform: lowercase;
}

キャピタライズ

capitalize each word
.capitalize-text {
  text-transform: capitalize;
}

文字間隔広め

Letter Spacing!
.letter-space-text {
  letter-spacing: 0.2em;
}

行間広め

Line Height Example
2行目
.line-height-text {
  line-height: 2.2;
}

影付き下線

Shadow Underline!
.shadow-underline {
  text-decoration: underline;
  text-shadow: 2px 2px 8px #4f8cff88;
}

波線下線

Wavy Underline!
.wavy-underline {
  text-decoration: underline wavy #ff6ec4;
}

背景グラデーション

BG Gradient!
.bg-gradient-text {
  background: linear-gradient(90deg, #4f8cff, #ffe66e);
  color: #fff;
  padding: 4px 16px;
  border-radius: 8px;
}

縁取り＋影

Outline + Shadow!
.outline-shadow-text {
  color: #fff;
  -webkit-text-stroke: 2px #4f8cff;
  text-shadow: 2px 2px 8px #ff6ec488;
}