motherleaf1001さん
＞思わず、今日の日記に HANMANI様のブログの紹介をのせてみました！
こちらこそ、わざわざありがとうございます＾＾
これからも質問があれば、私の答えられる範囲でどんどん答えていきますので、よろしくお願いします
(December 27, 2005 12:25:48 AM)
＞思わず、今日の日記に HANMANI様のブログの紹介をのせてみました！
こちらこそ、わざわざありがとうございます＾＾
これからも質問があれば、私の答えられる範囲でどんどん答えていきますので、よろしくお願いします
(December 27, 2005 12:25:48 AM)
December 26, 2005
テーマ： ホームページ作成の悩み(550)
カテゴリ： ホームページ作成教室
今回はリクエストがございましたので、それに答えたい思います
質問は「 画像の下に説明の文字を入れるのは簡単ですが、その画像の横に違う画像とその説明の文字を入れて並べたい場合はどうすればいいのかが分かりません。 」との事です。
確かに、画像を横に並べるだけなら簡単なんですが、それに言葉の説明を入れるとなると、ただ並べるだけでは出来ません！
そこで <table> を用いましょう！
簡単な例から参りましょう
ここでの基礎知識としては、 <tr> と <td>
上の例を見れば何を表しているかわかりますね？
そう！<tr>は 新しい列 を作ります。
そして<td>は 新しいセル を作ります。
次に、表なのに線がないのは何故？ということですが…
正直、この問題が一番ややこしいのです。
エクセルなどの表のように線１つをいれるのになかなか思うように行きません！
っと、これを説明すると今回の質問に答えられなくなるので次の「その９」で説明したいと思います。
ここで、本題に入ります。
質問のように「画像の横に違う画像とその説明の文字を入れて並べたい場合」ですが、<table>を用いれば可能になります。
ここで注意なのですが、「HTML」をコピペされる場合は、完全に
<table><tr><td><…と途中の空白を消して並べて下さい。上の例は見やすいようにわざと改行しているのですが、こうすると少し変になる場合がありますので、気をつけてください。
上の例にも少し問題がありますね
１）表の位置が左端なのはバランスが悪い
２）説明文字が左寄せなのがバランスが悪い
と、いうことで次は ２×３ のセルで全てのバランスが 中央 に来るようにしたい思います。
どうですか？すべてのものが中央に来てバランスがよくなったでしょう？
この全てを中央にするのが <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>
ちなみにこんな感じになります↓
長くなりましたが、今回の質問タイムは以上です
質問は「 画像の下に説明の文字を入れるのは簡単ですが、その画像の横に違う画像とその説明の文字を入れて並べたい場合はどうすればいいのかが分かりません。 」との事です。
確かに、画像を横に並べるだけなら簡単なんですが、それに言葉の説明を入れるとなると、ただ並べるだけでは出来ません！
そこで <table> を用いましょう！
簡単な例から参りましょう
HTML
<table>
<tr> <td>A</td><td>B</td> </tr>
<tr> <td>A</td><td>B</td> </tr>
</table>
<tr> <td>A</td><td>B</td> </tr>
<tr> <td>A</td><td>B</td> </tr>
</table>
表示
| A | B |
|---|---|
| C | D |
ここでの基礎知識としては、 <tr> と <td>
上の例を見れば何を表しているかわかりますね？
そう！<tr>は 新しい列 を作ります。
そして<td>は 新しいセル を作ります。
次に、表なのに線がないのは何故？ということですが…
正直、この問題が一番ややこしいのです。
エクセルなどの表のように線１つをいれるのになかなか思うように行きません！
っと、これを説明すると今回の質問に答えられなくなるので次の「その９」で説明したいと思います。
ここで、本題に入ります。
質問のように「画像の横に違う画像とその説明の文字を入れて並べたい場合」ですが、<table>を用いれば可能になります。
HTML
<table>
<tr><td> <img src="カメの画像"> </td><td> <img src="ウサギの画像"> </td></tr>
<tr><td> これはカメです </td><td> これはウサギです </td></tr>
</table>
<tr><td> <img src="カメの画像"> </td><td> <img src="ウサギの画像"> </td></tr>
<tr><td> これはカメです </td><td> これはウサギです </td></tr>
</table>
表示
 |
 |
|---|---|
| これはカメです | これはウサギです |
ここで注意なのですが、「HTML」をコピペされる場合は、完全に
<table><tr><td><…と途中の空白を消して並べて下さい。上の例は見やすいようにわざと改行しているのですが、こうすると少し変になる場合がありますので、気をつけてください。
上の例にも少し問題がありますね
１）表の位置が左端なのはバランスが悪い
２）説明文字が左寄せなのがバランスが悪い
と、いうことで次は ２×３ のセルで全てのバランスが 中央 に来るようにしたい思います。
HTML
<center>
<table>
<tr><td><img src="カメの画像"></td><td><img src="ウサギの画像"></td>
<td> <img src="ウサギの画像"> </td> </tr>
<tr><td>これはカメです</td><td>これはウサギです</td>
<td> これはウサギですか？ </td> </tr>
</table> </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>
ちなみにこんな感じになります↓
| ●● | ●● | ●● | ●● |
| ○○ | ○○ | ○○ | ○○ |
長くなりましたが、今回の質問タイムは以上です
お気に入りの記事を「いいね！」で応援しよう
[ホームページ作成教室] カテゴリの最新記事
-
HTML教えます その36 February 12, 2006 コメント(6)
-
HTML教えます その35 February 10, 2006
-
HTML教えます その34 February 7, 2006 コメント(1)
とっても嬉しいです！！
早速、取り上げていただいてありがとうございます！！まだ、このブログの途中のようですのでチョクチョク来ます。すっごく分かりやすくて助かります！！
(December 26, 2005 03:32:16 PM)
何度もすみません。
アフィリのテンプレまでのせていただきありがとうございました！ゆっくり時間があるときに、挑戦してみたいと思います。思わず、今日の日記に HANMANI様のブログの紹介をのせてみました！
(December 26, 2005 10:45:35 PM)
Re:何度もすみません。(12/26)
HANMANI
さん
【毎日開催】
15記事にいいね！で1ポイント
PR
Freepage List
HANMANI
あくまでも趣味の範囲で、お家で美味しい珈琲を飲もうと頑張る人を応援するブログサイトです。
Category
