SharePoint埋め込みコンテンツのサイズ変更完全ガイド|iframe・Webパーツの調整方法

SharePointページに外部コンテンツを埋め込むとき、サイズが合わずに困ったことはありませんか。

埋め込みWebパーツやiframeのサイズを適切に調整しないと、コンテンツが切れたり、余白が大きくなりすぎたりします。

この記事では、SharePointの埋め込みコンテンツのサイズを変更する方法を、基本から応用まで詳しく解説します。

SharePointの埋め込み機能とは
基本的なサイズ変更方法
URLベースの埋め込みでサイズを変更する
ページレイアウトによるサイズ調整
高度なサイズ調整テクニック
よくある問題と解決方法
特定のコンテンツ別のサイズ調整
セキュリティ設定とサイズ調整
ベストプラクティス
よくある質問
まとめ
参考情報

SharePointの埋め込み機能とは

SharePointには、外部コンテンツをページに埋め込む機能があります。

埋め込みWebパーツの概要

埋め込みWebパーツを使うと、さまざまな外部コンテンツを表示できます。

埋め込み可能なコンテンツ

YouTubeビデオ
Googleマップ・Bingマップ
Officeドキュメント(Excel、PowerPoint)
Microsoft Forms
Power Apps
外部Webサイト
カスタムHTML

これらのコンテンツをSharePointページに統合できます。

埋め込み方法の種類

埋め込みには主に2つの方法があります。

URLを使用する方法

埋め込みWebパーツを追加します
WebサイトのURLを貼り付けます
自動的にiframeとして埋め込まれます

埋め込みコードを使用する方法

埋め込みWebパーツを追加します
外部サイトから取得したiframeコードを貼り付けます
カスタマイズされたiframeとして埋め込まれます

目的に応じて使い分けます。

デフォルトのサイズ制限

SharePointの埋め込みWebパーツには、デフォルトのサイズ制限があります。

デフォルトの高さ

URLで埋め込んだ場合:約350px
iframeコードで埋め込んだ場合:指定したサイズ

デフォルトの幅

ページレイアウトに依存します
1列レイアウト:ページ幅いっぱい
2列以上:列幅に合わせて自動調整

この制限を理解することが、適切なサイズ調整の第一歩です。

基本的なサイズ変更方法

最も基本的なサイズ変更方法を説明します。

iframeコードで高さを指定する

埋め込みコードを使用する場合、height属性で高さを指定できます。

手順

埋め込みWebパーツを追加します
「Webサイトのアドレスまたは埋め込みコード」欄にiframeコードを入力します
height属性の値を変更します

コード例

<iframe src="https://example.com" width="100%" height="600"></iframe>

この例では、高さを600pxに設定しています。

width属性で幅を指定する

幅も同様にwidth属性で指定できます。

固定幅の指定

<iframe src="https://example.com" width="800" height="600"></iframe>

レスポンシブ幅の指定

<iframe src="https://example.com" width="100%" height="600"></iframe>

width=”100%”を指定すると、利用可能な幅いっぱいに表示されます。

ピクセルとパーセントの使い分け

サイズ指定には、ピクセル(px)とパーセント(%)の2種類があります。

ピクセル指定

固定サイズで表示したい場合
正確なサイズが必要な場合
例:width=”800″ height=”600″

パーセント指定

レスポンシブに表示したい場合
画面サイズに合わせたい場合
例:width=”100%” height=”500″

通常、幅は100%、高さはピクセルで指定するのが一般的です。

最小サイズと最大サイズ

SharePointには埋め込みコンテンツのサイズ制限があります。

推奨サイズ範囲

最小幅:300px
最小高さ:200px
最大幅:ページ幅まで
最大高さ:制限なし(ただし適切なサイズを推奨)

極端に小さいサイズや大きいサイズは避けましょう。

URLベースの埋め込みでサイズを変更する

URLを直接入力する場合のサイズ変更方法です。

URLで埋め込んだ場合の制限

URLをそのまま貼り付けると、サイズのカスタマイズが制限されます。

制限事項

デフォルトで約350pxの高さに固定されます
高さを変更できません
幅はページレイアウトに依存します

より柔軟なサイズ調整が必要な場合は、iframeコードを使用します。

URLをiframeコードに変換する

URLベースの埋め込みをiframeコードに変換することで、サイズを調整できます。

変換手順

元のURLをコピーします
以下の形式でiframeコードを作成します

<iframe src="ここに元のURL" width="100%" height="600"></iframe>

埋め込みWebパーツの「Webサイトのアドレスまたは埋め込みコード」欄に貼り付けます

