記事の内容
letter-spacing
letter-spacingプロパティは、文字間隔を広げたり狭めたりできるプロパティになります。
※標準状態に戻す場合はnomalと指定する
letter-spacingプロパティ
記法
letter-spacing : 文字間隔
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>letter-spacingプロパティに関して</title>
</head>
<body>
<p>文字間隔(通常)</p>
<p class="increace-letter-spacing">文字間隔(広げた)</p>
<p class="decreace-letter-spacing">文字間隔(狭めた)</p>
</body>
</html>.increace-letter-spacing {
letter-spacing: 1.5rem;
}
.decreace-letter-spacing {
letter-spacing: -0.1rem;
}出力結果
文字間隔(通常)
文字間隔(広げた)
文字間隔(狭めた)
word-spacing
word-spacingプロパティは、単語の間隔を広げたり狭めたりできるプロパティになります。
word-spacingプロパティ
記法
word-spacing : 単語と単語の間隔
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>word-spacingプロパティに関して</title>
</head>
<body>
<label>単語の間隔(通常)</label>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto,
excepturi?
</p>
<label>単語の間隔(広めた)</label>
<p class="increace-word-spacing">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto,
excepturi?
</p>
<label>単語の間隔(狭めた)</label>
<p class="decreace-word-spacing">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto,
excepturi?
</p>
</body>
</html>.increace-word-spacing {
word-spacing: 1.5rem;
}
.decreace-word-spacing {
word-spacing: -0.3rem;
}出力結果
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto,excepturi?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto,excepturi?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto,excepturi?