• 締切済み

HTMLにエクセルの情報を配置したい

エクセルについて教えてください。 エクセルのA列に商品名、B列に画像、C列に商品の説明文、D列に商品URLを記入して、これが30商品=30行になっているとします。そして、このエクセルの文字列をHTMLの特定の場所に配置したいのです。 HTMLは、 <div class="block"> <img src="images/[B1]" alt="[A1]" /><br /> <a href="[D1]">[A1]</a><br /> <p>[C1]</p> </div> <div class="block2"> <ul> <li><a href="[D2]">[A2}</a></li> <li><a href="[D3]">[A3}</a></li> </div> などのように、あらかじめエクセルの情報を入れたい場所をテンプレート化して、[A1}とあればエクセルのA1の文字列を、[B1]とあれば、エクセルのB1のセルの文字列が入るようなイメージなのですが、こんなことってできるものなのでしょうか? 似たようなものにBP Tranというフリーソフトがあり、HTMLファイルとCSVファイルを選択すると、自動でHTMLファイルを任意の名前で出力してくれるものがありまして、これのような感じなのですが・・・。 どこまでが出来て、どこまでが出来ないのか、また出来るとすればどのような方法があるのかが、分からず検索がうまくできない状況で困っています。 詳しい方がいらっしゃいましたら、ご教授宜しくお願いします。

みんなの回答

  • keithin
  • ベストアンサー率66% (5278/7940)
回答No.1

幾つか手はあります。 もっともベタですが,欲しい結果に一番近い方法としては… A1:D31にそういった表があるとすると F1セルに ="<div class=""block"">"&CHAR(10)& "<img src=""images/["&B1&"]"" alt=""["&A1&"]"" /><br />"""&CHAR(10)& "<a href=""["&D1&"]"">["&A1&"]</a><br />"""&CHAR(10)& "<p>["&C1&"]</p>"""&CHAR(10)& "</div>"""&CHAR(10)&CHAR(10)& "<div class=""block2"">"""&CHAR(10)& "<ul>" という数式を記入(見た目判りやすく行を分けて記入してあります。このままコピーしF1セルを選んで「数式バーの中に貼り付け」てやればOKです) F2セルに ="<li><a href=""["&D2&"]"">["&A2&"]</a></li>" という数式を記入 F2セルをF31セルまでコピーする F列の列幅をとりあえずぐぐぐぐっと広げておく F列を選び,右クリックしてセルの書式設定の配置タブで折り返して全体を表示にチェックを入れる 計算できたF1:F31をコピー,メモ帳に貼り付けると欲しいhtmlのテキスト(ただし一番最後の</div>以外)ができあがっています。 適宜拡張子htmで保存するなり,既存のhtmlテキストに更にコピーし貼り付けて埋め込んで使えます。 方法2: A1:D31を選び,ご利用のエクセルのバージョンに応じてWEB形式で保存で「選択範囲を発行」します。 表範囲に対応するエクセル様式のhtmlファイルが作成されるので,今あるhtmlから適宜埋め込みとして呼び出して使ってみてください。そういう事ができるhtmlの書き方は,スミマセンエクセルのスコープじゃないんで判りません。

