ホームページで簡単にテーブルを作成する方法

このQ&Aのポイント
  • ホームページでテーブルを使って写真を表示する方法について教えてください。
  • 写真の表示にはメモ帳で記述する必要があり、手間がかかるため、別の方法が知りたいです。
  • VIXを使ってテーブルを簡単に作成する方法や他のソフトでの代替方法があれば教えてください。
回答を見る
  • ベストアンサー

ホームページで<TABLE>の簡易的な作成について

私のホームページでテーブルを使用して写真を表示しています。 写真の表示にはメモ帳で、下記の様に記述し写真も2種類用意しています。 写真を用意するのは苦になりませんが、メモ帳で1枚1枚記述するのが大変なんです。 この作業が、VIXでできそうだという情報を頂きましたので、さっそくDLしてみました。 (gooへの質問が同様な質問で、申し訳ありません) まだ、操作していませんが下記の様な記述をファイルにして取り出すことは可能でしょうか? VIXでできそうならば、アドバイスをお願いします <TABLE> <TR> <Td>テスト</td> <Td>テスト</td>  ・ <Td>テスト</td> </TR> <TR> <TD><a href="2002\large02/(サイズ大).jpg"><IMG src="2002/before/(サイズ小).jpg"></a></td> <TD><a href="2002\large02/(サイズ大).jpg"><IMG src="2002/before/(サイズ小).jpg"></a></td>  ・ <Td><a href="2002\large02/(サイズ大).jpg"><IMG src="2002/before/(サイズ小).jpg"></a></td> </TR> </TABLE> ここでは、テーブルについて質問させて頂きましたが、他の方法でサムネール → 大きな写真と切り替えられればOKです。 この時にHP用の記述が取り出せると有難いです。 他のソフトでも結構です上手い方法はないでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • DrFell
  • ベストアンサー率55% (305/551)
回答No.4

Vixで 画像ー>アルバムHTML で、ご要望の事ができるはずなのですが? 一応 http://owlnet.sub.jp/senior/main/vix-albumhtml.htm http://www.ne.jp/asahi/yamaguchi/marifuhatsu/qapages/ViX/vix004/index.htm 大きなjpgをフォルダ1つにまとめておけば、サムネイル画像を勝手に作成し、ご希望そのものの形式でhtmlファイルを作成できます。 サムネイル画像の大きさは、先に指定しておきます。

hana-51
質問者

お礼

有難うございます テーブルのつくり方がややこしくなりますが、HPを見るとそのような説明になっており出来そうに思えました このテスト的に作成したデモHPがあると完成が見られてありがたいが、それは無理なことでしょうか? (手間がかかるということでしたら無視してください) 写真を複数扱えるようですが、テーブルの横列と行の指定が見当たらないようです (まだ理解できていませんので、見逃しているかもしれません) もう少し、説明HPを読んで試してみます。

hana-51
質問者

補足

列数と行数の設定は判りましたので、さっそく作成してみました。 表示している内容、サムネール表示の写真をクリックすると拡大される 動作としては、私の思う様な物で作成されて満足していますが、 下記について、ご存知でしたらアドバイスをいただけないでしょうか。 作製したhtmlを表示させると、 ・写真の下にコメントが表示されていました  メモ帳で上に持って行くことは可能ですが設定はできるのでしょうか? ・コメントはファイル名が表示されていましたが、これは任意のコメントを入力可能なのでしょうか  また、コメントの編集ができると楽ですね  最悪は、メモ帳で編集はできます ・写真間隔、行間隔が広すぎますのでこれを最小にしたい  試しに width="124" height="87" を削除しましたが少ししか狭まりませんでした。   ↓  アルバムとはいえ、mini20~max150枚くらいを1ページで考えていますので、  余白は0にしたいのです。 下記は、出来なければテーブルを細かく作成して、メモ帳で編集する方法もあると思っています。 ・レイアウトした写真の横にコメント欄を追加する事は可能でしょうか  また、列の写真の下にコメントを入れられるような事は可能でしょうか よろしくお願いします

その他の回答 (3)

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.3

ViXを使ってみました。 メニューの一覧表作成から、指定したフォルダ内のファイル名を書き出せます。 あとは、Excelかテキストエディタで前後のタグを付け足せばできます。

hana-51
質問者

お礼

outbraveさん、アドバイスを有難う御座います。 私も皆さんに頼るばかりではなく、NETで調べてみました。 >あとは、Excelかテキストエディタで前後のタグを付け足せばできます。 これは、私がメモ帳で作成している事の逆の様ですね。 私はメモ帳でテーブルをコピーして、作成し そこへ配置したいjpgファイル大小を編集して記入しています。 これが結構大変なんです・・。 テーブルに写真の大小をレイアウトして、そのファイル名が反映されると非常に助かるのですが そんなにうまい話はないと言う事ですね。

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.2

