めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
thinkのScrapBook: JavaScriptでExcelデータをtable要素に変換
(X)HTMLのtable要素は多量のデータを整理してくれる優れものですが、(X)HTMLソースからは直感的に全体像が見て取れず、それ故、編集が面倒、という理由から今まで敬遠していました。 この欠点を解消するため、Excelの表データをtable要素に変換するJavaScriptを書いてみました。 CSVをtable要素に変換 使い方 Excelファイルを開き、table要素に変換したい部分を範囲選択してコピー (マウスでぐぐ～っと選択すればOK) 変換スクリプトのフォーム上に貼り付け [変換] ボタンをクリック！ table要素に変換されたHTMLソースが出力される 内部動作 (アルゴリズム) Excelからクリップボードにコピーされたデータは「タブ文字区切りのCSVフォーマット」となっており、これを array[行][列] で構成される多次元配列に変換します。 (各セルにあるデータはタ
エクセルデータからHTML Tableタグの表を作成してくれる「Tableizer」
↓画像のようにエクセルデータをコピペするだけでOKです。 バイナリデータのタブ区切りで認識しているみたいです。 生成されたタグ 厳密に言うと、HTMLタグとCSSが生成されます。 CSSは <head> </head> 間か、外部ファイルに移しても良いかもしれませんね。 <style type="text/css"> table.tableizer-table {border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} .tableizer-table td {padding: 4px; margin: 3px; border: 1px solid #ccc;} .tableizer-firstrow td {background-color: #FDA500; color: #
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
