iPhone・Mac・ウェブサービス・文房具について「生活に活かせる実用的な活用術」を提供するメディア

Excelで作った表をウェブで使えるHTMLに書き出す方法

この記事のURLとタイトルをコピーする
excel-web-html

Webページで表のデザインを組むのは意外と面倒。そんなときに便利な技をひとつご紹介します。

Excelを使って作った表のデザインをそのままWebで展開できたら、そんなに楽なことはありません。今日はそんな便利な小技をご紹介。

ちなみにNumbersを使った方法もご紹介していますので、こちらも合わせてご参考にどうぞ。

Numbersで作った表をWeb用HTMLに書き出す方法

1まずExcelを使って表を作ります。背景色やフォントカラーなども反映できますのでデザインしてOK。

excel-web-html_1

2作成した表の中から書き出したい範囲を選択します。

excel-web-html_2

3メニューに「ファイル」から「名前をつけて保存」を選択。【Command + Shift + S】のショートカットを使ってももちろんOK。

excel-web-html_3

4ファイル形式を「Webページ(.htm)」にし、保存する対象を「選択範囲」にします。最後に「保存」を押して完了です。

excel-web-html_4

5保存したファイルを CotEditor などのテキストエディタで開きます。するとWebで使えるHTMLとして出力されているのが確認できるかと思います。

excel-web-html_5

class や style が割り当てられていますので、ここからデザインをカスタマイズするのも簡単です。
 

まとめ

Excelで表を作成し、作った表を範囲選択する。

ファイルを保存するさい、フォーマットを「Webページ」にする。

保存したファイルをテキストエディタアプリで開く。

bamka

テーブルデザインが苦手な人でも、これなら直感的に表を作れますね。
今回はMac版のExcelで説明しましたが、Win版でも基本は同じです。

今日も来てくれて、ありがとうございます!

記事への感想や質問Twitterでいただけると喜びます。返信します。フォローはしなくてもいいけど、してくれたらもっと嬉しいです!

この記事のURLとタイトルをコピーする
当ブログの管理人
ばんか (bamka)
ばんか (bamka)ウェブディレクター・ブログ運営
iPhone・iPad・Mac。Evernoteなどのウェブサービス。ときどき文房具など。これらを使った『生活に活かせる実用的な活用術』をご提供しています。 管理人は当ブログの運営の他に、ウェブディレクター・ライター・セミナー講師など、いろいろな分野で活動しています。詳細は当ブログのプロフィールページをご覧ください。 各種仕事のご依頼も承っておりますので、ご希望の方はお問い合わせフォームからご連絡ください。
執筆著書
    SNSでフォローする