Excelの表をWebページに埋め込みたいけど、やり方がわかりにくい…。そんな方に向けた解説です。
- 表をブログに貼りたいけど不安
- iframeをどう使えばいい？
- html保存しても崩れる
- 「webから」が表示されない
仕組みや手順を簡潔にまとめました。
- HTMLでExcelを埋め込む方法
- Googleスプレッドシートで埋め込み
- Excelの表をブラウザで表示する方法
- 埋め込み時の注意点と対策
本記事では、html形式でのExcel埋め込み表示や、iframeを活用したWebページ上での表表示、
「ExcelでWebから貼り付けるには？」といった疑問に答えます。
「ExcelシートをWebページにするにはどうすればいいですか？」「エクセルで作った表を画像ではなくhtmlで埋め込みたい」
と悩んでいる方にも、やさしく手順を解説。
さらに、「excelwebからない」「excelwebページ保存」「エクセルwebからデータ取得できない」
といった実際のトラブルにも対応した内容になっています。
Excelの表をwebページに埋め込むおすすめ方法
ここでわかること
HTMLでExcelを埋め込む方法
ExcelファイルをHTMLに変換する手順
Excelの表をWebページに埋め込むには、まずExcelファイルをHTML形式に変換する必要があります。
以下の手順で変換を行いましょう。
- Excelでファイルを開く
- 「ファイル」メニュー →「名前を付けて保存」を選択
- ファイルの種類を「Webページ（*.htm; *.html）」に変更
- 保存先を選び「保存」をクリック
▼保存画面のイメージはこちら
これで、Excelの内容がHTML形式のファイルとして保存されます。
このHTMLファイルをWebサイトに貼り付けることで、表の内容がそのまま表示されます。
貼り付ける際のポイント
保存されたHTMLファイルは、テキストエディタ（例：メモ帳やVS Codeなど）で開いて、必要な部分のコードだけをコピーして使うとスッキリ表示できます。
- Webサイトのデザインと合わない場合は、表のスタイル（CSS）を調整する
- iframeなどの要素を使いたい場合は、Googleスプレッドシートなど別の方法が便利
▼HTMLコードをテキストエディタで確認する例
HTMLに慣れていない場合は、余計なコードを消しすぎないように注意してください。
HTMLファイルに含まれる内容の注意
Excelから出力されたHTMLは、スタイル情報などが多く含まれていることがあります。
以下のような点に気をつけると、見やすいWebページになります。
- table要素やstyle要素を適度に整える
- 不要なmetaタグなどは削除してもよい
- スマホ表示に対応させるため、CSSはシンプルに保つ
▼HTMLをブラウザで表示したイメージ
読み込みが遅くなる場合は、画像や装飾の部分を減らすのも効果的です。
この方法が合わない場合は、GoogleスプレッドシートやOneDriveのiframe埋め込みを検討しましょう。
後半の記事では、そのような方法についても詳しく解説していきます。
ブラウザで開ける形式に変換
ブラウザで開ける主なファイル形式
ExcelファイルをWebで共有したいとき、相手がソフトを持っていなくても見られる形式にするのが大切です。
以下の形式は、ブラウザ上で開ける代表的なものです。
- .html：Excelから保存したWebページ形式。デザインや構成をそのまま表示できる。
- .csv：カンマ区切りのテキストファイル。軽量で開きやすく、どの環境でも使いやすい。
- .xlsx（OneDrive経由）：直接は開けないが、OneDriveやGoogleドライブを使えばブラウザ表示が可能。
それぞれの形式にはメリット・デメリットがあるため、用途に応じた選択が重要です。
用途別のおすすめ形式
どの形式を使えばいいかは、「何を見せたいか」「誰に見せたいか」で変わります。
- 見た目を重視したい → .html形式
- シンプルな表で十分 → .csv形式
- 共同編集したい → .xlsx形式をOneDriveなどで共有
htmlはスタイルを維持できる反面、編集には不向きです。
csvは加工しやすいけれど、見た目の装飾が失われます。
形式変換の手順
Excelからこれらの形式に変換する方法はとても簡単です。
以下のように「名前を付けて保存」機能を使うだけで、すぐに使えるファイルが作れます。
- Excelを開く
- 「ファイル」→「名前を付けて保存」を選ぶ
- 「ファイルの種類」で目的の形式（CSV、HTMLなど）を選ぶ
- 保存ボタンをクリック
保存先や拡張子に注意すれば、簡単にブラウザで表示できるデータが完成します。
注意すべきポイント
html形式で保存した場合、スタイル情報は別フォルダになることがあります。
そのため、htmlファイルと一緒に生成される「〇〇_files」フォルダも同じ場所にアップロードしないと、正しく表示されません。
csv形式は非常に軽く、メール添付やWebアップロードにも適していますが、日本語や日付の文字化けが起こることがあります。
その場合は、UTF-8形式で保存し直すことを検討しましょう。
OneDriveやGoogleドライブを使えば、xlsx形式のままでもWebで閲覧可能です。
この方法については、後半の記事で詳しく解説していきます。
Googleスプレッドシートを使う方法
Googleスプレッドシートにアップロードする
ExcelファイルをWebページに埋め込みたいときは、Googleスプレッドシートに変換して公開する方法がとても便利です。
まずはGoogleアカウントにログインし、Googleドライブにアクセスします。
次に、「新規」→「ファイルのアップロード」でExcelファイル（.xlsxなど）をアップロードしてください。
▼アップロード操作の画面はこちら
アップロードが完了したら、そのファイルを「Googleスプレッドシートとして開く」ことで変換が行われます。
埋め込み用のiframeコードを取得する
Googleスプレッドシートに変換されたファイルを開いたら、「ファイル」→「ウェブに公開」を選択します。
表示されたダイアログで、「リンク」ではなく「埋め込み」タブを選びましょう。
そのまま「公開」をクリックすると、iframeタグ形式のコードが生成されます。
▼埋め込みコードが表示される画面はこちら
iframeコードの貼り付け方
取得したiframeコードは、以下のような形をしています。
<iframe src="https://docs.google.com/spreadsheets/d/e/XXXXXXXXXXXX/pubhtml?widget=true&headers=false"></iframe>このコードをWordPressの「カスタムHTML」ブロックに貼り付けます。
▼iframeコードが表示された画面はこちら
HTMLブロックにコードを貼り付けると、以下のような編集画面になります。
▼WordPressでiframeを貼り付けた例
プレビューで表示を確認すると、下記のようにGoogleスプレッドシートが表示されます。
▼実際の表示例はこちら
この方法のメリットと活用例
この方法は、以下のような点で非常に使いやすいです。
- Googleアカウントがあれば無料で使える
- スプレッドシートを更新すればWeb表示も自動で更新
- スマホからの閲覧にも比較的対応しやすい
- iframe形式なので、他の要素と一緒にレイアウトしやすい
ただし、閲覧権限が「公開」になっていないと表示されない点には注意が必要です。
このあと紹介する「埋め込み時の注意点」も必ずチェックしておきましょう。
後半の記事では、公開範囲や編集制限の設定方法について詳しく解説していきます。
Excelをwebページに埋め込むときの注意点まとめ
ここでわかること
編集可能にするかを考える
閲覧専用にする設定方法
GoogleスプレッドシートでExcelデータを公開するとき、基本的には「閲覧のみ」での公開が安全です。
他人に勝手に書き換えられると、情報漏洩や誤操作のリスクが生まれます。
- 設定場所：右上の「共有」ボタン
- 公開範囲：「リンクを知っている全員」に設定
- アクセス権限：「閲覧者」に変更
▼閲覧者権限に設定する画面はこちら
こうすることで、だれでも閲覧はできるが編集は不可という状態をつくれます。
編集を許可する場面とは？
一方で、共同作業を目的としたExcel公開であれば、編集権限を与えることもあります。
- 社内チームでデータをリアルタイム共有したい
- 担当者ごとに内容を更新してもらいたい
- フィードバックやコメントを直接書き込んでほしい
▼特定ユーザーにだけ編集を許可する設定画面
このような場合は、「編集者」または「コメント可」で共有設定するのが適しています。
共有リンクが外部に漏れると、意図しない人が編集できるため注意が必要です。
WordPressでの埋め込み表示の例
Googleスプレッドシートで発行したiframeコードをWordPressに貼り付けることで、Webページに表を埋め込むことができます。
▼WordPressでiframeを貼り付けているHTML編集画面
▼実際の表示イメージはこちら（閲覧専用）
このように、「誰でも閲覧はできるが編集はできない」安全な共有方法が実現できます。
次の記事では、公開範囲やスプレッドシート更新時の注意点について詳しく解説していきます。
htmlの埋め込みに失敗する原因
iframeに対応していないCMSを使っている
まず最も多いのが、iframe自体に対応していないCMS（コンテンツ管理システム）を使っているケースです。
特に無料のブログサービスや古いWordPressテーマでは、セキュリティ上の理由でiframeの使用が制限されていることがあります。
その場合、いくら正しいコードを貼り付けても自動で削除されたり、空白として表示されたりします。
共有リンクの設定が正しくない
iframeコードを貼っても表示されない場合、Googleスプレッドシート側の公開設定が不完全な可能性があります。
具体的には「リンクを知っている全員に公開」になっていないと、iframeとして読み込めないため、表が表示されません。
- 「ファイル」→「ウェブに公開」で埋め込みコードを再確認
- 「共有」設定を「リンクを知っている全員」にして「閲覧者」にする
▼設定が「制限付き」になっている失敗例
埋め込みコードの貼り方が間違っている
HTMLコードの貼り方にも注意が必要です。
通常の「段落ブロック」や「テキストブロック」に貼ってしまうと、HTMLとして解釈されずにそのまま文字列として表示されてしまいます。
- WordPressでは「カスタムHTML」ブロックを選ぶ
- Classicエディタでは「テキスト」タブを使う
▼失敗例：段落ブロックに貼り付けてしまった場合
コードの一部が欠けている
iframeコードをコピペするとき、「<iframe>～</iframe>」の両端が一部欠けてしまっていることがあります。
その結果、表示されない・レイアウトが崩れる・エラーが出るなどの問題が起きます。
必ず全文を選択・コピーして、<iframe>で始まり、</iframe>で終わっているかを確認してください。
正しく埋め込まれた場合の表示例
▼WordPressの「カスタムHTMLブロック」でiframeを貼り付けた例
▼正常に表示された埋め込み結果
これらのポイントを押さえておけば、ほとんどの埋め込みエラーは回避可能です。
次の記事では、データの更新が正しく反映されない場合の対処法を紹介します。
Excelで「webから」が表示されないとき
「Webから」が見つからない理由とは？
Excelの「データ」タブを開いても『Webから』が表示されない場合、いくつかの原因が考えられます。
多くのケースでは、Excelのバージョンやエディションによる機能制限が関係しています。
▼こちらの画像のように「取得と変換」グループが表示されない場合は要注意です
使用しているOfficeのエディションを確認しよう
まずは、自分がどのOfficeエディションを使っているかを確認しましょう。
ファイル ＞ アカウント ＞ 製品情報から、現在使っているOfficeの種類が表示されます。
▼「Home & Student」は機能制限があるため『Webから』は使えません
『Webから』が使えるエディション例：
- Microsoft 365（サブスクリプション版）
- Office Professional Plus 2016 以降
- Office 2021（Home & Business以上）
逆に、「Office Home & Student」「Office Mobile」などでは、この機能が含まれていません。
リボンのカスタマイズが原因の可能性も
バージョンに問題がないのに「Webから」が見つからない場合は、リボンのカスタマイズで『取得と変換』グループが非表示になっているケースがあります。
その場合は、リボンの設定を手動で確認してみましょう。
法人アカウントの制限設定にも注意
Microsoft 365 の法人アカウントを利用している場合、IT管理者が機能を制限している可能性もあります。
- 「Webから」がポリシーで無効化されている
- ブラウザ版Excelではこの機能が使えない
このような場合は、管理者に「Power Query（取得と変換）」機能の有効化を依頼してください。
次の記事では、「Webから」が使えないときの代替手段について紹介していきます。
データ更新の反映に注意
埋め込んだ表が更新されない理由
Excelの内容をWebページに埋め込んだあと、ファイルを編集したのにWeb上に反映されないというケースがあります。
この原因として多いのは、データ更新のタイミングのズレや、埋め込み側がキャッシュを参照していることです。
OneDriveの保存状況を確認する
Googleスプレッドシートと違って、ExcelファイルはOneDriveに保存されていても、即時にWeb表示へ反映されるとは限りません。
自動保存がオンになっていないと、編集内容が保存されないこともあるため注意が必要です。
- OneDriveアプリを使用している場合は、同期が完了しているかを確認
- Web版OneDrive上でもファイルを開いて、最新の内容が保存されているかをチェック
ブラウザのキャッシュが表示を妨げることも
実は、埋め込みされた表が古い内容のままになる原因の一つが「ブラウザのキャッシュ」です。
特にiframeで埋め込んだ場合は、キャッシュされた表示を読み込んでしまうケースが多く見られます。
対処法：
- ブラウザで「再読み込み（Shift＋F5）」を試す
- iframeコードにクエリ文字列（?v=123など）を付けて更新を強制させる
正しく反映されるか確認するポイント
埋め込み後、更新がWebに反映されているかどうかを確認するには、以下のような点に注意しましょう。
- 別のブラウザやシークレットモードで表示してみる
- 表示されている表のタイムスタンプやセルの内容が一致しているかを確認
- Googleスプレッドシートを使っている場合は、「ウェブに公開」状態になっているかも見直す
これらを意識するだけでも、「あれ？変わってない？」というトラブルをかなり防ぐことができます。
次の記事では、Web埋め込みの動作確認を簡単にするテクニックも紹介します。
記事のまとめ
記事のポイントをまとめます。
埋め込み方法の基本
- ExcelをHTML形式で保存できる
- Googleスプレッドシートでも埋め込み可能
- iframeでWebページに表示できる
- CSV形式も軽量で扱いやすい
用途別のおすすめ手段
- 装飾保持にはHTMLが適す
- 共同編集はGoogleが便利
- 表示専用ならiframeが最適
- 閲覧環境で形式を選ぶべき
設定や表示の注意点
- 共有設定は閲覧者推奨
- CMSがiframe非対応もある
- 「webから」が表示されない場合もある
- html保存時は付属フォルダが必要
反映やエラー対策
- OneDriveの同期を確認すべき
- キャッシュの影響に注意する
- iframeの貼り付け方を確認する