タイポグラフィ
ウェブ上で人々が読むもののほとんどはテキストであり、ページが放つ雰囲気の大部分はそのテキストがどのように配置されているかから生まれます。タイプフェイスを変更し、行間隔を調整し、行の長さを制限すれば、同じパラグラフは窮屈で不快な見た目から落ち着きがあり読みやすい見た目に変わります。これは装飾ではありません。タイポグラフィです。テキストを読むのがどれほど快適かを決定するCSSプロパティの数々であり、このチャプターは日々使用するものの一覧です。
フォントの選択
フォントを選択するプロパティはfont-familyであり、1つのフォントではなくリストを指定します。このリストは**フォントスタック**です。ブラウザは最初のフォントを試し、そのフォントが利用できない場合は次のフォントにフォールバックし、以下同様に続きます。
body {
font-family: "Helvetica Neue", Arial, sans-serif; /* Helveticaを試す、次にArial、最後は任意のサンセリフ */
}リストの最後は常にsans-serifやserifのようなジェネリックファミリーであるべきです。これがセーフティネットです。名前付きフォントがリーダーのデバイスにない場合でも、ブラウザは選択していないデフォルトではなく何か適切なものを表示します。スペースを含むフォント名は引用符で囲みます。1語のフォント名は引用符は不要です。
font-familyは1つのフォントではなくリストを取ります。ブラウザは見つけることができる最初のフォントを使用します。リストの最後は常にsans-serifのようなジェネリックファミリーで終了して、安全なフォールバックがあるようにします。スペースを含む任意のフォント名を引用符で囲みます。 テキストのサイズ設定
テキストサイズはfont-sizeで設定します。ピクセルで値を指定できますが、到達すべきサイズは**rem**です。これはページのベースフォントサイズに結びついた単位です。1つのremはブラウザのデフォルトテキストサイズに等しく、これは通常16pxであるので、1remは通常の読みサイズで、1.25remは少し大きいサイズです。
body {
font-size: 1rem; /* ベースの読みサイズ、通常16px */
}
h1 {
font-size: 2rem; /* ベースサイズの2倍 */
}font-sizeはテキストがどのくらい大きいかを設定し、remは到達すべき単位です。1つのremはブラウザの通常のテキストサイズであるため、1remは通常で、2remは2倍大きいです。本文テキストをpxでサイズ設定することを避けてください。次のレベルがそれを掘り下げます。 ウェイトとスタイル
2つのプロパティが文字の形状を変更します。font-weightはテキストがどのくらい太いかを制御し、font-styleは**イタリック**をオンにします。
strong {
font-weight: bold; /* より重く、より太いストローク */
}
em {
font-style: italic; /* 斜めに傾いている */
}boldとnormalは日常のウェイトキーワードです。イタリックについては、italicはテキストを傾け、normalは直立したままにします。
font-weightはテキストをより太くまたはより薄くし、font-style: italicがそれを傾けます。キーワードboldとnormalは、日々のほとんどが必要です。読みにくい全体的な段落にはイタリックを使用しないで強調に使用します。 テキストを読みやすくするための間隔
快適なテキストはほぼスペースについてです。line-heightは行間のギャップを制御し、それに少しスペースを与えることで、段落がはるかに読みやすくなります。
p {
line-height: 1.5; /* フォントサイズの1.5倍 */
}1.5のような単位のない平数値を使用してください。これは「フォントサイズの1.5倍」を意味するため、スペーシングはテキストとともに成長します。詰まった行は、ページが読むのが難しい理由の最も一般的な理由の1つであり、この1つの値はほとんどを修正します。
line-heightは行間のスペースを設定し、約1.5の値はテキストをはるかに読みやすくします。単位のないプレーンナンバーとして記述して、スペーシングがテキストで成長するようにします。詰まった行はページが読むのが難しい感じる最大の理由であり、これはほとんどを修正します。 配置と装飾
3つのプロパティが配置と仕上げのタッチを処理します。text-alignはテキストを左、右、中央に移動します。text-transformはケースを変更します。すべての大文字にするなど。そしてtext-decorationは下線などのラインを追加または削除します。
h1 {
text-align: center; /* 見出しを中央に */
}
.button {
text-transform: uppercase; /* すべての大文字として表示 */
text-decoration: none; /* リンク下線を削除 */
}text-transform: uppercaseはテキストを再入力せずに大文字で表示するため、元のコンテンツは通常の単語のままです。下線はtext-decorationで追加または削除されます。
text-alignはテキストを左、右、中央に移動し、text-transform: uppercaseは大文字で表示し、text-decorationは下線などのラインを追加または削除します。CSSでの大文字化は、実際のテキストを通常の単語として保つため、二度と大文字で再入力することはありません。リンクの下線を削除したい場合はtext-decoration: noneに到達します。 フォント短縮形と継承
フォントプロパティは便利な特性を持っています。それらは降ります。font-familyを<body>に設定し、その内側のすべての段落、見出し、リンク継承は、自分自身を繰り返すことはめったにありません。
body {
font-family: system-ui, sans-serif; /* これの内側のすべてがこれを継承 */
line-height: 1.5;
}このため、タイポグラフィのほとんどはスタイルシートの上部近くの1つの場所に住んでいて、個々の要素は異なるものだけをオーバーライドしています。
bodyに1回font-familyを設定し、すべてが継承します。これはタイポグラフィをスタイルシートの上部近くの1つの場所に保ちます。個々の要素は、異なる必要があるビットのみをオーバーライドします。