知っておくと3倍作業が早くなるエクセルHTMLコーディング術

知っておくと3倍作業が早くなるエクセルHTMLコーディング術

 

エクセルでHTMLコーディングって聞いて、普通はありえない組み合わせだと思ったでしょ?

HTMLコーディングをする際にテキストエディタやDreamweaverなどのオーサリングツールを使うことがほとんどですが、経験上一部のコーディングはエクセルで行ったほうが早いことがあります。

以前書いたセル内の値の分割方法同様、MicrosoftのOfficeの中のエクセルを使ったHTMLコーディング術をお知らせします。

エクセルでコーディングしたほうが早い場合

以下の条件の時にエクセルを使ったコーディングが使えます。

  • エクセルの一覧形式で準備されている。
  • かつ、一覧表の行が10以上ある。

メリット

  • 文字の打ち間違いがない
  • コピペミスがない
  • データ分割がつかえるので内容を変更してそのままコーディングできる。
  • コードの書き直しも簡単

早速コーディングをしてみる。

例えば上のようなリストがエクセルであったとき、表やリストを作成しなければならないとき、関数(今回のは関数でもないな)でつなげていきます。

今回使う関数

  • &(アンパサンド)
    セルの値を繋げるのに使います。
  • ””(ダブルクォーテーション)
    文字列を書く際に計算式の中で文字列とるために、文字列を囲みます。

表(テーブル)をコーディング

テーブルの開始タグは手書きで書くとして、列の値が順にセルに入る3列のテーブルを書きます。

一列が以下のHTMLになれば良いのでこれを関数と「””」でつなげます。

HTMLの理想形は以下。

<tr><td>県番号</td><td>都道府県名</td><td>県庁所在地</td></tr>

つなげる関数

  1. HTMLタグ部分は「””」で計算式の中に書いてしまいます。
  2. セルの値または文字列をつなげるときに「&」でつなげます
  3. tdの中に入れたいエクセルのセルを選びます。
    今回はB2,C2,D2をそれぞれ選択します。
  4. 計算式入力したあとエクセルの画面で確認。理想通りのHTMLになっている確認する。

きれいにHTMLができていれば、あとはセルを下にコピーすれば適宜値をエクセルで読み込んでテーブルのタグを書いてくれます。

もし間違ってたら一番上のセルを修正して、コピーすればやり直しは簡単にできます。

応用すれば

HTML部分を書き換えてつなぎ直せば、

なども使えるので、効率的にHTMLコーディングができます。

是非エクセルコーディングで快適な制作ライフをお過ごしください。

Web/Design/Creativeカテゴリの最新記事