CSS Tips

• コンテンツが少ない時もフッターを画面下に固定する
• 内容が少ない時は中央揃え、長くなると上揃えにする
• 長いテキストが親要素を貫通する問題を解決する
• container を貫通して画面幅にする場合（サイドバーがない場合のみ有効）
• header と content の高さ用のユーティリティを作る
• container をデフォルトで中央揃えにする
• prose でインラインコードのバッククォートを消す

細かい気配り

ページ内スクロール時に画面上部との余白を設ける。

特にヘッダーが固定されている場合、見出しがヘッダーに被って見えなくなることがある。

行間、字間を調整して読みやすさを調整

PCファーストで開発すると折り返しが少ないため気付きづらいが、折り返した時の読みやすさを調整するために行間は少し広めに設定すると良い。

また、字間（tracking-wide）を広くすると重要なボタンやキャッチフレーズをより際立たせることができる。

ヒーローセクションの高さをスクリーンサイズに合わせる

dvh を使うと iOS Safari でスクロールした際に Safari のアドレスバーが表示されるため、高さの基準が変わってがたつきが生じる。後続の要素がある場合は dvh ではなく lvh を使う。

Next.js 環境で最初に行う調整

globals.css で container のデフォルトスタイルを定義

body に wrap-anywhere を付与する

shadcn/ui のコンポーネントをカスタマイズする（オプション）

• Button に font-semibold を加える（日本語がはっきり表現されるため）
• Button に type="button" をつける（フォーム内で誤って送信されるのを防ぐため）
• Input の autoComplete を off にする（必要な場面でセットする方式にする）