これで高さを自由に調整できます。

具体例:YouTubeの埋め込み

YouTube動画を例に、サイズ変更を説明します。

標準的な埋め込みコード
YouTubeの「共有」→「埋め込む」から取得したコード:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

サイズ調整版

<iframe width="100%" height="500" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

高さを500pxに、幅を100%に変更しました。

具体例:Googleマップの埋め込み

Googleマップもサイズを調整できます。

Googleマップの埋め込みコード
「共有」→「地図を埋め込む」から取得:

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450"></iframe>

サイズ調整版

<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="600"></iframe>

地図の表示サイズを大きくできます。

ページレイアウトによるサイズ調整

SharePointページのレイアウトもサイズに影響します。

レイアウトの種類

SharePointモダンページには、複数のレイアウトオプションがあります。

1列レイアウト

ページ幅いっぱいに表示
最大幅で埋め込みコンテンツを表示できます
大きな画面に適しています

2列レイアウト

左右2つの列に分割
各列の幅に合わせて調整されます
コンパクトな表示に適しています

3列レイアウト

3つの列に分割
各列の幅はさらに狭くなります
小さなウィジェット向け

レイアウトによって、埋め込みコンテンツの表示幅が変わります。

全幅セクションの使用

全幅セクションを使うと、ページ幅の制限を超えて表示できます。

全幅セクションの追加方法

ページ編集モードにします
セクションを追加します
セクションレイアウトで「全幅」を選択します
埋め込みWebパーツを追加します

全幅セクションでは、画面幅いっぱいにコンテンツを表示できます。

セクション内でのサイズ調整

セクション内での埋め込みコンテンツの配置を調整できます。

調整方法

埋め込みWebパーツを選択します
Webパーツツールバーの「…」をクリックします
「Webパーツの編集」を選択します
サイズオプションを確認します

一部のWebパーツでは、編集パネルからサイズ調整ができます。

レスポンシブデザインへの対応

異なる画面サイズでも適切に表示されるようにします。

推奨設定

<iframe src="https://example.com" width="100%" height="600" style="max-width:100%;"></iframe>

width=”100%”とmax-width:100%を組み合わせることで、レスポンシブに対応できます。

高度なサイズ調整テクニック

より高度なサイズ調整方法を紹介します。

JavaScriptを使った動的サイズ調整

JavaScriptを使用すると、コンテンツの高さに合わせて自動調整できます。

基本的な考え方

iframe内のコンテンツの高さを取得します
その高さに合わせてiframeのサイズを変更します
イベントリスナーで監視し続けます

実装例

<iframe id="myIframe" src="https://example.com" width="100%" height="600"></iframe>

