SharePoint Image Galleryカルーセルの画像下に出る白いラインの原因と消し方｜CSSで余白を解消する方法

SharePoint Online の Image Gallery（カルーセル）で、画像の下に謎の「1px の白い線」が出て消えない…という悩みは意外と多く発生します。この記事では、この現象の背景にある CSS の仕組みを整理しながら、設定だけでできる回避策から、SPFx 等での CSS 上書きによる実務的な解消方法、チーム運用のポイントまでを丁寧に解説します。

Image Gallery（カルーセル）で画像の下に白いラインが出る現象とは

SharePoint のモダン ページで Image Gallery Web パーツを「カルーセル」レイアウトにすると、次のような現象が発生することがあります。

• 画像のすぐ下に、1px 前後の細い白いライン（余白）が見える
• DOM を確認すると、ラッパー要素（例：div.carouselItemWrapper）の高さが画像より少しだけ大きい
• 例：ラッパーが 332.83px、画像が 329.63px などのように微妙にズレている
• ブラウザーや表示倍率（100％ / 125％ / 150％ など）によって、見え方が変わる

この白いラインは、いかにも「バグ」のように見えますが、実際には次のような要因が重なって起きる 仕様に近い挙動（by design） です。

項目	例	説明
ラッパー要素の高さ	332.83px	カルーセルのレイアウト計算により決まる高さ。小数 px になることが多い。
画像タグの高さ	329.63px	アスペクト比維持のために計算された高さ。こちらも小数 px になる。
見えている隙間	1〜2px 程度	整数 px への丸め＋インライン画像のベースライン隙間による視覚的な「線」。

SharePoint の標準 UI では、この高さや余白を数値で直接制御する設定は用意されていません。そのため、設定だけで完全に「無くす」ことは難しく、回避策の組み合わせが現実的なアプローチになります。

なぜ白いラインが出るのか：原因をフロントエンド的に整理する

ラッパー要素のレスポンシブ計算とサブピクセル

カルーセル レイアウトでは、以下のような処理が裏側で行われています。

• 表示幅に応じて「1画面に何枚見せるか」を動的に計算
• その結果に基づいて、各カルーセル項目の幅・高さを算出
• CSS トランジションやアニメーションに対応するため、ラッパーを余裕を持った高さにしていることが多い

この時、ブラウザーは 1px 単位ではなく 小数点付きの「サブピクセル」 でレイアウト計算を行います。例えば、

• ラッパー高さ：332.83px
• 画像高さ：329.63px

のように計算されますが、実際の描画ではモニターの解像度に合わせて 四捨五入や切り上げ／切り捨て が行われます。その結果、「ラッパーだけが 333px、画像は 330px」といったズレが生じ、下側に 1〜3px 程度の余白が見えることになります。

画像が inline 要素のままで起きる「ベースライン隙間」

ブラウザーの世界では、<img> タグは初期状態で display: inline の要素として扱われます。つまり、テキストと同じ「行ボックス」の中で配置される対象です。

テキストには、「g」「y」などの文字の下に出る部分（ディセンダー）を描画するためのスペースが用意されています。このため、画像をインライン表示すると、下側にテキスト行と同じだけの“下がり”スペースが確保され、結果的に

• 画像の下に 2〜4px 程度の隙間が入る
• 背景が白のときは「白い線」、ダークテーマのときは「黒っぽい線」に見える

という現象が起きます。これは SharePoint 固有の問題ではなく、Web フロントエンドでは古典的な「画像のベースライン隙間問題」としてよく知られているものです。

表示倍率・ブラウザーごとの差異

さらにやっかいなのが、表示倍率やブラウザーによって見え方が変わる点です。

• 拡大率 100％ では線が見えないのに、125％ では突然線が出る
• Edge では目立つが、Chrome ではあまり気にならない
• ノート PC の 150％ 拡大時だけユーザーからクレームが来る

これは、ブラウザーごとのサブピクセルの丸め方やアンチエイリアス処理の違いによるものです。つまり、「テストした環境では問題なく見える」のに、ユーザー環境では線が出るという状況が十分にあり得ます。

