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

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

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

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

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

ちなみにExcelを使った方法もご紹介していますので、合わせて参考にしてみてください。

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

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

numbers-web-html_1

2作成した表を選択し、【Command + C】でコピーします。

numbers-web-html_2

3Macにデフォルトでインストールされている「テキストエディット」アプリを開きます。

numbers-web-html_3

アプリケーションフォルダに入っていると思いますが、探すのが面倒な場合はSpotlightを利用しましょう!

4テキストのフォーマットを「リッチテキスト」に変更したいので、メニューの「フォーマット」中から「リッチテキスト」を選択します。

numbers-web-html_4

5【Command + V】を押して、先ほどコピーした内容をペーストします。

numbers-web-html_5

6最後に、この内容を保存するためにメニューの「ファイル」から「保存」を選択。

numbers-web-html_6

7「フォーマット」を「Webページ(.html)」に変更し、保存します。

numbers-web-html_7

8保存したファイルをテキストエディタアプリで開けば、作った表がHTMLで記述されています。デザインを再現するための class や style も記述されますので、自分でカスタマイズして使えます。

numbers-web-html_8

テキストエディタアプリは、個人的には CotEditor がオススメです。すべてにおいて動作が軽快で、デザインもシンプル。難しいことなく使いこなせるので、入れておいて全く損のないアプリです。

CotEditor

無料
(2018.12.07時点)
posted with ポチレバ

まとめ

Numbersで表を作成。作った表をコピーする。

テキストエディットアプリを開き、リッチテキスト形式で貼り付ける。

フォーマットを「Webページ」にして保存する。

テーブルデザインが苦手な人でも、これなら直感的に表を作れますね。実は僕も重宝している方法です。ぜひ活用してみてください。

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

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

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