エクセルで効率的にHTMLコーディングをする方法

この記事は2分で読めます

dreamweaverなどのソフトウェアがあれば、HTMLコーディングも楽なのですが、
お金をできるだけかけずにHTMLコーディングを行う方法はないものか。

そこで、エクセルでHTMLコーディングを行ってみたところ、
意外に効率的に作成できたのでご紹介します。

使うソフト

  • 秀丸 (HTMLコーディングしたものの、見た目を整えるため)
  • Firefox (できたHTMLをブラウザで確認するためです。他のブラウザでも構いません。)
  • Excel Online(オンライン環境で、製品版のエクセルの一部の機能が使えます。
    こちらで紹介するHTMLコーディングをするだけであれば、Excel Onlineで十分です。)
    (オフライン環境で使うのであれば、Libre Office Calcなどを使えば、オフィスソフトウェアの費用も掛かりません)
    Excel Onlineを利用するには、予めマイクロソフトのアカウントが必要です。アカウントは無料で作成できますので、登録して利用しましょう。
    Libre Officeは無料で使えるオフィスソフトウェアです。Microsoftのオフィス製品とほぼ同等の作業ができると思います。
    ※秀丸はシェアウェアです。試用してみて気に入ったら購入をお願いします。

エクセルで作成するコツ

コツは、変数と値で列を分けることです。

  1. まずはHTMLコーディングを普通に手書きなどで書いていきます。
    (テーブルの項目行と、値の1行目のみ)
    01
  2. 手書きで書いたものを、エクセルに取り込みます。
    02<注意!>
    単純にソースをコピペしても、エクセルはHTMLの構造を理解してテーブルとしてコピペしてしまいます。
    なので、一度HTMLソースを保存し、
    【データ】→【外部データの取り込みの中にある、テキストファイルの取り込み】をクリックして、
    保存したソースを選択して取り込んでください。
  3. コピペしたコードを分解していきます。
    03
    分解したら、1行目のコーディングをデータがあるだけコピペして量産します。
    04
  4. 表組みに入れる値を1列にします。
    1. エクセルの表全体をコピーし、秀丸にコピペします。
      0506
    2. 秀丸で、置換(Ctrl+R)を選択します。
    3. 検索:\t 置換:\n と入力し、正規表現にチェックを入れて実行します。
      07
      そうすると、1行目の左の列から順番にセル単位で改行されます。
      08
  5. 4.で実行した内容を、エクセルのセルの値の箇所にコピペします。
    09

この方法が威力を発揮する場面

行列が多いテーブルを作成する時

行列が多いということは、多くのセルを抱えているテーブルだということです。
セルに値を入力していくのに、一つずつ手入力をしていくと、
どうしてもセルの数に比例して時間がかかるもの。
なので、予め入力するべき内容をエクセルなどで列毎にまとめておき、
一気にコピペすることで、一瞬でテーブルを作れます。

箇条書きの多いリストを作成する時

テーブルだけではなく、リストなどにも使うことができます。
特に入れ子の多いリストを作成する場合に重宝します。
手順のあるマニュアルの作成などに利用価値が高いです。

まとめ

今回はHTMLコーディングの効率化の話をしました。
今回の内容に限らず、コンピュータの力を借りることで、
手間をできるだけ増やさずに多くの作業を行う方法を探し、使いこなすことができれば、考えるというコンピュータに苦手な作業で、自分の付加価値を上げる仕事に注力することができるようになります。

個人ブログなどでも、コンテンツマーケティングの重要性が謳われているこのごろ、皆コンテンツの充実を図っており、テキスト平打ちだけではなく、画像や表組みなどで分かりやすさを追求しています。

表組みなどは、比較資料を作成するときや、一覧資料を作成するときに重宝しますが、コーディングが面倒だという難点があります。

WordPressなどのプラグインを使う手もありますが、
ここで紹介した内容で一度フォーマットを作ってしまえば、後は使いまわすだけで簡単に作れます。
ぜひお試しください。

 

 

お名前(苗字のみ)
メールアドレス



スポンサードリンク

  • このエントリーをはてなブックマークに追加

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサードリンク

自己紹介

みなさま初めまして。けいたろうです。

これまで自分で試してきた方法の中で、行動力を高める方法やマインドを教えます。

詳しくは、自己紹介をご覧ください。
  • このエントリーをはてなブックマークに追加
  • LINEで送る