原因	技術的背景	対処の方向性
ラッパー高さのサブピクセル	レスポンシブ計算結果が小数 px になり、描画時に丸められる	height: auto や overflow: hidden で余白を隠す
インライン画像のベースライン隙間	display:inline の画像にテキスト用の下側スペースが付与される	display:block や vertical-align: middle などで解消
拡大率・ブラウザー差	サブピクセルの丸め方がブラウザーや DPI で異なる	複数ブラウザー＆拡大率での検証と、余裕を持った CSS 設計

コード不要で試せる回避策：まずはここから

テナントのポリシーによっては、独自 CSS の注入が禁止されている場合もあります。そのような環境では、まず SharePoint 標準の設定だけでどこまで改善できるか を試してみるのがおすすめです。

レイアウトを「カルーセル」から「タイル／レンガ」に変更する

同じ Image Gallery Web パーツでも、レイアウトを変えると余白の出方が大きく変わります。実務ではカルーセルのときだけ白いラインが目立つケースが多く、次のような対応で改善することがあります。

1. 対象のページで「ページの編集」をクリック
2. Image Gallery Web パーツをクリックしてツールバーを表示
3. 右側の設定ペインで「レイアウト」の項目を「カルーセル」から「タイル」または「レンガ（Bricks）」に変更
4. ページを保存／発行し、表示を確認

カルーセルに特有の高さ計算が行われなくなるため、画像とラッパーの高さ差が小さくなり、白いラインが目立たなくなることがあります。

画像アスペクト比を統一してズレを抑える

サイズも比率もバラバラな画像をカルーセルに入れると、画像ごとにサブピクセルの丸め方が変わり、1枚ごとに余白の出方が異なることがあります。そこで、次のように画像を揃えると、見え方が安定しやすくなります。

• すべての画像を 16:9 または 4:3 など同じアスペクト比に揃える
• 推奨サイズをあらかじめチームで決めておく
  • 例：横 1920px × 縦 1080px（16:9）
  • 例：横 1200px × 縦 675px（軽量版 16:9）
• 画像編集ツール（PowerPoint, Photoshop, Canva など）でテンプレート化する

画像の元サイズ・比率が揃っていると、カルーセル内部のレイアウト計算がシンプルになり、ラッパーと画像の高さ差が一定に収まりやすくなるため、白いラインが目立ちにくくなります。

背景色を合わせて「線を見えなくする」

完全に余白をゼロにできない場合でも、背景色の工夫で視覚的な違和感を減らすことができます。

• サイトのテーマカラーと画像の背景色を近い色にする
• カルーセルの配置セクションの背景色を、画像の背景色と揃える
• 画像の上下に帯をつける（デザインとしての余白に見せる）

白い背景の上に白い画像を置けば「線」は見えませんし、逆にダークな背景なら、あえて画像の上下にダークな帯をつけることでラインをデザインの一部として取り込むことも可能です。

回避策	メリット	デメリット
レイアウト変更（カルーセル → タイル／レンガ）	設定だけで対応可能。CSS 変更不要で安全。	カルーセルの「横スクロール」表現が失われる。
画像アスペクト比の統一	他の Web パーツでも見栄えが良くなる副次効果。	既存画像の加工作業が必要になる。
背景色の調整	デザインの一部として違和感を隠せる。	完全に余白が消えるわけではない。

CSS 上書きによる解消：SPFx やスクリプト エディタを使う方法

テナント方針やセキュリティ基準が許す場合は、独自の CSS を注入してラッパーと画像のスタイルを調整することで、白いラインをほぼ完全に解消できます。

代表的なアプローチは次の通りです。

• SPFx Application Customizer で CSS を配信する
• モダン スクリプト エディタ Web パーツ（サードパーティ製）で ページ単位の CSS を追加する
• ShortPoint 等のデザインツール内の「カスタム CSS」機能を利用する

重要なのは、SharePoint Online の DOM 構造やクラス名は更新で変わる可能性があるという点です。独自 CSS はあくまで「ベストエフォート」であり、正式サポートの対象外であることを理解しておく必要があります。

カルーセル項目の高さと画像表示を調整する CSS サンプル

以下は、よく利用される調整用 CSS のサンプルです。実際のクラス名は環境によって異なるため、ブラウザー開発者ツール（F12）で確認しつつ、適宜書き換えてください。