<script>
function resizeIframe() {
    var iframe = document.getElementById('myIframe');
    if (iframe) {
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
}

window.addEventListener('message', function(e) {
    if (e.data.indexOf('resize::') !== -1) {
        var height = e.data.split('::')[1];
        document.getElementById('myIframe').style.height = height + 'px';
    }
});
</script>

この方法では、iframe内のコンテンツが変わっても自動的にサイズが調整されます。

iframe内からの高さ通知

iframe内のコンテンツ側から高さを通知することもできます。

iframe内のコード

<script>
function notifyParentOfHeight() {
    var height = document.body.scrollHeight;
    window.parent.postMessage('resize::' + height, '*');
}

window.addEventListener('load', notifyParentOfHeight);
window.addEventListener('resize', notifyParentOfHeight);
</script>

この方法は、iframe内のコンテンツにアクセスできる場合に有効です。

CSSを使ったサイズ調整

CSSのstyle属性を使って、より詳細な調整ができます。

詳細な設定例

<iframe 
    src="https://example.com" 
    width="100%" 
    height="600"
    style="
        max-width: 100%;
        min-height: 400px;
        border: none;
        overflow: hidden;
    "
></iframe>

各プロパティの説明

max-width:100%:幅が親要素を超えないようにします
min-height:400px:最小高さを確保します
border:none:枠線を非表示にします
overflow:hidden:スクロールバーを非表示にします

アスペクト比を維持する方法

コンテンツの縦横比を維持したまま、レスポンシブに表示する方法です。

16:9のアスペクト比を維持

<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
    <iframe 
        src="https://example.com" 
        style="position:absolute; top:0; left:0; width:100%; height:100%;"
        frameborder="0"
    ></iframe>
</div>

4:3のアスペクト比を維持

<div style="position:relative; padding-bottom:75%; height:0; overflow:hidden;">
    <iframe 
        src="https://example.com" 
        style="position:absolute; top:0; left:0; width:100%; height:100%;"
        frameborder="0"
    ></iframe>
</div>

padding-bottomの値を変えることで、任意のアスペクト比を設定できます。

よくある問題と解決方法

埋め込みコンテンツのサイズに関するよくある問題を解決します。

問題1:コンテンツが切れて表示される

高さが不足してコンテンツが切れる場合の対処法です。

原因

height属性の値が小さすぎる
デフォルトの高さ(350px)では不足している

解決方法

<iframe src="https://example.com" width="100%" height="800"></iframe>

高さを十分な値(例:800px)に設定します。

コンテンツ全体が表示される高さを見つけるには、試行錯誤が必要です。

問題2:余白が大きすぎる

高さを大きく設定しすぎて、下に余白ができる場合です。

原因

height属性の値が大きすぎる
コンテンツの実際の高さよりも大きい値を設定している

解決方法

コンテンツの実際の高さを確認します
その高さに近い値を設定します
少し余裕を持たせた値(+50px程度)が適切です

調整例
コンテンツの高さが600pxの場合:

<iframe src="https://example.com" width="100%" height="650"></iframe>

問題3:「ページに合わせてサイズを変更する」が効かない

埋め込みWebパーツの「ページに合わせてサイズを変更する」トグルが効果がない場合があります。

原因

このトグルはSharePoint Spacesでのみ有効です
通常のSharePointページでは機能しません

解決方法
iframeコードで直接サイズを指定します。

<iframe src="https://example.com" width="100%" height="600"></iframe>

問題4:埋め込みコンテンツが歪む

埋め込みコンテンツが縮小されて歪んで表示される問題です。

原因

SharePointの埋め込みWebパーツがiframeコンテンツを自動的に10%縮小する仕様がある
アスペクト比が変わることがある

解決方法
style属性でtransformを無効化します:

<iframe 
    src="https://example.com" 
    width="100%" 
    height="600"
    style="transform: none !important;"
></iframe>

問題5:スクロールバーが表示される

iframe内でスクロールバーが表示される場合です。

原因

iframe内のコンテンツが指定した高さを超えている
scrolling属性が設定されていない

解決方法1:高さを増やす

<iframe src="https://example.com" width="100%" height="1000"></iframe>

解決方法2:スクロールを無効化

<iframe 
    src="https://example.com" 
    width="100%" 
    height="600"
    scrolling="no"
></iframe>

解決方法3:overflow:hiddenを使用

<iframe 
    src="https://example.com" 
    width="100%" 
    height="600"
    style="overflow:hidden;"
></iframe>

問題6:モバイルで表示が崩れる

スマートフォンなどのモバイルデバイスで表示が崩れる場合です。

原因

固定幅を指定している
レスポンシブ対応していない

解決方法

<iframe 
    src="https://example.com" 
    width="100%" 
    height="600"
    style="max-width:100%; display:block;"
></iframe>

width=”100%”とmax-width:100%を組み合わせます。

特定のコンテンツ別のサイズ調整

よく埋め込まれるコンテンツごとの最適なサイズ設定を紹介します。

YouTubeビデオ

YouTube動画の推奨サイズです。

標準サイズ(16:9)

<iframe 
    width="100%" 
    height="450" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allowfullscreen
></iframe>

大画面表示

<iframe 
    width="100%" 
    height="600" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allowfullscreen
></iframe>

16:9のアスペクト比を維持することが重要です。

Microsoft Forms

Microsoft Formsの埋め込みサイズです。

標準的な設定

<iframe 
    width="100%" 
    height="800" 
    src="https://forms.office.com/..." 
    frameborder="0" 
    allowfullscreen
></iframe>

フォームの項目数に応じて、高さを調整します。

短いフォーム(5項目以下):600px
中程度のフォーム(6-10項目):800px
長いフォーム(11項目以上):1000px以上

Power Apps

Power Appsを埋め込む場合のサイズです。

縦向き(Portrait)

<iframe 
    width="100%" 
    height="740" 
    src="https://apps.powerapps.com/..." 
    frameborder="0" 
    allowfullscreen
></iframe>

横向き(Landscape)

<iframe 
    width="100%" 
    height="600" 
    src="https://apps.powerapps.com/..." 
    frameborder="0" 
    allowfullscreen
></iframe>

Power Apps側で「埋め込み用」設定を有効にすると、背景が白になります。

Excelブック

Excelブックの埋め込みサイズです。

標準的な設定

<iframe 
    width="100%" 
    height="500" 
    src="https://onedrive.live.com/embed?..." 
    frameborder="0"
></iframe>

表の行数に応じて高さを調整します。

10行程度:400px
20行程度:600px
30行以上:800px以上

PowerPointスライド

PowerPointスライドの埋め込みです。

標準的な設定

<iframe 
    width="100%" 
    height="500" 
    src="https://onedrive.live.com/embed?..." 
    frameborder="0"
></iframe>

スライドの縦横比(通常16:9)に合わせて調整します。

Googleマップ

Googleマップの推奨サイズです。

標準的な設定

<iframe 
    width="100%" 
    height="450" 
    src="https://www.google.com/maps/embed?..." 
    frameborder="0"
></iframe>

大きな地図

<iframe 
    width="100%" 
    height="600" 
    src="https://www.google.com/maps/embed?..." 
    frameborder="0"
></iframe>

地図は視認性が重要なため、大きめのサイズを推奨します。

セキュリティ設定とサイズ調整

埋め込み時のセキュリティ設定も理解しておきましょう。

HTMLフィールドセキュリティ設定

SharePointでは、埋め込みを許可するドメインを設定できます。

設定場所

サイトの設定を開きます
「HTMLフィールドセキュリティ」をクリックします
許可するドメインを追加します

設定例

youtube.com
google.com
forms.office.com

ドメインを許可しないと、「このWebサイトからのコンテンツの埋め込みは許可されていません」エラーが表示されます。

HTTPS要件

SharePointでは、セキュリティ上の理由からHTTPS要件があります。

要件

埋め込むコンテンツのURLはHTTPSでなければなりません
HTTPのURLは埋め込めません

確認方法
URLがhttps://で始まっているか確認します。

HTTPのURLしかない場合は、そのコンテンツは埋め込めません。

iframe属性のセキュリティ

iframeには、セキュリティ関連の属性があります。

sandbox属性

<iframe 
    src="https://example.com" 
    width="100%" 
    height="600"
    sandbox="allow-scripts allow-same-origin"
></iframe>

allowfullscreen属性

<iframe 
    src="https://example.com" 
    width="100%" 
    height="600"
    allowfullscreen
></iframe>

これらの属性は、必要に応じて追加します。

ベストプラクティス

埋め込みコンテンツのサイズ調整に関するベストプラクティスです。

サイズ指定の推奨事項

効果的なサイズ指定の方法です。

推奨する設定

幅:100%(レスポンシブ対応)
高さ:ピクセルで具体的に指定
最小高さ:400px以上
最大高さ:画面の高さを超えない程度

避けるべき設定

幅と高さの両方をパーセント指定
極端に小さいサイズ(200px未満)
極端に大きいサイズ(2000px超)

ユーザビリティの考慮

ユーザーにとって見やすいサイズを設定します。

チェックポイント

コンテンツ全体が見えるか
スクロールが必要ないか(または適切か)
モバイルでも見やすいか
余白が適切か

複数のデバイスでテストすることが重要です。

パフォーマンスへの配慮

埋め込みコンテンツはページの読み込み速度に影響します。

最適化のポイント

必要最小限のサイズにする
複数の埋め込みを避ける
大きなコンテンツは別ページにリンク

ページのパフォーマンスを維持しましょう。

テストとフィードバック

設定後は必ずテストを実施します。

テスト項目

デスクトップブラウザで確認
モバイルブラウザで確認
異なる画面サイズで確認
異なるブラウザで確認

ユーザーからのフィードバックも収集して、継続的に改善します。

よくある質問

SharePointの埋め込みサイズに関するよくある質問に回答します。

Q1:URLで埋め込んだ場合、高さを変更できますか?

いいえ、URLをそのまま貼り付けた場合は高さを変更できません。

対処方法
URLをiframeコードに変換してから埋め込みます。

<iframe src="元のURL" width="100%" height="希望の高さ"></iframe>

Q2:width=”100%”が効かないのはなぜですか?

Webパーツのサイズは、ページレイアウトに制限されます。

確認事項

1列レイアウトを使用しているか
全幅セクションを使用しているか
親要素のサイズ制限がないか

レイアウトを変更することで解決することがあります。

Q3:埋め込みコンテンツの最大サイズはどのくらいですか?

明確な上限はありませんが、実用的な範囲があります。

推奨範囲

幅:最大でページ幅(約1200px)
高さ:最大で画面の高さ程度(約1000px)

それ以上大きくすると、ユーザビリティが低下します。

Q4:複数の埋め込みを同じページに配置できますか?

はい、できます。

注意点

ページの読み込み速度が遅くなります
各埋め込みのサイズを小さめに調整します
重要なコンテンツを優先します

3つ以上の埋め込みは避けることを推奨します。

Q5:モバイルとデスクトップで異なるサイズを設定できますか?

SharePointの標準機能では、デバイスごとの設定はできません。

代替方法
CSSのメディアクエリを使用します(高度な方法):

<style>
@media (max-width: 768px) {
    #myIframe {
        height: 400px !important;
    }
}
@media (min-width: 769px) {
    #myIframe {
        height: 600px !important;
    }
}
</style>
<iframe id="myIframe" src="https://example.com" width="100%"></iframe>

