基本は「表」のタグです。
HINTS For HTML Bigginers/Vol.1


個性の強すぎる壁紙ともっと仲良くなるために、
一番手っ取り早い方法はなんでしょう?
そのキーワードは「表」のタグにあるとpiano piano は考えます。


最近では「スタイルシート」と呼ばれるタグが大流行で、それを使って思うがままのWEBデザインを
自在に楽しむ人が増えました。
ブラウザに依存するところが大きく、印刷物のように「すべての人に同じデザインで見てもらう」ということが不可能なWEBデザインにおいて、スタイルシートはレイアウト崩れを最小限に防いでくれ、作者が意図したとおりのデザインを実現するという点から、まるで救世主のような扱いを受けています。
ですが、このスタイルシート、使いこなすためには まずある程度のHTML知識を身につけておく必要があり、HP制作初心者の方にイキナリ扱いきれるものではありません。
また、スタイルシートはすべてのブラウザで正常に動作するわけではありません。
IEでしか動作しないものが非常に多く、スタイルシートを使って完璧に仕上げたつもりでも、見に来た人がネスケユーザーだったりすると、目も当てられないほどひどいデザイン崩れを起こしているように見えたり、それだけで済めばまだいい方で、ヘタすると灰色の画面が出るだけで文字すらも表示されないことも・・。

そこにもってきて、表のタグならpiano piano が知る限りにおいてすべてのブラウザに対応していますし、
なにより最大の魅力は「初心者の方にとっても身近なタグである」ということです!
普段から使っているタグに、ほんの少しの知識を足しましょう。
そうすれば、あとはアイディア次第でWEBデザインの幅は 想像以上に広がること請け合いです!!^^

このコーナーでは、表のタグの基本と、表を使ったちょっとしたデザインのヒントをいくつかお教えします。
これらのヒントたちを活用して、あなたが壁紙ともっと仲良くなり、もっと自由に楽しんでいただけるようになってくだされば、壁紙屋としてもこんな嬉しいことはないのです^^

*注* 
もっと詳しく勉強したい方や、「これくらいのレベルのことならもう知ってる」という方は、その道の達人に学ぶのが一番です。
ネットにはかなり深い知識を惜しげもなく与えてくれるサイトがたくさんありますので、ぜひ検索してみてくださいね。

 


STEP1: まずは「表」のソースを見てみましょう。


HP作成ソフトの普及のおかげで、タグというものをまともに見た方は
初心者の方には少ないかもしれません。

タグは、なにも書けるほどに覚えなくてもいいと思います。
プロでも最近は、直接自分でHTML(タグ)から起こすという人はほとんどいないそうですし。

でも、最低限おぼろげにでも意味はわかっておいた方が、応用はグンときくようになります。
というわけで、まずは簡単な表と、
それをWEBに表示させるためにどんなタグを使っているのかを見てみましょう。

こんな表を作ってみましょう

ここに本文が入ります

表の基本中の基本、とてもシンプルな表をサンプルとして作ってみました。

この表をWEB上に描き出すために、どんなタグを使っているのかちょっと見てみましょう。

<CENTER><TABLE BORDER=1 CELLPADDING=10 WIDTH=600 bgcolor=D7B4CA>

<TR>

<TD>

<P><CENTER><B><FONT SIZE="+1" COLOR="#553D59">こんな表を作ってみましょう</FONT></B></CENTER>

</TD></TR>

<TR>

<TD bgcolor=FFF3FF>

<P>ここに本文が入ります

</TD></TR>

</TABLE></CENTER>

 

難しそうに見えますか? 実はそうでもないんです。

順を追って解説していきますと、
タグは
<CENTER> で始まり</CENTER> で終わっていますね。
これは「このタグでくくってある部分(つまりここでは表そのものです)をページの中央に持ってきなさい」と
この表の位置を指定しています。
このタグの代わりに <P ALIGN=RIGHT>と指定すると、その表はにそのページの右端に寄ります。
その際は </CENTER> の代わりに </P> と必ずくくってやる必要があります。
なんの指定もせずにいれば、表はページ左端に寄ります。

次のタグで、表を規定します。
<TABLE BORDER=1 CELLPADDING=10 WIDTH=600 bgcolor=D7B4CA>
これにより、この表は「罫線幅1ピクセル、表の枠とテキスト(文字)の間隔を10ピクセル、表全体の幅を600ピクセル、表の背景色はD7B4CA」と規定されました。
罫線枠を出ないようにするためには、"TABLE BORDER=0" としてやればOKです。
枠とテキストの間隔、表の幅はお好きな数値を入力してくださいね^^

2行目に移って、<TR>〜</TR> は表行タグです。これをいくつ作るかによって表の行数が決まります。

3行目の<TD>〜</TD>は表のセル(1マス)です。
前述の<TR>〜</TR>の間にこれがいくつ入るかで、その表の列数が決まります。
このタグを使ってセルごとに様々なことを規定してやることができます。
<TD bgcolor=D7B4CA> と入力すればそれは「このセルの背景色はこの色」と指定することができ、
見出しと本文の背景色を変えたい時などに使うといいでしょう。

4行目で、セル内の文字の位置揃えを左右中央に指定した上で、フォントタグで文字の大きさと色を指定します。

 

表に関するタグはこれが全てというわけではありませんが、
このコーナーの趣旨はHTML完全マスター講座ではなく(そんなおこがましいことができるほどの知識もないです^^;)「壁紙を使いこなすヒント」ですので、これだけマスターしておけば用は足ります。

さて、上記でピンときた方もいらっしゃることでしょう。

表にだけ背景色をつけてやれば、直接 文字を載せることのできない壁紙を使っていても
文字を書くことができるのです!

実際の使用例はこちらです。

では次のステップで、表を利用して壁紙を効果的に使う方法もお教えしましょう^^

 

ブラウザの「戻る」で戻ってくださいね^^