画像の高さをオーバーしたら、
画像の下にテキストが回り込む

Bootstrap5.3でテキスト回り込み

画像の高さをオーバーしたら、画像の下にテキストが回り込む

結論からいうと…
「col-md-5 に画像」「col-md-7 にテキスト」という別カラム構成のままでは、テキストを画像の下に“回り込ませる”ことはできません。

ここでやりたいのは、"画像の高さをオーバーしたら、画像の下にテキストが回り込む"という設定です。

下の画像は、「col-md-5に画像」を、「col-md-7にテキスト」を入れるという設定をしています。

Bootstrap の .row は flexレイアウトなので、col-md-5 と col-md-7 は別々の箱です。

画像にテキストを回り込ませるには、「float」というCSSプロパティを使用します。

「float」は「同じ箱の中の要素」にしか効かないので、「col-md-4に画像」、「col-md-8にテキスト」となっていると、いくら画像に「float」を付けてもcol-md-8のテキストは画像の下には回り込めません。

では、どうしましょうか？

1カラムの中で画像を float させる

「回り込み」をしたい箇所だけ、1カラムにまとめてしまうのが一番シンプルです。

【例】5.3　文書管理における日米の比較

PC（md以上）：画像が左・テキストが右に回り込み → 画像の高さを越えたテキストは下へ
スマホ（md未満）：画像が上、テキストが下（普通の縦並び）

以下の画像は、【例】「5.3　文書管理における日米の比較」に回り込みの対応をした例です。

回り込みに書き換えた HTML例

ポイントは「画像とテキストを同じカラム(col-12)に入れる」ことです。

<div class="row">
   <div class="col-12">
     <h4 class="subtxt">5.3　文書管理における日米の比較</h4>
   </div>

   
   <div class="col-12 pt-3">
     <img src="../img/service_docmgt/docmgt-09.jpg" alt="文書管理における日米の比較" class="img-fluid float-md-start me-md-3 mb-3 docmgt-img" loading="lazy">

     <p class="lead">「文書管理」をする根本原理として、アメリカでは専制君主による圧政から逃れてきたという経緯もあって意図的にも「民主主義」に対する考えがベースにあったのに対し、日本では最高意思決定者としての天皇の権威を裏付けるためであり、過去の判断の正当性を保証する前例主義を文書管理の主たる目的としていました。この考えは、概ね、1945年まで継続されてきたと言えそうです。</p>

     <p class="lead">アメリカでの文書管理の原点に、いきなり「民主主義」という言葉を使っていますが、建国の父たちが目指したのは「啓蒙思想に基づく自由主義・共和主義」であったようですが、時代の中で「民主主義」へと包括されていったのだそうです。</p>
   </div>
</div>

画像幅を「col-md-5 相当」にする CSS


              .docmgt-img {
                max-width: 100%;
                height: auto;
              }

              /* md以上のときだけ col-md-5 相当の幅にする */
              @media (min-width: 768px) {
                .docmgt-img {
                  max-width: 41.666%; /* 12分割中の5カラム分 33.333％でも良い*/
                }
              }

NGだったところ

col-md-5 と col-md-7 に分かれていたので、画像とテキストが「別の箱」扱い float-start が効かず、回り込みにならない。/li>

今回の修正

画像とテキストを同じ <div class="col-12"> に入れ、
画像に float-md-start を指定して、md以上で左回り込みに。
me-md-3 で画像右に余白、mb-3 でスマホ時も下に余白。
画像幅は CSS で「col-md-5 くらい」に調整。

これで、

PC：画像が左、テキストが右に回り込み、溢れたテキストは画像の下へ
スマホ：画像 → テキストの縦並び

になるはずです。

✅ 右側に回り込ませる場合は

float-md-start → float-md-end に変更するだけでOKです。

Bootstrap5.3のfloat-* クラスは以下のとおり：

クラス名	動き
float-start	左に回り込み
float-end	右に回り込み
float-md-start	md以上で左回り込み（スマホでは解除）
float-md-end	md以上で右回り込み（スマホでは解除）

✅ 右側に回り込ませるコード例

変更箇所

float-md-end → 右回り込み
ms-md-3 → 画像の左側に余白（margin-start）

✨ 補足：画像幅（col-md-5 相当）は左右同じでOK

CSS の max-width: 41.666% は左右どちらの回り込みでもそのまま使えます。

回り込みは、単なる“おしゃれ”のためのテクニックではありません。
文章量が変わってもレイアウトが破綻せず、読みの流れを保てることが本質です。
その結果として、上から下へスクロールしたときに、
左右に配置された画像がリズムを生み、ページ全体が美しく見える。
Bootstrap5.3での回り込みは、実務と見た目のバランスを両立できる方法だと感じています。

画像の高さをオーバーしたら、画像の下にテキストが回り込む