【<table>~</table>】HTMLソースを上手に使いこなそう!その②(広告ソースの並べ方編)

これまでに登場したテーブルタグ、
【<table></table>】HTMLソース(画像とテキストと商品説明:文字の回り込み)を使ったアレンジ

【<table></table>】HTMLソースを上手に使いこなそう!その①(基礎知識編)

に続く、表を使って、商品広告を並べるアレンジをいくつか練習したいと思います。

【商品を3個横に並べて紹介するパターン例】
★★シンプルバージョン★★(商品画像と商品名のみを並べる場合)

サンプル例
Amazon Fireシリーズ Newモデル登場!  
 Fire 7 タブレット
 
 Fire HD 8 タブレット
 
 Fire HD 10 タブレット
 


  ☆☆このテーブルタグがどうなっているのか?テキストと広告ソースを取り除いたものを見てみましょう!☆☆

 サンプルのHTMLソース
<table border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td style="background-color : #dbdbff;" align="center" colspan="3"><b><font SIZE="+1">商品タイトル</td>
</tr>
<tr>
<td align="center" width="180">商品名と画像</td>
<td align="center" width="180">商品名と画像</td>
<td align="center" width="180">商品名と画像</td>
</tr>
</tbody>
</table>

となります。次に、もっと詳しく説明した表にしてみましょう!



★★詳細な商品説明入りバージョン★★

サンプル例
 商品名  Fire 7 タブレット  Fire HD 8 タブレット  Fire HD 10 タブレット
製品  (Newモデル)
 
もっと詳しく見る
(Newモデル)
 
もっと詳しく見る
(Newモデル)
 
もっと詳しく見る
 ストレージ  8/16GB 16/32GB  32/64GB 
ディスプレイサイズ  7インチ  8インチ HD  10.1インチ HD 
解像度  1024 x 600 (171 ppi)  1280 x 800 (189ppi)  1920 x 1200 (224ppi) 
バッテリー  8時間  12時間  10時間 
オーディオ  モノラルスピーカー
マイク 
Dolby Atmos、
デュアルステレオスピーカー
マイク 
Dolby Atmos、
デュアルステレオスピーカー
マイク 



それでは、このテーブルタグがどうなっているのか?テキストと広告ソースを取り除いたものを見てみましょう!

 サンプルのHTMLソース
<table border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td style="background-color : #dbdbff;" align="center" width="150"></td>
<td style="background-color : #dbdbff;" align="center" width="180">商品名</td>
<td style="background-color : #dbdbff;" align="center" width="180">商品名</td>
<td style="background-color : #dbdbff;" align="center" width="180">商品名</td>
</tr>
<tr>
<td align="center" style="background-color : #dbdbff;" width="150">テキスト</td>
<td align="center" width="180">商品画像</td>
<td align="center" width="180">商品画像</td>
<td align="center" width="180">商品画像</td>
</tr>
<tr>
<td align="center" style="background-color : #dbdbff;" width="150">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
</tr>
<tr>
<td align="center" style="background-color : #dbdbff;" width="150">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
</tr>
<tr>
<td align="center" style="background-color : #dbdbff;" width="150">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
</tr>
<tr>
<td align="center" style="background-color : #dbdbff;" width="150">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
</tr>
<tr>
<td align="center" style="background-color : #dbdbff;" width="150">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
<td align="center" width="180">テキスト</td>
</tr>
</tbody>
</table>



※上記の枠の中のHTMLソースをコピペして、ホームページビルダーで確認してみて下さい。

同じような表が、テキスト・広告ソースなしで現れたと思います。

【カスタマイズについて】
テーブルタグの説明(【<table></table>】HTMLソースを上手に使いこなそう!その①(基礎知識編))に入っていなかったHTMLソースがありますのでご紹介しましょう!
これは、文字や背景の色・表の縦横の長さ・文字の位置などを指定したソースになります。

background-color : #dbdbff;" 「background-color 」は背景のこと。「#dbdbff」部分が色の指定になります。お好きな色に変更してお使い下さい。
align="center" 文字の位置を指定しています。
 ・「left」 セル内の文字を左に寄せて表示する。
 ・「center」セル内で真ん中に表示する。
 ・「right」 セル内の右に寄せて表示する。
width="180" セルの幅を指定しています。
・数字の部分を小さくすれば、もっと横幅が短くなり、大きくすると横幅が長くなります。
cellspacing="0" セルの内枠と外枠の間隔の大きさを指定します。
 指定が無い時は、通常2ピクセルの間隔があり、"0"の場合は重なり合います。重なったところは、線が太く見えます。いろいろな数字に置き換えて、変化を確認してみて下さい。
cellpadding="2" ボックス内の余白量を指定します。
colspan="3" colspan=”横につなげるセルの数”と示して、 指定したセルの数分、セルを横につなげます
<b>~</b> <b>~</b>内の文字を太くします。
style スタイルシート(CSS)=Cascading Style Sheet (カスケーディング・スタイルシート)の略を使用していることを表しています。
 HTMLだけでは、ホームページのデザインを細かく指定することができません。CSSを使用することにより、見栄えをよくしたり、細かい指定ができるようになります。自分のイメージ通りのオリジナルデザインを制作することに役立ちます。
<font SIZE="+1"></font> フォント(文字)の大きさを大きくしたり、小さく指定します。
<tr>
<td align="center" style="background-color : #dbdbff;"></td>
<td align="center" width="180"></td>
<td align="center" width="180"></td>
<td align="center" width="180"></td>
</tr>
を1セットにして貼り足していくと、簡単に行がそのまま1行ずつ増えていき、減らせば行が1行ずつ減らして行けます。


テーブルタグの仕組みが分かるようになれば、自分であなたのサイトのイメージ通りに広告を配置・カスタマイズが簡単に行えるようになります。皆さんも、サンプルソースをコピペして、変化を確認してみてくださいね!

次回は、表を使ってテキストタイプの広告を貼る方法をご紹介しましょう!


☆☆FC2 ブログランキングに参加しています。
この記事が役に立った!と思う方は、
上記のバナーをクリックして応援して下さいね!ヾ(o´∀`o)ノ☆☆


関連記事