Styling text · テキストのスタイリング
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · このページには最新のブラウザ（SharedArrayBuffer対応）が必要です。Chrome、Edge、Firefox、Safariを最新バージョンに更新してください。
English
Sizing text
font-sizesets how big text is, usually in pixels:font-size: 24px;.font-weight: bold;makes text bold (usenormalto undo it).font-family: Georgia;changes the typeface — the style of the letters.
日本語
テキストサイズ
font-sizeはテキストのサイズを設定し、通常ピクセル単位で指定します：font-size: 24px;。font-weight: bold;でテキストを太字にします（normalで解除可能）。font-family: Georgia;でフォント（文字のスタイル）を変更します。
English
Aligning text
text-alignmoves text left, center, or right inside its box.text-align: center;is great for titles.line-height: 1.6;adds space between lines, so paragraphs are easier to read.
日本語
テキスト配置
text-alignでテキストを左揃え、中央揃え、または右揃えにします。text-align: center;はタイトルに最適です。line-height: 1.6;は行間にスペースを追加するため、段落が読みやすくなります。
<style>
h1 { font-size: 36px; text-align: center; }
p { font-family: Georgia; line-height: 1.6; }
</style>
<h1>My story</h1>
<p>Once upon a time, on a small website...</p>
English
Common mistakes
font-size,font-weightandtext-aligncontrol text.- Sizes often use
pxorrem.
日本語
よくあるミス
font-size、font-weight、text-alignはテキストを制御します。- サイズは通常
pxまたはremを使用します。
English
Now you try
- These properties stack up — one box can have several.
- Resize a heading, then center a paragraph.
日本語
あなたも試してみよう
- これらのプロパティは積み重なります（1つのボックスに複数の値を指定できます）。
- ヘッダーのサイズを変更し、段落を中央配置にします。
Make the heading bigger. Add h1 { font-size: 40px; }. · 見出しを大きくしてください。h1 { font-size: 40px; }を追加してください。
Center the paragraph on the page. Add p { text-align: center; }. · 段落をページ上で中央に配置してください。p { text-align: center; }を追加してください。