通販ショップを始めよう。現役店長が教える開業運営きほんのきほん
ホーム > ヤフーショッピング作成講座 2016 > HTML入門(その4)~TABLE~

HTML入門(その4)~TABLE~

HTML入門

HTML入門3回目です。これまでは、「文字をどうこうする」といった簡単なものでしたが、今回は、レイアウトに関わるタグの使い方を紹介します。

今回のメインディッシュは<TABLE>タグだけです。これをマスターすれば、レイアウトは自由自在になります。これまでのタグより、ちょっとむずかしいかもしれませんが、しっかり理解してください。

人気おすすめ無料講座
youtube-logo yahoo! shopping 画像挿入や文字のHTML変換
youtube-logo スマートフォン用サイトの看板やフリースペースの編集
youtube-logo ヤフーストアの看板画像を作る方法
youtube-logo サイドナビを画像に変更する方法
youtube-logo ストアサービスのリンクをボタン画像に変更する方法

このページのメニュー

※ネットショプ成功事例無料パンフレット配布中


<TABLE> レイアウトする

<TABLE>タグを使うといろいろなレイアウトができます。テーブルと読みますが、このタグは「表」を作る目的のタグです。本来は下の画像のような表をつくるためのものです。これをレイアウトに応用したものです。

表

このように表で枠を組んで、好きなところに文字や画像を配置することができます。この表では、横に5つ、縦に4つの枠が並んでいます。

TABLEのルールの理解

では、この表はどのようなタグになるか書いてみましょう。

<table>
<tr><td>(1)</td><td>(2)</td><td>(3)</td></tr>

<tr><td>(1)</td><td>(2)</td><td>(3)</td></tr>
<tr><td>(1)</td><td>(2)</td><td>(3)</td></tr>
</table>

わけがわからないと思いますが、じっくり見て書き方のルールを理解してください。
<table>タグは<tr>と<td>の3つのセットで使います。<td>~</td>が1つの枠です。そして、横に並べる場合<td>のセットを<tr>~</tr>ではさみます。 画像で示すと下のようなイメージです。

table3

横の<tr>~</tr>の中にはいる<td>は同じである必要があります。一番上は3つ、真ん中は2つ、一番下は1つといった組み方はNGです。

組み方 横をつなげる

でも、一番上に横長のバナーを配置して、その下に小さいのを3つ並べたいというときに、困ります。そんな時は<td>をつなぎます。「colspan(コルスパン)」というプロパティーを使います。

table2

このようなレイアウトにしたい場合は、一番上は<td>が3つなので<td>~</td>のセットが1つではダメなので、「本当は3つあるけど、全部くっつけてます。」という言い訳を書いておく必要があります。

【書き方】
<table>
<tr><td colspan="3">(1)</td></tr>
<tr><td>(1)</td><td>(2)</td><td>(3)</td></tr>
<tr><td>(1)</td><td>(2)</td><td>(3)</td></tr>
</table>


これで理屈上、横には3つずつ<td></td>が並ぶことになるのでOKということです。

組み方 縦をつなげる

今度は、縦に<td></td>をつなげてみます。使うプロパティーは「rawspan(ロースパン)」です。

table3

【書き方】
<table>
<tr><td colspan="3">(1)</td></tr>
<tr><td rawspan="2">(1)</td><td>(2)</td><td>(3)</td></tr>
<tr><td>(2)</td><td>(3)</td></tr>
</table>


3段目には<td></td>が2つしかありませんが、2段目でくっつけていることを宣言しているので省略されています。

いっきに難しくなったと思いますが、大切なのは仕組みの理解です。全部覚えて手で打てるようになる必要はありません。

これまでのTABLEの書き方だと、実は、次のような表示のされ方になってしまいます。TABLEは、もともとは「表」を作るのが目的なので「枠」が表示されてしまうのです。レイアウトに使うのに、いちいち枠が表示さてれしまうと、お店ページはごちゃごちゃになってしまいます。そこで、この枠を消します。

table4

【書き方】
<table border="0">

border="0"を入れることで枠(ボーダー)を消すことができます。

table5

スペースを入れる

TABLEの各枠内「あいおうえおかきくけ」と入力しました。この枠ひとつひとつをセルと言います。エクセルと同じです。エクセルでも縦横のセルを繋げたりするのと同じしくみです。下の画像では、各ひらがなが、狭いスペースにギュウギュウに詰まっています。もっと広々と住まわせて上げることができます。

table4

【書き方】
<table cellpadding="10">あ</td>

cellpaddingというプロパティーを使います。これは、<table>タグに入れます。Aのセルは広く、Bのセルは狭く、ということはできません。全室共通して広げないといけません。

table6

セルとセルの間のスペース

今度は、セルとセルの間のスペースを開けます。この方法はバナーを配置するときによく使いいます。使うプロパティーは「cellspacing」です。セル間にスペースを作ることで、別々のバナーがぴったりくっつくことを避けて、見やすいレイアウトにすることができます。

table7

【書き方例】
<table cellspacing="10">あ</td>

cellpaddingと同じように<table>タグ内に書きます。

table8

TABLEのサイズの変更

さて、最終はTABLEのサイズです。ご存知のように、パソコン画面場は小さな点の集まりです。どんな文字、写真、そして、動画でも最小単位は点(ドット)です。点を10個並べると10px(ピクセル)です。これまで出てきた「cellspacing="10"」の「10」は「10px」のことです。pxは省略されています。下記の画像はひらがなの「い」を拡大したものです。最小単位は点になっています。

最小単位はドット

TABLEを扱うには、実は、足し算引き算ができないといけません。もちろん、皆さん小学校は出ていると思うので、できると思います。ヤフーストアでは、ページの幅をいろいろ変えることができますが、当サイトでは幅950として話を進めます。いきなり実践的になりましたがw

レイアウト

これが出店したてのヤフーストアの初期の状態です。初期状態のことをよくデフォルトというので、この言葉も覚えておいてください。

そして、バナーを貼ったり、いろんな文字を書けるフリースペースは上の画像の「740px」の中に書くことになります。幅の制限は740ピクセルということになります。この中に、900pxか1000pxのバナーを持ってきたりすると、レイアウトが崩れて見づらくなります。

さて、TABLEのサイズをしてするプロパティーは「width(ウィドス)」です。

【書き方】
<table width="740">~</table>
これが、トップページなどを作る基本形となりますので頭に入れておいてください。なお、縦に関しては制限はありませんが、ページを開いたときに、 一瞬で表示できる大きさを最大と考えてください。ただし、通常は、指定することはありません。

まとめ

いかがでしたでしょうか。かなりのボリューム難しく感じたと思います。とにかく、「TABLEタグはどのようなもので、どような使い方をするのか。」など仕組みの理解が大切です。自社サイトを作ろうと思えば、今回のようなページを最低でも100ページはマスターしないと行いないんですから、ほとんど小学生レベルです。

実際の制作の現場ではソフトを使って、もっと簡単に作っていくので、細かいことは忘れても構いません。その都度確認すれば良いのです。 最近は、ペンで文字を書くことが減りましたが、実際ペンで書こうと思うと感じを忘れています。その都度調べながら書くのと同じです。

開業予定者にオススメ

ショップサーブ資料請求

↑ PAGE TOP