Q6:埋め込みコンテンツが自動的に縮小されるのを防げますか?

はい、防ぐことができます。

方法
style属性でtransformを無効化します:

<iframe 
    src="https://example.com" 
    width="100%" 
    height="600"
    style="transform: none !important; max-width: none !important;"
></iframe>

まとめ

SharePointの埋め込みコンテンツのサイズ変更について解説しました。

基本的なサイズ変更
iframeコードのwidth属性とheight属性でサイズを指定します。
幅は100%(レスポンシブ)、高さはピクセル(固定)が推奨です。
URLで埋め込んだ場合は高さが約350pxに固定されるため、iframeコードを使用します。

ページレイアウトの影響
1列レイアウトや全幅セクションを使うと、最大幅で表示できます。
2列以上のレイアウトでは、各列の幅に制限されます。
レイアウトに応じて適切なサイズを設定しましょう。

高度なテクニック
JavaScriptを使った動的サイズ調整で、コンテンツに合わせた高さに自動調整できます。
CSSでアスペクト比を維持しながらレスポンシブに表示できます。
iframe内からの高さ通知により、正確なサイズ調整が可能です。

よくある問題への対処
コンテンツが切れる場合は高さを増やします。
余白が大きい場合は高さを減らします。
歪む場合はtransform: noneを指定します。
スクロールバーが表示される場合は、高さを増やすかscrolling=”no”を設定します。

