素人珈琲

< 新しい記事

新着記事一覧(全70件)

過去の記事 >

December 26, 2005

HTML教えます　その８

(3)

テーマ：ホームページ作成の悩み(545)

カテゴリ：ホームページ作成教室

今回はリクエストがございましたので、それに答えたい思います

質問は「画像の下に説明の文字を入れるのは簡単ですが、その画像の横に違う画像とその説明の文字を入れて並べたい場合はどうすればいいのかが分かりません。」との事です。

確かに、画像を横に並べるだけなら簡単なんですが、それに言葉の説明を入れるとなると、ただ並べるだけでは出来ません！

そこで <table> を用いましょう！

簡単な例から参りましょう

HTML

表示

A	B
C	D

ここでの基礎知識としては、 <tr> と <td> タグです。
上の例を見れば何を表しているかわかりますね？
そう！<tr>は 新しい列 を作ります。
そして<td>は 新しいセル を作ります。

次に、表なのに線がないのは何故？ということですが…
正直、この問題が一番ややこしいのです。
エクセルなどの表のように線１つをいれるのになかなか思うように行きません！
っと、これを説明すると今回の質問に答えられなくなるので次の「その９」で説明したいと思います。

ここで、本題に入ります。
質問のように「画像の横に違う画像とその説明の文字を入れて並べたい場合」ですが、<table>を用いれば可能になります。
すなわち、上の例でのAとBに画像をいれ、CとDに言葉を入れればいいのです。

HTML

<table>
<tr><td> <img src="カメの画像"> </td><td> <img src="ウサギの画像"> </td></tr>
<tr><td> これはカメです </td><td> これはウサギです </td></tr>
</table>

表示


これはカメです	これはウサギです

ここで注意なのですが、「HTML」をコピペされる場合は、完全に
<table><tr><td><…と途中の空白を消して並べて下さい。上の例は見やすいようにわざと改行しているのですが、こうすると少し変になる場合がありますので、気をつけてください。

上の例にも少し問題がありますね
１）表の位置が左端なのはバランスが悪い
２）説明文字が左寄せなのがバランスが悪い
３）２×２のセル以外の場合は？

と、いうことで次は２×３のセルで全てのバランスが中央に来るようにしたい思います。

HTML

<center>
<tr><td><img src="カメの画像"></td><td><img src="ウサギの画像"></td>
<td> <img src="ウサギの画像"> </td> </tr>
<tr><td>これはカメです</td><td>これはウサギです</td>
<td> これはウサギですか？ </td> </tr>
</table> </center>

表示


これはカメです	これはウサギです	これはウサギですか？

どうですか？すべてのものが中央に来てバランスがよくなったでしょう？

この全てを中央にするのが <center> タグです。
この<center>と</center>で囲ったものは全て中央に配置されるので、初めて知った方はどんどん使用してみてください

ただし、上の例では表のセルの大きさを指定していないので画像や文字の大きさによって、セルの幅が変化してしまいます。例えば、説明語句（上の例では「これはカメです」）が長い場合は、画像と画像の隙間が大きく出来てしまします。これは１つのセル（箱）が横に広がってしまうせいなのです。
そういうときは、説明の語句を１行にするのではなく、改行して２，３行とすればきれいに収める事が出来ます。

また、セルの大きさの指定につきましても。そのうち「HTML教えます」で紹介したいと思います。

これで、質問の答えになったでしょうか？
もし、これで、何か問題が発生しましたらどんどんコメントお願いします。

「 ２×４の表のテンプレート 」を用意しました

　○○にはアフィリエイトなどのリンクつきテキスト（文字）または、説明文を入れてください

<center><table><tr><td>●●</td><td>●●</td><td>●●</td><td>●●</td></tr><tr><td>○○</td><td>○○</td><td>○○</td><td>○○</td></tr></table></center>

ちなみにこんな感じになります↓