よくあるデザインで起こる想定外のコンテンツに備える、CSSの実装方法のまとめ

タイトルやラベルの文字数が多くなったり、ボタンの数が増えたり、コンテンツが長い場合と短い場合があったり、想定外のコンテンツが使用された場合に対応できるよう、念のために備えたCSSの実装方法を紹介します。

現状はボタンが2個だけど、1個の場合や3個以上に増える場合も考慮して実装しておくと、メンテナンスが楽になります。

The Just in Case Mindset in CSS
by Ahmad Shadeed

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• 「念のため」の考え方
• よくあるデザインで起こる想定外に備える
• 終わりに

はじめに

Webサイトを構築する際に、コンポーネントがさまざまな条件下で機能するか確認したい場合がよくあります。「念のため（Just in Case）の考え方」とは、そのコンポーネントに起こりうるシナリオを事前に考えて取り組むようにデザイナーとデベロッパーを教育することを目的としています。

この記事では一般的なデザインで起こる事例、コンテンツが長くなったり、想定していたものと違った場合の対応方法について解説します。
さっそく、始めましょう！

「念のため」の考え方

念のため（Just in Case）の全体的なコンセプトは、未知の状態を想定して明らかにすることです。この考え方を使用することで、あなたが遭遇するかもしれない問題を減らすことができます。

準備していない場合と準備した場合の違いは、たった1行のCSSかもしれません。ここでは、そのようなグッドプラクティスを簡単に実装する方法を解説します。

よくあるデザインで起こる想定外に備える

タイトルが長くなった時に備える

タイトルが短ければ問題ないが、長い時にアイコンにくっつくのを防止しておく

このコンポーネントでは、タイトルは1つの単語でも複数でも構いません。タイトルが右のアイコンにくっつかないようにするには、念のためにタイトルが長くなった場合に備えてmargin-right: 1rem;を追加しておくと良いでしょう。

ボタンが増えた時に備える

2つのボタン間のマージンをどう実装するか

2つのボタンを並べて配置したい場合、デフォルトでボタンに直接marginを与えずに実装するにはどうすればよいでしょうか？

これは隣接セレクタのおかげで、簡単に実装できます。あるボタンが他のボタンの隣にある場合、2番目のボタンに左マージンを与えます、念のためににです。

カテゴリが長くなった時に備える

カードコンポーネントの場合、カテゴリのタグが必要になることがあります。コンテンツのさまざまなバリエーションをどのように処理しますか？

カテゴリが長い時はどうする？

右のカードはカテゴリが長く、サムネイル画像を大きく覆っているので見栄えがよくありません。食料品を扱うサイトでは特に、画像は非常に重要です。

念のためにカテゴリが長くなった場合に備えて、考えられる解決方法を紹介します。

カテゴリが長くなった場合の解決方法

左の1つ目の解決方法は、max-widthとテキストの省略を使用する方法です。右の2つ目の解決方法はmax-widthだけを使用して2行に表示する方法（非常に長い場合は失敗します）です。

コンテンツが少ない時に備える

コンテンツが長い場合は、スクロール可能にする

要素をスクロール可能にする必要がある場合、CSSを下記のように記述したくなるかもしれません。

このCSSの問題点は、コンテンツが短くてもスクロールバーが常に表示されてしまうことです。解決方法は、autoを使用します。これで念のために対応できます。

画像の読み込みに失敗した時に備える

ヒーローセクションの背景に<img>を使用している場合、何らかの理由で画像の読み込みに失敗することがあります。その場合、フォールバックがあるとしたらどうでしょうか？

画像の読み込みに失敗した場合

念のために画像の読み込みに失敗した場合に備えて、background-colorを用意しておくと、フォールバックとして機能します。

画像のサイズが適切でない時に備える

これは、アバターの画像が伸びたり縮んだりしているように見える非常に一般的な例です。

アバターの画像が伸びたり縮んだりして見える

object-fit: cover;を使用することで回避できます。これは念のために備えたものとして機能します。object-fit: cover;がないと、画像の見栄えが悪くなります。

終わりに

ここまで見てきたように、すべての例は想定外のコンテンツが使用された具体的な事例を解説しました。念のために備えて、実装しておくとよいでしょう。

コメントや提案があれば、@shadeed9までお願いします。