コンテンツ別の推奨サイズ
YouTube:高さ450-600px(16:9)
Microsoft Forms:高さ600-1000px(項目数による)
Power Apps:縦向き740px、横向き600px
Excel/PowerPoint:高さ400-600px
Googleマップ:高さ450-600px

ベストプラクティス
幅は100%、高さはピクセルで指定します。
複数のデバイスでテストします。
ユーザビリティとパフォーマンスのバランスを考慮します。
必要最小限のサイズに抑えます。

適切なサイズ設定により、SharePointページに外部コンテンツを美しく統合できます。

この記事の情報を活用して、見やすく使いやすい埋め込みコンテンツを実現しましょう。

SharePointの埋め込み機能とは

埋め込みWebパーツの概要

埋め込み方法の種類

デフォルトのサイズ制限

基本的なサイズ変更方法

iframeコードで高さを指定する

width属性で幅を指定する

ピクセルとパーセントの使い分け

最小サイズと最大サイズ

URLベースの埋め込みでサイズを変更する

URLで埋め込んだ場合の制限

URLをiframeコードに変換する

具体例:YouTubeの埋め込み

具体例:Googleマップの埋め込み

ページレイアウトによるサイズ調整

レイアウトの種類

全幅セクションの使用

セクション内でのサイズ調整

レスポンシブデザインへの対応

高度なサイズ調整テクニック

JavaScriptを使った動的サイズ調整

iframe内からの高さ通知

CSSを使ったサイズ調整

アスペクト比を維持する方法

よくある問題と解決方法

問題1:コンテンツが切れて表示される

問題2:余白が大きすぎる

問題3:「ページに合わせてサイズを変更する」が効かない

問題4:埋め込みコンテンツが歪む

問題5:スクロールバーが表示される

問題6:モバイルで表示が崩れる

特定のコンテンツ別のサイズ調整

YouTubeビデオ

Microsoft Forms

Power Apps

Excelブック

PowerPointスライド

Googleマップ

セキュリティ設定とサイズ調整

HTMLフィールドセキュリティ設定

HTTPS要件

iframe属性のセキュリティ

ベストプラクティス

サイズ指定の推奨事項

ユーザビリティの考慮

パフォーマンスへの配慮

テストとフィードバック

よくある質問

Q1:URLで埋め込んだ場合、高さを変更できますか?

Q2:width=”100%”が効かないのはなぜですか?

Q3:埋め込みコンテンツの最大サイズはどのくらいですか?

Q4:複数の埋め込みを同じページに配置できますか?

Q5:モバイルとデスクトップで異なるサイズを設定できますか?

Q6:埋め込みコンテンツが自動的に縮小されるのを防げますか?

まとめ

参考情報

Youtube

カテゴリー別人気記事

コメント