無名子のよしなしごと・別館
おもいつくままに
| 複数画像のレイアウトについて−−ＴＡＢＬＥタグの利用−− | ||
 |
||
| ウェブリブログもずいぶん進化して、複数画像の掲載やレイアウトも作業しやすくなってきましたね。 それでも、私の「胸を張って 冬桜」の様な、自由なレイアウトには充分とは言えないようです。 そこで、私が行っているＴＡＢＬＥタグとサムネイル画像を用いたレイアウトについて説明したいと思います。今回は、「サムネイル画像（縮小画像）の利用」と「ＴＡＢＬＥタグの利用」の２部に分かれています。縮小画像をクリックして本来の大きさの画像を表示させる方法については、「サムネイル画像（縮小画像）の利用」を参照して下さい。 |
|
| 本来は、一覧表の様な表を作成するときのＨＴＭＬタグなんですが、 ホームページの作成の時レイアウトのために良く流用されています。 使うタグは <TABLE> <TR>、<TD> ３つを組み合わせてテーブル（表）を作成します。 <TABLE> は表全体を、 <TR> 表の行を、 <TD> 表の項目を記述します。 <TABLE>から</TABLE>の間が表に成ります <TR>から</TR>の間が行に成ります。 必要な行数を<TABLE>から</TABLE>の間に書き込みます。 <TD>から</TD>の間が、項目、セルに成ります、 この間に必要な文章や、画像を挿入します。 印象としては、下記のような感じに成ります。 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 上から、余分な物を削除して <TABLE> <TR><TD>セル Ａ１</TD><TD>セル Ｂ１</TD><TD>セル Ｃ１</TD></TR> <TR><TD>セル Ａ２</TD><TD>セル Ｂ２</TD><TD>セル Ｃ２</TD></TR> </TABLE> これを表示すると、右のような表に成ります。 |
|
| <TD>から</TD>の間の「セル Ａ１」とか「セル Ｂ２」の所に、 画像表示の<IMG>タグを挿入すれば、画像の一覧が出来ますよね。 リンクの<A>タグと合わせれば、クリックして大きな画像を表示することも出来ます （「１．サムネイル画像（縮小画像）の利用」を参照して下さい）。 |
| 実際に、やってみましょう（用意した画像の都合で、一行だけです）。 （見やすくするために、行を分け、インデントさせています） <TABLE> <TR> <TD><IMG SRC="hototogisu_TAI_C_3ss06.JPG" BORDER="0"></TD> <TD><IMG SRC="turiganeninjin_3ss16.JPG" BORDER="0"></TD> <TD><IMG SRC="unagitukami_3ss14.JPG" BORDER="0"></TD> </TR> </TABLE> これを表示すると、下のように成ります。 |
|
| もう一つ工夫して下記のようにすれば、文字列を書き加える事が出来ます。 （見やすくするために、行を分け、インデントさせています） <TABLE> <TR> <TD><IMG SRC="hototogisu_TAI_C_3ss06.JPG" BORDER="0"> <BR>タイワンホトトギス（園芸種） </TD> <TD> <IMG SRC="turiganeninjin_3ss16.JPG" BORDER="0"> <BR>ツリガネニンジン </TD> <TD> <IMG SRC="unagitukami_3ss14.JPG" BORDER="0"> <BR>アキノウナギツカミ </TD> </TR> </TABLE> <BR>は改行をさせるためのタグです。 これを表示すると、下のように成ります。 |
|
| また、下記のように、２行にして、文字列を書き込むことも出来ます （見やすくするために、行を分け、インデントさせています） <TABLE> <TR> <TD><IMG SRC="hototogisu_TAI_C_3ss06.JPG" BORDER="0"></TD> <TD><IMG SRC="turiganeninjin_3ss16.JPG" BORDER="0"></TD> <TD><IMG SRC="unagitukami_3ss14.JPG" BORDER="0"></TD> </TR> <TR> <TD>タイワンホトトギス（園芸種）</TD> <TD>ツリガネニンジン</TD> <TD>アキノウナギツカミ</TD> </TR> </TABLE> これを表示すると、下のように成ります。 |
|
| 下記のようにすれば、クリックして大きな画像を表示することが出来ます （見やすくするために、行を分け、インデントさせています） <TABLE> <TR> <TD> <A HREF="hototogisu_TAI_C_s06.JPG" TARGET="_blank"> <IMG SRC="hototogisu_TAI_C_3ss06.JPG" BORDER="0"> </A> </TD> <TD> <A HREF="turiganeninjin_s16.JPG" TARGET="_blank"> <IMG SRC="turiganeninjin_3ss16.JPG" BORDER="0"> </A> </TD> <TD> <A HREF="unagitukami_s12.JPG" TARGET="_blank"> <IMG SRC="unagitukami_3ss14.JPG" BORDER="0"> </A> </TD> </TR> <TR> <TD>タイワンホトトギス（園芸種）</TD> <TD>ツリガネニンジン</TD> <TD>アキノウナギツカミ</TD> </TR> </TABLE> 「１．サムネイル画像（縮小画像）の利用」を参照して下さいね。 これを表示すると、下のように成ります。 |
|
| <TABLE>タグは次のように属性を指定することが出来ます。 <TABLE BGCOLOR="▲" BORDER="▲" ALIGN="▼" WIDTH="▲2" HEIGHT="▲2">
|
| <TD>タグは次のように属性を指定することが出来ます。 <TD WIDTH="▲" HEIGHT="▲" ALIGN="▼" VALIGN="▼">
|
| 応用編 | ||
|
||
| 行数、列数を増やしたり、するだけでなく、セルを結合したり、 表の中に表を入れる（入れ子；ネスト）事によって変化のあるレイアウトをすることが出来ます。 |
| セルを結合
|
|
<TABLE> <TR> <TD ROWSPAN="2">●１</TD><TD>●２</TD> </TR> <TR> <TD>●３</TD> </TR> </TABLE> ROWSPAN="★"は下のセルを結合して、 １つのセルにしています（ここでは、２つのセル）。 |
|
<TABLE> <TR> <TD COLSPAN="2">●１</TD> </TR> <TR> <TD>●２</TD><TD>●３</TD> </TR> </TABLE> COLSPAN=="★"は右のセルを結合して、 １つのセルにしています（ここでは、２つのセル）。 |
|||||||||||||||||||||||||
| ２つを併用して、次のようなレイアウトをしてみました。 |
| <TABLE> <TR> <TD COLSPAN="2" ALIGN="left" VALIGN="top"> <A HREF="C_asagimadara__s01.JPG" TARGET="_blank"> <IMG SRC="C_asagimadara__4ss01.JPG" BORDER="0"> </A> </TD> <TD ROWSPAN="2" ALIGN="right" VALIGN="top"> <A HREF="takasaburou_s01.JPG" TARGET="_blank"> <IMG SRC="takasaburou_4ss01.JPG" BORDER="0"> </A> </TD> </TR> <TR> <TD ROWSPAN="2" ALIGN="left" VALIGN="bottom"> <A HREF="nekohagi_s01.JPG" TARGET="_blank"> <IMG SRC="nekohagi_4ss01.JPG" BORDER="0"> </A> </TD> <TD> </TD> </TR> <TR> <TD COLSPAN="2" ALIGN="right" VALIGN="bottom"> <A HREF="C_hiyodori_s00.JPG" TARGET="_blank"> <IMG SRC="C_hiyodori_4ss00.JPG" BORDER="0"> </A> </TD> </TR> </TABLE> ３行×３列の表を、上下左右のセルを結合して、２行×２列風にしています。 これを表示すると、下のように成ります。 |
|
||||||||
| 表の中に表を入れる（入れ子；ネスト）
|
| 表の中に表を入れ、入れ子（ネスト）状態にもできます。 <TABLE> <TR> <TD COLSPAN="2">●１ <TABLE> <TR> <TD ROWSPAN="2">◆A</TD><TD>◆B</TD> </TR> <TR> <TD>◆C</TD> </TR> </TABLE> </TD> </TR> <TR> <TD>●２</TD><TD>●３</TD> </TR> </TABLE> |
|
||||||||
| おまけ ： サンプル | ||
|
||
| いつも私がブログで使っている雛形（横２枚、横３枚）のソースを下記に掲載しておきます。 使いやすいようでしたら、使って見て下さい。 その他、工夫のしかたで、色々なレイアウトが楽しめると思いますが、 初めのうちは、簡単な物を作って、色々試すのも面白いですよ。 |
| 横に２枚の画像を並べて
|
| <TABLE border="0" cellspacing="5" align="center"> <TR> <TD colspan="2" align="center"> <HR width="80%"> <B>花の名前 科名</B> <HR width="80%"> </TD> </TR> <TR> <TD colspan="2" height="5"></TD> </TR> <TR> <TD>サムネイル画像 １</TD> <TD>サムネイル画像 ２</TD> </TR> <TR> <TD align="center">画像１のコメント</TD> <TD align="center">画像２のコメント</TD> </TR> <TR> <TD colspan="2" height="5"></TD> </TR> <TR> <TD colspan="2" align="center" height="60"> <HR width="80%"> 各画像ともクリックで４８０×３６０のサイズの画像を表示します。 <HR width="80%"> </TD> </TR> </TABLE> 画像サイズの数字は、使用する画像のサイズに書き換えて下さい。 |
| 横に３枚の画像を並べて
|
| <TABLE border="0" cellspacing="5" align="center"> <TR> <TD colspan="3" align="center" height="30" valign="middle"> <HR width="80%"> <B>花の名前 科名</B> <HR width="80%"> </TD> </TR> <TR> <TD colspan="3" height="5"></TD> </TR> <TR> <TD align="center">サムネイル画像 １</TD> <TD align="center">サムネイル画像 ２</TD> <TD align="center">サムネイル画像 ３</TD> </TR> <TR> <TD align="center">画像１のコメント</TD> <TD align="center">画像２のコメント</TD> <TD align="center">画像３のコメント</TD> </TR> <TR> <TD align="center" colspan="3" height="5"></TD> </TR> <TR> <TD colspan="3" align="center"> <HR width="80%"> 各画像ともクリックで４８０×３６０のサイズの画像を表示します。 <HR width="80%"> </TD> </TR> </TABLE> 画像サイズの数字は、使用する画像のサイズに書き換えて下さい。 |
| 注意事項、その他 |
| ★．ここでは、見やすくするために、行を分け、インデントさせていますが、 ウェブリブログに挿入して使う場合は、<TABLE>〜</TABLE> の間は改行せず 一行にして、挿入して下さい。 また、インデント（字下げ）に使用したスペースなども削除して下さい。 文中で改行したいときには<BR>を使って下さい。 ★．ここでは「http://www5e.biglobe.ne.jp/~tanuma/Blog_Photo_2/・・・」の様に ＵＲＬを書き込んで居ませんが、ウェブリブログに挿入して使う場合は、 ＵＲＬも指定して下さい。 ★．ＵＲＬやタグ、画像のファイル名など、半角の英数記号以外は使えません。 また、大文字、小文字も判別しますので、要注意です。 http://www7a.biglobe.ne.jp/~x１/IMG_7767.JPG とすべき所を下記のように書くと http://www7a.biglobe.ne.jp/~x１/Img_7767.JPG （ ファイル名が違う ×） http://www7a.biglobe.ne.jp/~x１/ＩＭＧ＿７７６７．ＪＰＧ （全角文字 ×） ★．この方法は、ホームページ作成、公開の方法の簡略版です。 タグの使用、ホームページ作成、公開については、下記のサイトが詳しいですよ。 「とほほのＷＷＷ入門 （ http://www.tohoho-web.com/www.htm ）」 ★．ホームページ作成ソフトの利用について 今回のこのページの９割（テキストで書かれている部分）はメモ帳よりもやや機能の高いエディターを 使って書いてますが、複雑な表組みをする場合、ホームページ・ビルダーの様な専用ソフトを使い、 そのソースをコピー＆ペーストする方が楽かも知れません。 その場合は、<TABLE>〜</TABLE> の間は改行せず一行にし、 インデント（字下げ）に使用したスペースなどを削除してからペーストして下さい。 「Vector」や「窓の杜」を探すと、ホームページ作成ソフトも色々な物がＵＰされています、 それらを使うことも一考してみて下さい。 ★．画像の縮小について 専用ソフトも有りますが、デジカメの付属ＣＤ等にある閲覧用ソフト等で 出来ると思いますので、確認してみて下さい。 また、オンラインソフトを探すのも良いですね、 無料から有料の物までいろんな物が揃っているようです。 下記の所で探してみて下さい。 Vector http://www.vector.co.jp/ |
今回は、時間不足のため、概要だけになってます。
必要に応じて書き足したいと思ってますので、質問、ご要望等はメールして下さい。
無名子のアドレスは mumeisi@with.biglobe.ne.jp です。
