「テキストが窮屈に見える」「ボタンの文字が長くて崩れる」「中央揃えがうまくいかない」…。
コード自体は動いていても、ちょっとした“見た目の違和感”に悩まされることって多いですよね。
私も最初のころは、line-height や letter-spacing をどう指定すればよいか分からず、試行錯誤の繰り返しでした。
ですが一度ルールを整理して覚えると、調整にかかる時間がぐっと減り、デザイン全体が落ち着くようになりました。
このページでは、よく使うCSSの調整方法やデザイン改善の工夫をまとめています。
「もう少し見やすくしたい」「整えたい」と思ったときに、参考にしてくださいね。
CONTENTS
レイアウト調整の小技
- 中央揃えに困ったら flexbox を使う
- inline-block要素で制御する
- テキストを両端揃えにする
- 縦書きを行う
リストや装飾の工夫
- liタグの先頭の位置と改行位置を調整する
- リストマーカーをカスタマイズする
- border-radiusの決め方と書き方
テキスト表示の改善
- 3点リーダーで長い文章を省略する
- line-heightの指定と余白の考え方
- line-heightの余白を打ち消す
- letter-spacingのズレと対策
- 文字のカーニングを調整する
フォントとサイズ感
- フォントサイズの指定ルール（px, em, remの使い分け）
- CSSリセットの必要性
おわりに
CSSの調整は「正解がひとつではない」からこそ、迷いやすい部分でもあります。
小さな工夫を積み重ねることで、読みやすさや見た目の印象は大きく変わりますよ。