【CSS Modules】break-insideプロパティの使い方
break-insideプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
break-insideプロパティは、CSS Modulesの一部として、要素のコンテンツがページ、段組（カラム）、または領域をまたいで分割されることを制御するプロパティです。このプロパティは、特にWebページを印刷する際や、テキストコンテンツを複数の段組（マルチカラムレイアウト）で表示する際に、内容の視認性や可読性を高めるために重要です。
例えば、Webサイトのコンテンツを印刷する際、見出しと本文がページの途中で分断されたり、画像が途中で切れて次のページに表示されると、読みにくくなってしまいます。また、雑誌のような多段組レイアウトで記事を表示する際に、一つのセクションがカラムの途中で分かれてしまうと、構成が理解しにくくなります。break-insideプロパティは、このような望ましくない分割が発生しないように調整することを目的としています。
このプロパティにはいくつかの値を指定できます。break-inside: auto; は初期値であり、必要に応じて要素内部で分割が行われることを許可します。一方、break-inside: avoid; を指定すると、ブラウザは可能な限り要素の内部での分割を避け、要素全体を同じページ、カラム、または領域内に収めようと試みます。より詳細な制御が必要な場合は、break-inside: avoid-page; でページ分割を、break-inside: avoid-column; で段組の分割を、break-inside: avoid-region; で領域分割を避けるよう具体的に指示することも可能です。
このプロパティは主にブロックレベルの要素に適用され、コンテンツの自然な流れを尊重しつつ、見栄えの良いレイアウトを維持する手助けをします。ただし、要素の内容が非常に大きく、物理的に単一のページやカラムに収まりきらない場合には、このプロパティが指定されていても分割が行われる可能性がある点に留意が必要です。これは、コンテンツの表示領域を考慮し、内容が完全に隠れてしまうのを避けるための挙動です。
構文(syntax)
1selector { 2 break-inside: auto; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
auto | avoid
break-inside プロパティは、要素の内部でのページ分割やカラム分割を制御します。指定できる値は auto または avoid です。auto はデフォルト値で、ブラウザが自動的に分割を判断します。avoid は、要素の内部で分割が行われないように指示します。