IrfanViewの形式/名前の一括変換で、名前の形式を「image-###.jpg」にして実行すると、指定したフォルダ内のファイルが image-001.jpg image-002.jpg ... のようになります。 画像ファイルの順番が決まっているのなら、予め元の画像ファイルの名前に数字付けて並び替えが必要です。 abc.jpg→01abc.jpg 次に、ExcelのA1セルに <td><a href="2002/large02/image-001.jpg"> B1セルに <img src="2002/before/image-001.jpg"></a></td> と入れて、それぞれのセルの右下を下方向に引っ張ると image-001.jpgがimage-002.jpgと連番になり複製されます。 空いているセルに =A1&B1 と入れるとA1とB1が結合されて <td><a href="2002/large02/image-001.jpg"><img src="2002/before/image-001.jpg"></a></td> のようになります、こちらもセルを下に引っ張って複製します。 あとは、コピーしてメモ帳などのエディタにペーストしてください。 2002\large02 は、2002/large02の間違いだと思います。

hana-51
質問者

お礼

>2002\large02 は、2002/large02の間違いだと思います ご指摘を有難うございます。 早速見直してみます。 IrfanViewなるほど・・・ですね あらかじめ、 ファイルの並びを整理してフォルダーに保存し  ・ >IrfanViewの形式/名前の一括変換・・ 先に一括変換をして、IrfanViewで読み込んで出力されるんですよね それをエクセルで読み込む時にリンクが取れるようにして >こちらもセルを下に引っ張って複製します 1行だけ完成させると、あとは写真の枚数分行をコピーするということは分かりましたが エクセルに反映させるようですが、繋がりがよくわかりません IrfanViewのソフトからエクセルへはどの様にデータを渡すのでしょうか?

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.1

私なら、IrfanView などの画像ソフトでファイル名を連番にしておき、Excel のセルにタグを入れ下に引っ張って作成します。

hana-51
質問者

お礼

IrfanViewの紹介をありがとうございます NETで調べると多機能なようですね、今使用しているソフトよりは良さそうに思います。 すみませんが、もう少し具体的にアウトプットについて記述いただけないでしょうか? (細かくは、ソフトの操作を理解するしかないと思いますが) アウトプットのイメージがわかれば、どの様になるか判断できますので。 OSについて記載がありませんでした。 前の質問で指摘されて・・繰り返してしまった。 OS:WIN7 IE:11

