[CSS]テキストが長いとレイアウトが崩れる！予期せぬコンテンツに対応するためのスタイルシートのテクニック

テキストとアイコンを横並びさせたボタン、カテゴリのテキストを配置したラベル、ラベルが長いフォームなど、これらのテキストが長いとレイアウトが崩れてしまうことがあります。
レイアウトが崩れてしまう予期せぬコンテンツに対応するためのスタイルシートのテクニックを紹介します。

Handling Long and Unexpected Content in CSS
イラスト: Girls Design Materials

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

• 01. 左右どちらかにアイコンが配置されたボタン
• 02. ラベルに重なってしまうフォームのボタン
• 03. テキストが長くてスペースに収まらない場合
• 04. リンクが長くてはみ出してしまう場合
• 05. タグのテキストが長くてはみ出してしまう場合
• 06. 両端揃えのテキストが長いと重なってしまう場合
• 終わりに: レイアウトの崩れを検証するための方法

01. 左右どちらかにアイコンが配置されたボタン

これは例えば、アコーディオンのトグルボタンです。パネルの右側には、クリック可能であることが分かるようにアイコンが配置されています。

テキストとボタンが重なってるぞ！

このパネルのエリアは十分に大きくないと、テキストがアイコンに重なってしまいます。

解決方法

これを解決するには、アイコンの右側に十分な余白を加えます。

余白はpaddingがよいでしょう。
これでテキストが長くなっても、レイアウトは崩れません。

アイコンの右側に余白を設定

実際の動作は、下記ページでご覧ください。

02. ラベルに重なってしまうフォームのボタン

フォームのラベルをフロートさせ、ボタンと並べて配置した時に起きる現象です。

ラベルがボタンに重なった！

ラベルをフロートされているため、テキストが長い場合、ボタンに重なってしまいます。

解決方法

これを解決するにはボタンに「position: relative;」を加え、ボタンがラベルの上になるようにします。

実際の動作は、下記ページでご覧ください。

03. テキストが長くてスペースに収まらない場合

下記のように、画像の右に著者名のテキストをフロートで配置した時、そのテキストが長い場合にレイアウトは崩れます。

テキストが長いから、下に落ちてしまった！

この問題点は、画像を左側にフロートさせたということです。これにより右のテキスト、著者名を移動させてしまうことがあります。もちろんテキストが短ければ、うまくいくでしょう。

解決方法

レイアウトをより堅牢な実装にするには、画像をフロートさせ、著者名のラッパーに「overflow: hidden;」を加えます。この実装により、画像と著者名が関連づけられ文脈の利点も得ることができます。
もう一つの解決方法として、こういった小さなコンポーネントに適しているflexboxを使うことです。

実際の動作は、下記ページでご覧ください。

04. リンクが長くてはみ出してしまう場合

リンクを掲載する場合、長いテキストの場合があります。

リンクが長くて、はみ出てる！

ビューポートが広ければ問題ないかもしれません。しかし、スマホやタブレットのような小さいスクリーンでは横方向のスクロールが必要になり、いらいらの種になります。
これを解決するには、2つの方法があります。

解決方法: その1

word-breakを使い、テキストが改行するように指定します。

word-breakはブラウザ間で若干の相違があるため、十分なテストが必要です。詳しくは、下記ページをご覧ください。
参考: Handling Long Words and URLs

解決方法: その2

ラッパー要素にoverflowを追加し、リンクにtext-overflowを追加します。

このテクニックはword-breakを使うより安全で、リンクにも適しています。しかし、テキストの一部が表示されなくなるので、個人的にはword-breakをお勧めします。

左: overflow、右: word-break

実際の動作は、下記ページでご覧ください。

05. タグのテキストが長くてはみ出してしまう場合

ブログでもよく見かける、カテゴリのタグのテキストです。

テキストが長くて、タグからはみ出てる！

通常タグを実装する際、テキストの空きはpaddingで指定する場合が多いですが、幅や高さを指定してしまうと、テキストがあまりに長い時にはみ出してしまいます。

解決方法

タグの幅を最小限にしたい場合は問題ありません。タグの内容を囲むようにmin-widthを使用することができます。そうすれば、幅は動的になり、問題は解決されます。

実際の動作は、下記ページでご覧ください。

06. 両端揃えのテキストが長いと重なってしまう場合

タイトルを左寄せに、リンクを右寄せにしたタイトルの一覧で起こりがちな現象です。

テキストが長くて、重なってしまう！

タイトルのテキストが長い場合に、リンクと重なってしまいます。

解決方法

すぐに思いつく解決方法は、リンクを絶対位置で配置することかもしれませんが、もっとも良い解決方法はflexboxを使用することです。テキストとリンクのスペースが十分にない場合には、自動的にリンクを下の行に配置します。

テキストが長い場合は、リンクを下の行に配置

このテクニックは「アライメント シフティング ラッピング」と呼ばれています。
参考: Useful Flexbox Technique

終わりに: レイアウトの崩れを検証するための方法

ページを実装する際に、ダミーのデータや適当に要素を追加するだけでは不十分だということを学びました。実装したレイアウトが壊れるまで、すべてのタイプのコンテンツを検証する必要があります。
わたしは、特定のコンポーネントにランダムな要素を加える「forceFeed.js」をよく使用します。