デザインの微調整に便利なプロパティ
overflow-x: scroll並びにletter-spacingの活用
ウェブ制作では、様々なデバイスに対応するために、レスポンシブ対応で調整します。しかし、その対応だけでは細かい調整ができないことがあります。テキストが一部だけ長くなり、そのために全体的なデザイン崩れが発生することを防ぐために調整する便利なプロパティが存在します。以下では、そのようなプロパティを紹介します。
実装内容
以下は当サイトを携帯の実機で録画した内容になります。適応した箇所は、パンくずリスト・記事の見出し・コードエディタの部分になります。
このようにテキストが横幅を超える場合でも、スクロールさせることでデザインの崩れを防ぐことができます。
関連のプロパティの説明
overflow プロパティは、コンテンツがそのボックスを超えたときに何が起こるかをCSSで制御するために使用されます。
overflow-x は、水平方向にボックスを超えるコンテンツに何が起こるべきかを指定します。
overflow-x: scroll; は、オーバーフローがない場合でも常に水平スクロールバーを表示します。
overflow-x: auto; は、オーバーフローがある場合のみ水平スクロールバーを表示します。
overflow-x: hidden; は、オーバーフローしているコンテンツを隠し、水平スクロールバーは表示されません。
デザインの調整
パンくずリスト
ポイント
1列にしたい要素の横幅を100%以上(値はどのような単位でも良い)、ここではmax-contentプロパティを使用してテキストの最大幅まで広げています。
そして、その要素の親要素にoverflow-x: scroll;を指定することで構築できます。
見出し
見出しについては、後続のテキストに影響を与えないようにスクロールさせる必要があります。
パンくずリストと同じように、セクション全体の親要素にスクロールを適用するとうまくいきません。
ポイント
見出しをdivタグで囲み、そこにスクロールを設定すると上手く構築することができます。
テキストの微調整
letter-spacing
最小の横幅になった場合のみ、テキストが2行になることがあります。こちらを調整するのに便利なプロパティになります。
tailwindでは、trackingクラスで指定することができます。
以上です。また、レスポンシブ対応により、タブレットの横幅になった場合には、スクロールを消すための設定やテキストの横幅を元に戻すための記述を行うことで、デザインがさらに向上します。
- overflowは基本的に親要素に指定することで機能する。
- テキストの幅を調整するのには、letter-spacingプロパティを使用。
- レスポンシブ対応で横幅が確保された場合には、値を元に戻すことも重要。