関連するQ&A

  • ホームページの<TABLE>の簡易的な方法について

    ホームページ作成で写真をサムネールで表示し、クリックすると大きなサイズを表示する 簡便な方法について教えて下さい 今は、メモ帳で下記の様な記述を1枚1枚記入して作成しています これを、アプリで写真の配置で自動的に登録させるようなものがありますか? 毎回ホームページを作成する都度行うのも大変なので・・・ 写真を大小用意しておいて、レイアウトにはめるだけでできる様なものがあると良いのですが なにかありませんでしょうか? <TABLE> <TR> <Td>テスト</td> <Td>テスト</td>  ・  ・ <Td>テスト</td> </TR> <TR> <TD><a href="2002\large02/(サイズ大).jpg"><IMG src="2002/before/(サイズ小).jpg"></a></td> <TD><a href="2002\large02/(サイズ大).jpg"><IMG src="2002/before/(サイズ小).jpg"></a></td>  ・  ・ <Td><a href="2002\large02/(サイズ大).jpg"><IMG src="2002/before/(サイズ小).jpg"></a></td> </TR> </TABLE>

  • table要素の使い道

    tableはレイアウトに使ってはいけないのは知っていますが、boxのなかに画像でリンクを作る簡単なメニューの場合は、リストとtableどちらを使ったほうがいいのでしょうか? こんな感じです。リストの場合はcssで同じような感じにします <table> <tr> <td><a href="#"><img src="a.png" alt=""></a></td> <td><a href="#"><img src="b.png" alt=""></a></td> </tr> <tr> <td><a href="#"><img src="c.png" alt=""></a></td> <td><a href="#"><img src="d.png" alt=""></a></td> </tr> </table>

    • ベストアンサー
    • HTML
  • 助けてください><IE上で1pxのズレ

    こんにちわ。 組んだテーブルに謎の1pxがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします>< <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>

  • ホームページに写真の貼り付け方

    初めてホームページを作成していてつまずいてしまいました。 写真を50枚ほど貼り付けて、クリックしたら写真の拡大が出るという形のものを作りたいのですが、いい方法ありましたら教えてください。 現在は <TABLE> <TR> <TD><A HREF="写真の場所.JPG"><IMG SRC="写真の場所.JPG" WIDTH="120" HEIGHT="120"></A></TD> <TD> ・・・・ </TD> </TR> </TABLE> という具合にテーブルに写真を入れて作ってるのですが、写真の表示速度が非常に遅いのと、途中から写真が10~15枚目(コンピュータを起動した毎に違う)から写真が表示されなく枠組みだけが表示されるようになってしまいます。(枠組みの左上に×が表示されています。) よろしくお願いします。

    • ベストアンサー
    • HTML
  • tableを自動作成・追加できるプログラムを探しているのです・・

    <table> <tbody> <tr> <td colspan="9" align="center" </TD></td> </tr> <tr> <td colspan="9" <A href="http:// target=" _blank"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="3"></td> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td><img src=".jpg"></td> </tr> </tbody> </table> こんなtableを作成し(tdには数値・文字列・画像が入ります)一つのhtmlファイルに一ヶ月に10個ほど手動でtableを追加しています。 これを入力フォームより数値や文字列・参照画像を入力し、月ごとのhtmlにしてるので、指定したhtmlに反映させるようなプログラム(cgi? javascript? PHP?)をご存じの方いらっしゃいませんでしょうか?

  • <td> 内のテーブルを上寄せにするには?

    すみません教えていただけますか? 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか? よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> &nbsp; </td> </tr> </table>

    • ベストアンサー
    • HTML
  • スワップイメージ+リンクの変更

    まったくの素人ですが、お教えください。 以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。 <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table> a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、 hoge.jpgを大きなメインの画面にしたいと思っています。 このとき、abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされ、かつそれぞれの項目のリンク(a.html/b.html/c.html)がhoge.htmlと置き換わるようなjavascriptを作りたいと考えています。 イメージのスワップだけならいくつも見つけることができたのですが、イメージとリンクが両方ともスワップされるようなものを、見つけることができませんでした。もしそのようなjavascriptがweb上にありましたら、お教えください。

  • 写真の下に説明文

    こんにちは。 今アルバムのページを作っています。 右側に縮小した写真を縦に並べ、その写真をクリックすると画面中央に拡大されて映るというものです。 拡大された時、写真の簡単な説明文を写真の下に表示させたいんですが、やり方がわかりません。検索してみたんですが、それらしき物が見つからずこちらに参りました。 だいぶ略してますが、下記のようなソースを使って作りますよね?これで、中央に表示させるまでは出来ました。後は各写真の説明文の表示だけなんです。 <script type="text/javascript"> <!-- var img01 = "../photoothers/stamp.jpg"; function startimg(I){  document.image.src=I;  } //--> </script> =中略= <table> <tr> <td align=center> <table border =1> </td> </tr> <tr> <td align=center> <img src="../gif/●.jpg" name="image"> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01)"> <img src="../gif/●.jpg" width="130" height="100"></a> </td> </tr> </table> </td> </tr> </table> 宜しくお願いします。

  • スワップイメージ+リンクの変更 その2

    たびたび御世話になります。 以前、QNo.4078462で質問させていただいた者です。 http://oshiete1.goo.ne.jp/qa4078462.html 質問させていただいた問題は解決できたのですが、修正が必要となりました。 自分でなんとか解決してみようと試みたのですが、 少し時間が無いために改めて質問させてください。 以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。 <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table> a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、 hoge.jpgを大きなメインの画面にしたいと思っています。このとき、 1. abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされる 2. abcからマウスを外すとhoge.jpgに戻る の2点を満たすjavascriptを御教授ください。 2. の条件がある分、以前と違ってリンクまでスワップされる必要はありません。

  • テーブルタグ表示が上手くいかない(html・CSS

    下のタグを使うと、ブログに下記画像上部のように表示されているのですが 理想としては画像の下部分のように綺麗に表示したいです。 自分なりに何度かタグを弄っているのですが何度やっても画像上部のように乱れて表示されてしまい ムキー!っとなってます。 大変申し訳ないのですが、画像の下部分のように表示できるタグを教えてください。 何卒お願いします。 画像内のピンクの部分は実際には<img src="で指定された画像になります。 使ったタグ <table border="1"> <td><table id="table-03"> <colgroup> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV> </colgroup><tr> <td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td> <td><table id="table-03"> <colgroup> </colgroup> <tr> <tr><td>あああ名</td> <td>いいい</td> </tr> <tr> <td>ううう</td> <td>えええ</td> </tr> <tr> <td>おおお</td> <td>かかかかか~</td> </tr> </table></td> </tr> </table> </DIV>

専門家に質問してみよう