[CSS]テキストが長いとレイアウトが崩れる！予期せぬコンテンツに対応するためのスタイルシートのテクニックテキストとアイコンを横並びさせたボタン、カテゴリのテキストを配置したラベル、ラベルが長いフォームなど、これらのテキストが長いとレイアウトが崩れてしまうことがあります。 レイアウトが崩れてしまう予期せぬコンテンツに対応するためのスタイルシートのテクニックを紹介します。 Handling Long and Unexpected Content in CSS イラスト: Girls Design Materials 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 左右どちらかにアイコンが配置されたボタン 02. ラベルに重なってしまうフォームのボタン 03. テキストが長くてスペースに収まらない場合 04. リンクが長くてはみ出してしまう場合 05. タグのテキストが長くてはみ出してしまう場合 06. 両端揃えのテキストが長い
![[CSS]テキストが長いとレイアウトが崩れる！予期せぬコンテンツに対応するためのスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2e33134d6d625cb142994a08293c23978551124/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017062312.png)
[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar![[CSS]超軽量で快適！スクリプト無しで実装されたレスポンシブ対応のナビゲーション -Luxbar](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac45d35aaf5f1c4fa8e28270b3156a50754ca6ce/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017022201.png)
