Availability-tracker は何をしますか？
流体的タイポグラフィスケール、フォントペアリング（エディトリアルセリフ＋テクニカルサンセリフ）、オプティカルカーニング、垂直リズム、レイアウトシフトのない最新のCSS clamp()システムを習得します。
概要
このスキルは、CSSにおける高度なタイポグラフィ技術を習得するためのものです。具体的には以下のトピックをカバーします：
- 流体タイポグラフィスケール: 画面サイズに応じて自動的に調整されるフォントサイズのシステム。
- フォントペアリング: エディトリアルセリフ（例：Merriweather）とテクニカルサンセリフ（例：Inter）の組み合わせ。
- オプティカルカーニング: フォントの視覚的な間隔を最適化する技術。
- 垂直リズム: テキストの行間とベースラインを統一するための手法。
- CSS
clamp()システム: 最小値、推奨値、最大値を指定して、レイアウトシフトを防ぎながらレスポンシブなデザインを実現。
なぜ重要か
現代のWebデザインでは、異なるデバイスや画面サイズに対応するために、タイポグラフィが柔軟である必要があります。これらの技術を習得することで、以下のメリットがあります：
- 可読性の向上: どの画面でも最適なフォントサイズと間隔を維持。
- パフォーマンス: レイアウトシフトが発生しないため、Core Web VitalsのCLS（Cumulative Layout Shift）スコアが改善。
- メンテナンス性: 一貫したタイポグラフィシステムにより、コードの管理が容易。
基本的な使用法
/* 流体タイポグラフィスケールの例 */
html {
font-size: clamp(16px, 1rem + 0.5vw, 20px);
}
h1 {
font-size: clamp(2rem, 4vw + 1rem, 4rem);
line-height: 1.2;
}
h2 {
font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
line-height: 1.3;
}
p {
font-size: clamp(1rem, 1vw + 0.8rem, 1.2rem);
line-height: 1.6; /* 垂直リズムの基本 */
}
フォントペアリングの例
body {
font-family: 'Inter', 'Helvetica Neue', sans-serif; /* テクニカルサンセリフ */
font-feature-settings: 'kern' 1; /* オプティカルカーニング */
}
article {
font-family: 'Merriweather', 'Georgia', serif; /* エディトリアルセリフ */
}
code, pre {
font-family: 'Fira Code', 'Source Code Pro', monospace;
}
垂直リズムの実装
:root {
--base-unit: 1.5rem; /* 基本行間 */
}
body {
line-height: var(--base-unit);
}
h1, h2, h3 {
margin-top: calc(var(--base-unit) * 1);
margin-bottom: calc(var(--base-unit) * 0.5);
}
p {
margin-bottom: var(--base-unit);
}
注意点
- ブラウザ互換性:
clamp()はモダンブラウザでサポートされていますが、古いブラウザではフォールバックを用意してください。 - パフォーマンス: 大量の
clamp()使用はレンダリングに影響を与える可能性があるため、適度に使用してください。 - アクセシビリティ: ユーザーがブラウザのフォントサイズ設定を変更できるように、相対単位（rem, vw）を優先して使用してください。