banner01
画像用 HTML自動生成法
Home
1 はじめに

2 手順の概要

3 HTML自動生成法
 3.1 ひな形画面の作成
 3.2 画像データの作成
 3.3 Excel で HTML文を合成
 3.4 Excel →HTML ファイル
4 応用編


[
  3 HTML 自動生成法 続き ]

 3.4 Excel → HTML 化

 Excel の Auto_HTML.xls ブックの HTML生成 シートで 合成した HTML文を テキストファイルにコピーし、名前を付けて保存すれば 画像用 HTML 文 ファイルが完成します。

 @ 画像一覧シートの 画像データリストに 所要のデータを記入します。

 A 同シートの HTML 文 を出力する 画像 No を 指定します。 ( C3 セル )

 B HTML生成シートの A 列の HTML文 部分を選択し コピーします。

 C 新しい テキストファイルを開きます。

 D テキストファイルに クリップボードにコピーした HTML文を貼り付けます。

 E 名前を付けて保存します。 例では gazou005.htm です。 以上で完成です。

 F 以上で HTML文が 完成しました。 複数の画像分のファイルを続けて作るときは、@から繰り返します。


 ☆ 完成した HTML 文

赤文字表示部分は 内容を解りやすいように 式自体を表示してあります。
実際の Excel 画面の表示では 下の行の
茶色文字列 のように見えます。

<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
="<title>"&LOOKUP(画像一覧!$C$3,画像一覧!A7:A16,画像一覧!B7:B16)&"</title>"
↑の実際の表示は <title>画像5 皆既月食</title>
</head>
="<body background="&CHAR(34)&画像一覧!C4&CHAR(34)&">"
↑の実際の表示は <body background="flowers2.jpg">
<table border="0" width="71%">
  <tr>
    <td width="59%"><b>タイトル</b></td>
    <td width="15%"><a href="index.htm">Homeへ</a></td>
="    <td width="&CHAR(34)&"13%"&CHAR(34)&"><a href="&CHAR(34)&"gazou"&RIGHT("00"&画像一覧!C3-1,3)&".htm"&CHAR(34)&">←前へ</a></td>"
↑の実際の表示は <td width="13%"><a href="gazou004.htm">←前へ</a></td>
="    <td width="&CHAR(34)&"17%"&CHAR(34)&"><a href="&CHAR(34)&"gazou"&RIGHT("00"&画像一覧!C3+1,3)&".htm"&CHAR(34)&">次へ→</a></td>"
↑の実際の表示は <td width="17%"><a href="gazou006.htm">次へ→</a></td>
  </tr>
</table>
<table border="5" width="33%" bordercolor="#008080">
  <tr>
="    <td width="&CHAR(34)&"100%"&CHAR(34)&"><img border="&CHAR(34)&"0"&CHAR(34)&" src="&CHAR(34)&"gazou"&RIGHT("00"&画像一覧!C3,3)&".jpg"&CHAR(34)&" width="&LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!E7:E16)&CHAR(34)&" height="&LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!F7:F16)&CHAR(34)&" alt="&CHAR(34)&"gazou"&RIGHT("00"&画像一覧!C3,3)&CHAR(34)&"></td>"
↑の実際の表示は <td width="100%"><img border="0" src="gazou005.jpg" width=400" height=140" alt="gazou005"></td>
  </tr>
</table>
="<p>No "&RIGHT("00"&画像一覧!C3,3)&"  <b>"&LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!C7:C16)&"</b><br>"
↑の実際の表示は <p>No 005  <b>テスト画像5 皆既月食</b><br>
<br>
=LOOKUP(画像一覧!C3,画像一覧!A7:A16,画像一覧!D7:D16)&"</p>"
↑の実際の表示は なにぬねの05 2000.7.16 </p>
</body>
</html>

 

☆ 完成した HTML 文を ブラウザで表示したイメージ


 

 2000.12.15 追加

以上説明した Excel サンプル・ファイルをお試し下さい。
上のリンク文字をクリックしていただき Excel ファイルが開いたら、ご自分の適当なフォルダに名前を付けて保存
( ファイル名 : auto_htm.xls ) して下さい。 PCに MS- Excel 97以降がインストールされていない場合はご利用できません。

Home 前ページへ 次ぺーじへ