01_Mac 02_アプリの使い方・活用方法 04_ウェブディレクター 06_html・マークアップ 07_仕事で役立つ情報

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

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ページ」にして保存する。

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

\ この情報をシェアしよう! /

-01_Mac, 02_アプリの使い方・活用方法, 04_ウェブディレクター, 06_html・マークアップ, 07_仕事で役立つ情報
-, , , , ,

Copyright© あなたのスイッチを押すブログ , 2020 All Rights Reserved.