エクセルで作った表をホームぺージで表示させる方法について

2024年7月28日

エクセルで作成した表をホームページで表示させる方法はいくつかありますが、ここでは代表的な方法をいくつか紹介します。

それぞれの方法について、ステップバイステップで説明します。

方法1: エクセル表をHTMLに変換して埋め込む

ステップ1: エクセル表をHTMLに変換

エクセルを開き、表示させたい表を選択します。
「ファイル」メニューから「名前を付けて保存」を選択します。
ファイル形式を「Webページ（*.htm, *.html）」に設定し、保存します。
保存されたHTMLファイルをテキストエディタ（例：メモ帳）で開きます。

ステップ2: HTMLコードをコピー

テキストエディタで開いたHTMLファイルの内容を全てコピーします。

ステップ3: HTMLコードをホームページに埋め込む

ホームページを編集するツール（例：WordPress、静的サイトジェネレーター）を開きます。
表を表示させたい場所にコピーしたHTMLコードを貼り付けます。
保存して、ホームページをプレビューまたは公開します。

方法2: Googleスプレッドシートを利用する

ステップ1: エクセル表をGoogleスプレッドシートにインポート

Googleドライブにアクセスし、Googleスプレッドシートを開きます。
「ファイル」メニューから「インポート」を選択します。
「アップロード」タブでエクセルファイルをアップロードします。

ステップ2: 公開用リンクを取得

Googleスプレッドシートの「ファイル」メニューから「ウェブに公開」を選択します。
「リンク」タブで、「公開」をクリックします。
表示されたリンクをコピーします。

ステップ3: HTMLに埋め込む

ホームページを編集するツールを開きます。
表を表示させたい場所に次のようなiframeタグを使用してリンクを埋め込みます。

<iframe src="https://docs.google.com/spreadsheets/d/e/XXXXXXXXXXXX/pubhtml?widget=true&amp;headers=false"></iframe>

（XXXXXXXXXXXXは取得したリンクに含まれるIDに置き換えます）

方法3: JavaScriptライブラリを使用する

ステップ1: エクセル表をCSV形式で保存

エクセルを開き、表示させたい表を選択します。
「ファイル」メニューから「名前を付けて保存」を選択します。
ファイル形式を「CSV（カンマ区切り）」に設定し、保存します。

ステップ2: JavaScriptライブラリを利用

保存したCSVファイルをウェブサーバーにアップロードします。
以下のようなHTMLとJavaScriptコードを使用して、CSVファイルを読み込み、表を表示します。

<!DOCTYPE html>
<html>
<head>
    <title>CSV Table</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.0/papaparse.min.js"></script>
</head>
<body>
    <table id="csv-table"></table>

    <script>
        $(document).ready(function () {
            Papa.parse("path/to/your/file.csv", {
                download: true,
                complete: function (results) {
                    var data = results.data;
                    var table = $("#csv-table");
                    data.forEach(function (row, index) {
                        var tr = $("<tr>");
                        row.forEach(function (cell) {
                            var td = $("<td>").text(cell);
                            tr.append(td);
                        });
                        table.append(tr);
                    });
                }
            });
        });
    </script>
</body>
</html>

この方法では、PapaParseライブラリを使用してCSVファイルを読み込み、jQueryを使用してHTMLテーブルに変換しています。