眠　れ　る　森

【５】画像と文字を横に並べて均等に割り付け

画像に対するキャプションのようなイメージで、画像ごとに、その上下に文字を配置して、かつそれを並べたい...。そんなご要望は結構あるんじゃないかと思いますので、ここに方法を記載します。

【４】までは、文字と画像を扱うHTMLタグだけで何とかなったのですが、ここでやろうとしていることは、新たに「表組み」を行うためのHTMLタグを導入しないと実現できません。
その「表組み」を書くためのHTMLタグというのは<TABLE>(テーブル)タグと呼ばれるものです。

●１●単純に並べる

---

[春] 春はあけぼの

[夏] 夏は夜

[秋] 秋は夕暮れ

---

【参考】
一見、これのどこが「表組み」なのか分からないと思いますが、実は見えないだけで線が引いてあります。線を可視化すると以下のようになり、上記のものも実は「１×３の表」であることが分かります。

[春] 春はあけぼの

[夏] 夏は夜

[秋] 秋は夕暮れ

---

●１●書き方

---

<TABLE>
<TR ALIGN=CENTER>
<TD> [春]<BR><IMG SRC=sample03>
  <BR>春はあけぼの </TD>
<TD> [夏]<BR><IMG SRC=sample03>
  <BR>夏は夜 </TD>
<TD> [秋]<BR><IMG SRC=sample03>
  <BR>秋は夕暮れ </TD>
</TR>
</TABLE>

---

■基本説明
・ <TABLE> ：「表組み」開始の宣言。必ず最後に </TABLE> がある。
・ <TR> ：「行」開始の宣言。必ず最後に </TR> がある。
・ <TD> ：「列(マス目)」開始の宣言。必ず最後に </TD> がある。

分かりやすく（？）書くと以下になります。
<TABLE> ←外枠の開始
　　　  <TR> ←１行目の開始
　　　　   <TD> １マス目(春) </TD>
　　　　   <TD> ２マス目(夏) </TD>
　　　　   <TD> ３マス目(秋) </TD>
　　　  </TR> ←1行目の終了
</TABLE> ←外枠の終了

上記の表は前述の通り、１行×３マスの構成ですが、お分かりの通り、表組み自体を２行×３マスの構成にしたければ、上記の<TR>から</TR>をもう１パターン増やせばいいということになります。
同様に、１行×５マスの構成にしたければ、ご想像の通り、上記の<TD>？マス目</TD>を増やせば良いということになります。

これが基本構造です。

２行目に、「 <TR ALIGN=CENTER> 」という部分がありますが、これにより、この行の「マス目内」を“中央揃えにする”という処理をさせています。

しかしながらセンタリングを行ってしまうと、画像の高さが異なる場合や、画像下の文章の長さによって、全体の縦位置がまちまちになるのが気に入らない、といった場合( ※１ )もあるかもしれません。
また、画像下の文章が２行にまたがった場合、２行目が中途半端にセンタリングされてしまうのは嫌だから、画像下の文章は左寄せがいい、といった場合( ※２ )にもこれでは理想系にはなりません。

【例】

---

[春] 春はあけぼの。 だね！

[夏] 夏は夜。月のころはさらなり、

[秋] 秋は夕暮れ。夕日のさして山の端いと…

---

●２●縦位置をそろえる(※１のその１)

---

[春] 春はあけぼの。 だね！

[夏] 夏は夜。月のころはさらなり、

[秋] 秋は夕暮れ。夕日のさして山の端いと…

---

●２●書き方

---

<TABLE>
 <TR ALIGN=CENTER VALIGN=TOP >
  <TD>[春]<BR><IMG SRC=sample03>
  <BR>春はあけぼの…</TD>
  <TD>[夏]<BR><IMG SRC=sample03>
  <BR>夏は夜…</TD>
  <TD>[秋]<BR><IMG SRC=sample03>
  <BR>秋は夕暮れ…</TD>
 </TR>
</TABLE>

---

２行目に、新たに「 VALIGN=TOP 」という部分が追加されました。これにより、この行の「マス目内」の縦位置を全て“上揃えにする”という処理をさせています。
確かに開始位置は上揃えになりましたが、画像の高さが異なるため、画像下の文章の開始位置はまちまちになってしまったままですね。この修正は●３●で行います。

---

●３●縦位置をそろえる(※１のその２)

---

[春]	[夏]	[秋]
春はあけぼの。 だね！	夏は夜。月のころはさらなり、	秋は夕暮れ。夕日のさして山の端いと…

---

【参考】

[春]	[夏]	[秋]
春はあけぼの。 だね！	夏は夜。月のころはさらなり、	秋は夕暮れ。夕日のさして山の端いと…

---

●３●書き方

---

<TABLE>
 <TR ALIGN=CENTER VALIGN=TOP>
  <TD>[春]<BR><IMG SRC=sample03></TD>
  <TD>[夏]<BR><IMG SRC=sample03></TD>
  <TD>[秋]<BR><IMG SRC=sample03></TD>
 </TR>
 < TR ALIGN=CENTER VALIGN=TOP >
  <TD>春はあけぼの…</TD>
  <TD>夏は夜…</TD>
  <TD>秋は夕暮れ…</TD>
 </TR>