関連するQ&A

  • 【Html CSS】<a>の上に文字を配置したい

    添付の画像の様にしたいです。 一番左には「SoldOut」って文字が一番上に配置されてます。 (この状態でhoverも<a>のリンクも効かせたい) 以下は、ソースです。これを添付の画像の様にしたいです。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; vertical-align: middle; } .box li{ float: left; list-style:none; } .box .out{ border-right: 10px solid #fff; border-top: 10px solid #fff; } .box a { text-align: center; display: block; text-decoration: none; font-weight: bold; color: #69380f; background-color: #f2f2f2; width: 100px; height: 120px; } .box a:hover{ background-color: #ccc; } </style> </head> <body> <ul class='box'> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> </ul> <br> </body> </html> 以上、ご指導の程、宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • Excel VBAを使ってHTML生成をしたい

    エクセルにデータを入力し、下記のようなhtmlファイルに各々のセルに対応した数値が代入されたものを生成したいと考えています。 <a href="【A1】.html">【A2】</a><br/> <a href="【B1】.html">【B2】</a><br/> <a href="【C1】.html">【C2】</a><br/> <a href="【D1】.html">【D2】</a><br/> <a href="【E1】.html">【E2】</a><br/> VBAを使ってこのようなことは可能でしょうか? また、そのほかどのような方法が考えられますでしょうか? なにとぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • HTMLとCSSのホームページのメニューについて

    HTMLで過去に作った経験がほんのちょっとだけありますが、フレームは良くないという話もあり、 またCSSたどあとで全HTMLファイルに対してちょっとの変更でデザイン変更できるということで 今回初めてHTMLとCSSでホームページを作りました。 HTMLはまあこんな感じです。 <body> <div id="contener"> <div id="contents"> <h1>内容だよ</h1> <div id="main"> <p>内容1だよ<br> 内容1ですよ。内容1だって言ってるよ。 </p> </div> </div> </div> <!--左サイドメニューバー(回り込み)--> <ul> <li><a href="index.html">TOPページ</a></li><br> <li><a href="naiyou1/naiyou1.html">naiyou1</a></li> <li><a href="naiyou2/naiyou2.html">naiyou2</a></li> <li><a href="naiyou3/naiyou3.html">naiyou3</a></li> <li><a href="naiyou4/naiyou4.html">naiyou4</a></li> </ul> </body> で今困っているのが「左サイドメニューバー(回り込み)」以下で左にメニューバーを設置しているのですが、 コンテンツを増やすたび”全部のHTMLにリンク1行追加しなければいけない”ということです。 <li><a href="naiyou5/naiyou5.html">naiyou5</a></li> とか。 数ページだったらなんてことないのですが、20ページ以上になると手間ですし、ミスも出てきます。 こんなものなのでしょうか? いい知恵があれば教えてください。

    • ベストアンサー
    • CSS
  • 指定要素をスクロール時に非表示

    JSで、divで囲ったある指定要素をスクロールしたら非表示にしたいのですが、 当方jsにまったく疎く、書き方がわかりません。 どなたかお助けいただけますと助かります。 サンプルなのですが、HTMLファイルのコードは以下になります。 <div id="subNav"> <ul class="fixed"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div>

  • sedで特定行を抽出したいです

    はじめまして、 下記のようなファイルがあり、sedで特定文字列(@@@, @@@@, @@@@@)を含む行のみを一回で抽出したいです。 sed -n -e "/p=300/,/eee/p" input > output' だと 不要な行も入ってしまいます orz... sedはWindows上のsed Logos 2.42を使用しています。 どのように書けば対象行のみを抽出できるか、ご教授をお願いいたします。 [ 読込み対象ファイル ] ***, @@@, @@@@, @@@@@は雑多な文字列 最初に不要な行が10~15行 <div class="aaa"> <a href="http://www.***.***/?p=300&***">@@@</a> </div> <div class="bbb"> <ul class="ccc"> <li class="ddd">@@@@</li> <li class="eee">@@@@@</li> <div class="aaa"> <a href="http://www.***.***/?p=300&***">@@@</a> </div> <div class="bbb"> <ul class="ccc"> <li class="ddd">@@@@</li> <li class="eee">@@@@@</li> 以下<div class="aaa">から<li class="eee">@@@@@</li>まで20回繰り返し。

  • HTML/CSSで配置の仕方がわかりません。

    メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML;<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">About US</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p>    ← 問題の箇所、中盤から始まる。 CSS: /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }

    • ベストアンサー
    • HTML
  • JavascriptでHTMLを書き換えたいのです

    うまく動作しないJavascriptなのですが、こういった方法は可能なのでしょうか? お分かりになりましたらご教授お願いします。 -------------------- ■html <div class="orenge1"></div> オレンジ1です<br> <div class="orenge2"></div> オレンジ2です<br> <div class="orenge3"></div> オレンジ3です<br> -------------------- ■Javascript 記述は最下部の</body>直前です。 <script type="text/javascript"> window.onload = function() { document.getElementsByClassName("orange1").innerHTML = ('<a href="./item/?item=orange1">商品はコチラ</a>'); document.getElementsByClassName("orange2").innerHTML = ('<a href="./item/?item=orange2">商品はコチラ</a>'); document.getElementsByClassName("orange3").innerHTML = ('<a href="./item/?item=orange3">商品はコチラ</a>'); } </script> -------------------- ■やりたい事 <div class="orenge1"></div> の部分に <a href="./item/?item=orange1">商品はコチラ</a> を表示したいと思っています。 同一ページに複数回表れる場合もあります。 よろしくお願い致します。

  • HTML、CSS

    FC2(無料サーバー)でホームページを作っているのですが、FC2の広告(Powered by…という下に一行だけ出るもの)が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体  --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • PHP URL→HTML→取得→RSS出力

    PHP URL指定→HTMLソース→指定タグ要素取得(複数)→RSS(.xml)出力について URLからHTMLソースを取得し、要素を取得しRSSファイルを作りたいと思っています。 例えば、http://shopping.yahoo.co.jp/ranking/のURLのHTMLソース内から <p class="elPhoto"> <a href="○○○.html"> <img src="【取得したい文字列1】" width="200" height="200" alt="○○○"> </a> </p> <h4 class="elTitle"> <a href="【取得したい文字列2】">【取得したい文字列3】</a> </h4> <h4 class="elPrice"> <span>【取得したい文字列4】</span>円 </h4> <p class="elSellStatus"></p> <h4 class="elStore"> ストア:<a href="【取得したい文字列5】">【取得したい文字列6】</a> </h4> など指定する各要素を全件取得し、 <item> <title>【取得したい文字列3】</title> <link>【取得したい文字列2】</link> <description> 【取得したい文字列1】<br> 【取得したい文字列4】<br> 【取得したい文字列6】<br> 【取得したい文字列5】 </description> </item> などとRSSで全件出力し、xmlファイルを作成したいです。 アドバイス、ご指導お願いします。

    • 締切済み
    • PHP
  • <ul>タグでのリストの使い方

    こんばんわ。 すみません。リストをCSSで体裁を整え、ここまでできましたが、各リストの下に、ラインの画像を入れたいのですが、うまくいきません。。 画像を入れるやり方を教えてください~ <tr> <td> <div class="abc"> <ul> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/08/10<br> ○○○○</a></li> </ul> </div> </td> </tr>

    • ベストアンサー
    • HTML

専門家に質問してみよう