/* カルーセル項目ラッパーの余分な高さを抑える例 */
.carouselItemWrapper {
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: hidden;           /* サブピクセルのはみ出し対策 */
}

/* 画像の「ベースライン隙間」を除去する例 */
.carouselItemWrapper img {
  display: block;             /* inline のベースライン余白を消す */
  width: 100%;
  height: auto;
  /* 高さもラッパーにフィットさせたい場合（多少トリミングされる可能性あり）
  height: 100% !important;
  object-fit: cover;
  */
}

/* 小数 px のにじみ対策として GPU レイヤーに載せる例（必要な場合のみ） */
.carouselItemWrapper {
  transform: translateZ(0);
}

全体としては、

• height: auto でラッパーの「固定高さ」をやめ、中身に合わせて伸縮させる
• display: block で画像のベースライン隙間をなくす
• overflow: hidden でサブピクセルのはみ出しやズレを見えなくする

という方針です。

セレクタを決めるときの考え方

SharePoint Online のモダン ページはクラス名が比較的長く、バージョンアップで変わることもあります。セレクタを設計する際には次の点を意識しておくと安心です。

• なるべく 汎用クラス名＋属性セレクタ を使う
  • 例：.carouselItemWrapper img[data-automation-id="Image"]
• ピンポイントで効かせたい場合は、セクションや Web パーツの data-* 属性で範囲を絞る
• サードパーティ Web パーツ経由の場合は、その Web パーツが提供する独自クラスを優先して利用する

特に Application Customizer のように サイトコレクション全体に CSS が効く場合は、誤って他の Web パーツに影響を与えないように、セレクタのスコープを慎重に設計することが重要です。

SPFx / スクリプト エディタでの適用フロー（概要）

実務的な導入フローの一例は次のようになります。

1. 開発・検証用サイト（またはページ）を用意する
2. 対象ページに Image Gallery（カルーセル）を配置し、症状を再現する
3. ブラウザー開発者ツールで DOM を確認し、適切なクラス／セレクタを特定する
4. 上記の CSS サンプルをベースに、最小限のコードで余白が消えることを確認
5. SPFx Application Customizer またはスクリプト エディタ Web パーツで CSS を注入
6. 複数のブラウザー・拡大率（100％／125％／150％）で動作確認
7. 問題がなければ、本番サイトへの展開／適用範囲の拡大を行う

このとき、最初から全社テナント全体に適用しないことがポイントです。まずは限定されたサイトで検証し、その後段階的に範囲を広げることで、予期しない副作用を避けやすくなります。

運用面での注意点とチェックリスト

白いラインを消すこと自体も重要ですが、長期的な運用を考えると、次のような観点もあわせて押さえておくと安心です。

ブラウザー・拡大率ごとのチェック

カルーセルのような動的レイアウトは、ユーザーの閲覧環境によって見え方が変わります。検証時には最低限、次のパターンを確認することをおすすめします。

項目	推奨チェック内容	理由
ブラウザー	Edge, Chrome,（必要なら Firefox）	レンダリングエンジンやサブピクセル処理が微妙に異なるため。
拡大率	100％, 125％, 150％	Windows の標準的な DPI 設定に合わせると、ユーザー環境に近い確認ができる。
画面サイズ	フル HD、ノート PC（13〜14インチ）、外部モニター	レスポンシブブレイクポイントをまたぐとレイアウト計算が変わるため。

ページテンプレートとしての標準化

一度「きれいに表示できる組み合わせ」が見つかったら、その状態を ページテンプレート として保存しておくと、チーム全体で再利用しやすくなります。

• カルーセルを使うときの推奨画像サイズ／比率を明文化する
• 利用して良いレイアウト（カルーセル／タイル／レンガ）と NG パターンをまとめる
• テンプレートページにサンプル Image Gallery を残しておく

これにより、各担当者がバラバラに設定してデザインが崩れるのを防ぎつつ、白いライン問題も未然に防ぎやすくなります。

組織全体でのガイドライン：どこまで CSS を許容するか

