Web制作にルーチンワークに便利!Googleスプレッドシートを利用した簡単html生成法

Googleスプレッドシートを利用した簡単html生成法を紹介します。

毎回いちいち直打ちしたりベースのテンプレートを使ったりしていませんか?

Googleスプレッドシートを使ってこの方法で作り込むことで楽天の商品登録や商品ページのhtmlを生成することも可能です。
また随時変更があった時のブラッシュアップや作業ミスの防止、Googleスプレッドシートの特徴である共有がとっても簡単にできます。

さらに毎回リストタグ内のテキストが変わるといった場合にも対応できます。

生成したいhtmlを用意する

まずは下記のように生成したいベースのhtmlを用意します。

<ul>
<li>テキスト1</li>
<li>テキスト2</li>
<li>テキスト3</li>
</ul>

テキスト部分とhtmlタグを切り分ける

生成したいhtmlを用意する

生成したいベースのhtmlを用意したらリストタグ内のテキスト部分とhtmlタグを切り分けてスプレッドシートに入力していきます。

各セルをつなげる

テキスト部分とhtmlタグを切り分ける

切り分けたセルをつなげていきます。

上記の画像の場合だとD3の赤い枠に

=B2&B3&C3&B4&B3&C4&B4&B3&C5&B4&B5

と入力します。

するとC列のテキストを変更してもすぐに反映されそのままコピペで利用することが出来ます。

今回の例は簡単なhtmlですがこれを作りこむことで商品ページのテキスト部分だけをスプレッドシートに入力&コピペだけでhtmlを作ることが出来ます。また作業ミスなども軽減することも出来るのでおすすめです。

注意ポイント

生成したhtmlをそのままコピペするとなぜかダブルクォーテーションが入ってしまいます。
そんな時はMicrosoftのWordを開いてペースト!そしてhtmlを貼りたい箇所にそれをコピー!

するとあら不思議!ちゃんとしたhtmlになります。

良かったら試してみてくださいね。

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

IE7でdisplay:inline-blockを適用させる方法
Web制作者に必須のFTPクライアントソフト!FileZillaのメリットとは?
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
IE8以下でCSSで背景を指定したのに全く表示されない時にチェックしておきたいポイント
PC・スマホでMedia Queriesを使って個別にCSSを読み込ませる方法(IE対策済み)
楽天ショップのリンク付きの縦バナーを設置する方法
Sublime Text 2で自動補完してさらさら~っとHTMLやCSSを記述する方法
最近残りやすくなったな~って感じるWEB製作者の皆様!Clear Cashがめっちゃ便利と強く言いたい!
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」
WordPressをインストールしたディレクトリと同じ階層にindex.htmlがある時の開発準備TIPS
IEチェックでの修正に必須!IEの条件分岐&IE7やIE8などのCSSハック一覧をまとめてみました。
Webサイトを制作したらしておくべきチェックリスト
これだけあればOK! WEB制作で必須の簡単なURLを入れるだけでダミー画像が作れるWebサービス3選
[IE対策]IEでfade効果などをさせた場合のPNG画像が透過されない(黒くなる)時の対処法
GitHubGistでWhoops.と表示された時の対処法

Menu

HOME

 TOP