</TABLE>

---

今回から、表組み自体が「２行×３マス」の構成（左参照）になりました。ずいぶんと「表組み」であることが分かりやすくなりました。
具体的には、画像下の文章部分を新たに「別の行（<TR>～</TR>）」として独立させました。
これで、画像も画像下の文書も開始位置は上揃えになりすっきりしました。（好みの問題ですが。）後はセンタリングされてしまうところを直せば良いということになります。この修正は●４●で行います。

---

●４●文章を左揃えにする(※２)

---

[春]	[夏]	[秋]
春はあけぼの。 だね！	夏は夜。月のころはさらなり、	秋は夕暮れ。夕日のさして山の端いと…

---

●４●書き方

---

<TABLE>
 <TR ALIGN=CENTER VALIGN=TOP>
  <TD>[春]<BR><IMG SRC=sample03></TD>
  <TD>[夏]<BR><IMG SRC=sample03></TD>
  <TD>[秋]<BR><IMG SRC=sample03></TD>
 </TR>
 <TR ALIGN=LEFT VALIGN=TOP>
  <TD>春はあけぼの…</TD>
  <TD>夏は夜…</TD>
  <TD>秋は夕暮れ…</TD>
 </TR>
</TABLE>

---

「２行×３マス」の表組みの２行目を開始する宣言である<TR>の中に「 ALIGN=LEFT 」と入ったのが分かると思います。
これで、２行目の「各マス」は全て左寄せになります。

---

●５●注意点

---

楽天広場の日記スペースでは「編集上の改行（PCのEnter Key）」に関して「変な処理」をしてしまいますので、ここでサンプルとしてあげているものに関しては「編集上の改行」を取り除いて（長～い、1行としてつなげて）書き込まないと変な間があいた状態になってしまいますのでご注意ください。

その他、TABLEに関しての注意点としては、 「幅を決める癖をつけましょう」 ということです。
幅を決めないと、表が中に入る文章などによってだらしなく間延びしてしまう可能性が高いです。
【例】（分かりやすくするために、表に「線」を入れています。）

[春]	[夏]	[秋]
春はあけぼの。だね！	夏は夜。月のころはさらなり、	秋は夕暮れ。夕日のさして山の端いと…

こんな感じです。 文章の長さに依存して「マス」が伸びてしまっています。これは「許す限り」伸びます。具体的には、ウィンドウの幅、または、楽天広場の日記のスペースなどのような、あらかじめ決められている幅などに依存します。
これを発生させないために、各マス目に対して「 自分で絶対的な幅を決める指示 」を設定しておきます。

「各マス目」ということで、お分かりの通り「 <TD> 」に対して設定する指示です。

具体的には、<TD>の中に、「 WIDTH="100" 」などと書けばOKです。

---

■いったん、おさらいの基本説明

・ <TABLE> ：	「表組み」開始の宣言。必ず最後に </TABLE> がある。
・ <TR> ：	「行」開始の宣言。必ず最後に </TR> がある。
・ <TD> ：	「列(マス目)」開始の宣言。必ず最後に </TD> がある。

---

・ ALIGN=… ：	左寄せ(= LEFT )、中央揃え(= CENTER )、右寄せ(= RIGHT )。
*	<TABLE> の宣言内に書けば、その表組み全体共通に、 <TR> の宣言内に書けば、その行の全てのマスに、 <TD> の宣言内に書けば、そのマスに対して有効となります。
・ VALIGN=… ：	上詰め(= TOP )、中央揃え(= MIDDLE )、下詰め(= BOTTOM )。
*	<TABLE> の宣言内に書けば、その表組み全体共通に、 <TR> の宣言内に書けば、その行の全てのマスに、 <TD> の宣言内に書けば、そのマスに対して有効となります。
・ WIDTH=… ：	「幅」(= 数字 )の指定。
*	<TABLE> の宣言内に書けば、その表組み全体の横幅、 <TR> の宣言内に書けば、その行の横幅、 <TD> の宣言内に書けば、そのマスの横幅として有効となります。
*	※ただし、「幅」は各マス目の足し上げたものになるし、１行目と２行目の幅を違えて指定しても、当然広い方に合せた表組みとなります。

「画像」のように幅が絶対的に決まっているものは気にしなくてもいいのですが、文章のように「可変長」だと、どこかで決めてあげないとだらしない表組みになりますのでご注意ください。
ちなみに、上記までの例では、画像の幅(100pixel)に合せて、各マス目( <TD> )の幅を指定( WIDTH=100 )しています。（画像の幅よりも短く指定しても、「広い方に合せる」ことになるので意味はない。）

---

【<TD>の幅に150を指定した例】（分かりやすくするために、表に「線」を入れています。）※画像=100pixel、TDの幅=150pixel

[春]	[夏]	[秋]
春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。	夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。	秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。

---

【<TD>の幅を指定しなかった例】（分かりやすくするために、表に「線」を入れています。）

[春]	[夏]	[秋]
春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。	夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。	秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。

---

質問はこちら からどうぞ