SharePoint Online を全社ポータルとして運用している場合、「どこまで独自 CSS を許容するか」は組織ポリシーの問題になります。Image Gallery カルーセルの白いライン対策も、次の観点で検討すると良いでしょう。

• 優先度 A：デザイン要件としてどうしてもカルーセルを使いたいか
• 優先度 B：公式サポート範囲をどこまで重視するか
• 優先度 C：SPFx やサードパーティ製ツールの運用負荷を許容できるか

もし「サポート範囲を最優先する」のであれば、

• カルーセルを使わず、ヒーロー Web パーツ＋単一画像 Web パーツの組み合わせで代替
• 固定バナーは静的画像として配置し、カルーセルは「お知らせ」など別の用途に限定

といった設計も現実的です。一方、ブランドサイトとして「どうしてもカルーセルが必要」というケースでは、

• SPFx で CSS を注入し、対象サイトまたはハブサイト配下に限定して適用する
• バージョンアップ時にレイアウト崩れがないか、定期的なヘルスチェックを行う
• CSS 追加の履歴をドキュメント化し、影響範囲を管理する

といった運用を前提にすることで、リスクをコントロールしながらカスタマイズを行うことができます。

技術メモ：ベースライン隙間とサブピクセルをもう少し詳しく

シンプルな HTML でも再現できる「画像の下の隙間」

Image Gallery を使わなくても、次のようなシンプルな HTML をブラウザーで表示すると、同じような「画像の下に隙間ができる」現象が再現できます。

<div style="background:#000;">
  <img src="sample.jpg" alt="">
</div>

この場合、画像の下に黒い帯が数 px 見えるはずです。これは、<img> が display:inline のため、テキストと同じ行ボックスに収まり、行ボックス下側のディセンダー領域が確保されることが原因です。

次のように display:block を指定すると、隙間は解消します。

<div style="background:#000;">
  <img src="sample.jpg" alt="" style="display:block;">
</div>

Image Gallery カルーセルでも本質的には同じことが起きているため、CSS で display:block を指定してあげると、白いライン（に見える隙間）を解消しやすくなります。

サブピクセル丸めと overflow:hidden の役割

もう一つのポイントが、サブピクセルの丸めです。例えば、3 カラムレイアウトで幅 100% を等分した場合、

• 100% ÷ 3 = 33.3333…%
• 実際のピクセル値は 640px 幅の画面では 213.333…px

このように割り切れない数値が出てくるため、ブラウザーは列ごとに「213px と 214px」を配分しながらレイアウトを組みます。これが高さ方向にも起きると、1 列だけ 1px 高さが違うといった見た目の差が生じます。

このとき、親要素に overflow:hidden; を指定しておくと、わずかにはみ出た部分が見えなくなり、「白いライン」としてユーザーの目に触れることを防ぐことができます。

最短で解決したい人向けの実践ステップ

ここまでの内容を踏まえて、「細かい理屈は後回しでとにかく何とかしたい」という場合の最短ルートを整理します。

1. レイアウト変更を試す
   • カルーセル → タイル／レンガに切り替えて、白いラインが気にならなくなるか確認。
2. 画像の比率を揃える
   • 16:9 や 4:3 など、1 種類に統一してアップロードし直す。
3. 背景色の工夫で「線を隠す」
   • サイトテーマやセクション背景、画像の上下の余白を調整し、線が目立たないデザインにする。
4. CSS 注入が許可されている場合は、SPFx / スクリプト エディタで調整
   • ラッパーに height:auto; overflow:hidden;、画像に display:block; を指定する CSS を試す。
   • 限定されたサイト／ページで検証し、問題がなければ段階的に適用範囲を広げる。
5. 長期的には Microsoft へのフィードバックも検討
   • 「Image Gallery カルーセルの余白を UI から調整できるようにしてほしい」といった要望を Feedback Portal から送信。

Image Gallery カルーセルの「画像下の白いライン」は、小さな見た目の問題ですが、トップページのヒーロー領域などに使っている場合、サイト全体の印象を大きく左右します。原因を理解したうえで、自分たちのテナントポリシーや運用体制に合った対処方法を選ぶことで、デザインと保守性のバランスを取りながら、より完成度の高い SharePoint ポータルを構築していきましょう。