■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】 Since2001/11/23
Code006: 続・HTMLとは何か！(前編)
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Produced by ichikoro.com
▼毎週月曜日配信です。
▼等幅フォントでご覧いただくとキレイに見えます。
▼登録・解除はこちらから可能です。
< http://www.ichikoro.com/webp/ >
※バックナンバーへのリンクもあります。
※お友達にもぜひお勧めください(^^)/
─【Contents】───────────────────────────────
1. What's this? .................. このメルマガについて
2. Sample01 ...................... テーブル：TABLEタグ
3. Sample02 ...................... テーブル：TABLEタグの属性
border, width(height),
cellpadding, cellspacing
4. Sample03 ...................... テーブル：TABLEタグの属性
bgolor,bordercolor,
background
5. Sample04 ...................... テーブル：TR,TDタグの属性 align, valign
6. Sample05 ...................... テーブル：TR,TDタグの属性 width, height
7. Sample06 ...................... テーブル：TDタグの属性 rowspan, colspan
8. Sample07 ...................... テーブル：実際に作るには
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1.What's this? 「このメルマガについて」
──────────────────────────────────────
みなさんこんにちは。
編集者のかつべです。
このメルマガは、Webに関係するプログラム(マークアップ)言語について、サンプル
をメインに解説していこうというものです。各言語の基本的な概念などについては、
別途書籍やWebサイトでお調べください。
※気が向いた時や、リクエストがあった時はするかもしれません(^^;
【 重要!! 】
『このメルマガでは,各言語の概念や最初のSTEPの説明はありません』
また、「こんなこと取り上げて！」というリクエストは随時受け付けております。
お気軽にメールをください(^ ^)/
こちらまでどうぞ
< mm-webp@ichikoro.com >
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
2.sample01 「テーブル： TABLEタグ」
──────────────────────────────────────
テーブルとは、その本来の意味通り表(テーブル)を作成するものです。
Excelのような表を、ページの中に埋め込めます。
※もちろん計算はできません(^^;
<HTML>
<HEAD>
<TITLE> テーブルを使おう！ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3">
<TR>
<TD>あ</TD>
<TD>い</TD>
<TD>う</TD>
<TD>え</TD>
<TD>お</TD>
</TR>
<TR>
<TD>か</TD>
<TD>き</TD>
<TD>く</TD>
<TD>け</TD>
<TD>こ</TD>
</TR>
<TR>
<TD>さ</TD>
<TD>し</TD>
<TD>す</TD>
<TD>せ</TD>
<TD>そ</TD>
</TR>
</TABLE>
</BODY>
</HTML>
大体察しがつかれたと思いますが、<TR>〜</TR> が一行になり、
その間に<TD>〜</TD>を記述すことで列を作成できます。
【 重要!! 】
『 TRタグ ← 行 』
『 TDタグ ← 列 』
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
3.sample02 「テーブル： TABLEタグの属性 border, width(height),
cellpadding, cellspacing」
──────────────────────────────────────
TABLEタグには知っておかないといけない属性がいくつかあります。
<HTML>
<HEAD>
<TITLE> テーブルを使いこなそう </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<P align="center">
恋人がいないとつらいシーズンになってきました。<BR>
<BR>
<TABLE border="3" width="80%" height="80%">
<TR>
<TD>01/12/24</TD>
<TD>クリスマス</TD>
</TR>
<TR>
<TD>02/01/01</TD>
<TD>初詣</TD>
</TR>
<TR>
<TD>バレンタイン</TD>
<TD>02/02/14</TD>
</TR>
</TABLE>
<BR>
一人身にはこたえまさぁ(泣)
</P>
</BODY>
</HTML>
ウィンドウを広げたり、縮めたりしてください。
すると.....。
・border ........... 周りの枠の太さを指定できます。
0 にすると周りの枠が表示されなくなります。
・width,height ..... 横幅(width)と高さ(height)を指定します。
width="128"とすると、横幅が128ピクセルと解釈されます。
width="50%"とすると、パーセントでの指定もできます。
※コピペするなって？(^^;
次のサンプルです。
これもウィンドウを広げたり、縮めたりしてください。
<HTML>
<HEAD>
<TITLE> ウィンドウによっては折り返しちゃうんだよね </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
ああああああああああああああああああああああああああああ<BR>
いいいいいいいいいいいいいいいいいいいいいいいいいいいい<BR>
うううううううううううううううううううううううううううう<BR>
ええええええええええええええええええええええええええええ<BR>
おおおおおおおおおおおおおおおおおおおおおおおおおおおお
</BODY>
</HTML>
お分かりの通りウィンドウの幅によって改行される部分が変わります。
文章によってはこれでは困ったことになる時があります。そんな時は、
<HTML>
<HEAD>
<TITLE> 折り返えさないぞ！ </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="0" width="500">
<TR>
<TD>
ああああああああああああああああああああああああああああ<BR>
いいいいいいいいいいいいいいいいいいいいいいいいいいいい<BR>
うううううううううううううううううううううううううううう<BR>
ええええええええええええええええええええええええええええ<BR>
おおおおおおおおおおおおおおおおおおおおおおおおおおおお
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
とすると、500ピクセル以下にウィンドウを縮めた場合でも勝手に改行されなく
なります。
このようなことから、テーブルはデザインを組むのによく使用されます。
あまり好ましいことではありませんが(^^;
他にも
・cellpadding ...... 枠線とセル(中身)の間にあるスペースの大きさを調節
できます。これはピクセル単位での指定になります。
・cellspacing ...... 枠線の内側の大きさを調節します。
ピクセル単位での指定になります。
などがあります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
4.sample03 「テーブル： TABLEタグの属性 bgolor,bordercolor,background」
──────────────────────────────────────
テーブルを、もっと華やかにしてみましょう。
■背景色をつける
<HTML>
<HEAD>
<TITLE> 背景色を設定する </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3" width="500" bgcolor="#FFFF99">
<TR>
<TD>名前</TD>
<TD>かつべ</TD>
</TR>
<TR>
<TD>年齢</TD>
<TD>（‾□‾；）！！</TD>
</TR>
</TABLE>
</BODY>
</HTML>
■枠線に色をつける
<HTML>
<HEAD>
<TITLE> 枠線の色を設定する </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3" width="500" bordercolor="#FFFF99">
<TR>
<TD>名前</TD>
<TD>かつべ</TD>
</TR>
<TR>
<TD>年齢</TD>
<TD>（‾□‾；）！！</TD>
</TR>
</TABLE>
</BODY>
</HTML>
■テーブルの背景に画像を
<HTML>
<HEAD>
<TITLE> 背景画像をつける </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3" width="500" background="sample.jpg">
<TR>
<TD>名前</TD>
<TD>かつべ</TD>
</TR>
<TR>
<TD>年齢</TD>
<TD>（‾□‾；）！！</TD>
</TR>
</TABLE>
</BODY>
</HTML>
・bgcolor .......... テーブルの背景色を設定します。
・bordercolor ...... 枠線に色をつけることができます。
・background ....... BODYタグのbackground属性と同じく、背景の画像を
設定できます。
ご使用は計画的に(^^;
使いすぎると、うっとうしくなっちゃいます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
5.sample04 「テーブル： TR,TDタグの属性 align, valign」
──────────────────────────────────────
TABLEタグの属性は、テーブル全体に対して指定する物でした。
今度は行単位、セル単位での指定方法をご紹介します。
<HTML>
<HEAD>
<TITLE> 行ぞろえ 横</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3" width="500">
<TR align="center">
<TD>名前</TD>
<TD>かつべ</TD>
</TR>
<TR>
<TD align="right">年齢</TD>
<TD align="left">（‾□‾；）！！</TD>
</TR>
</TABLE>
</BODY>
</HTML>
・align ..... 横方向の行ぞろえを指定できます。
TRだと行全体に。TDだとそのセルだけに反映されます。
値として以下の物が使えます。
center ： 真ん中に寄せる。
right ： 右寄せします。
left ： 左寄せします。
横方向だけではなく、縦方向にも指定できます。
<HTML>
<HEAD>
<TITLE> 行ぞろえ 今度は縦</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3" width="500" height="100">
<TR valign="top">
<TD>名前</TD>
<TD>かつべ</TD>
</TR>
<TR>
<TD valign="bottom">年齢</TD>
<TD valign="top">（‾□‾；）！！</TD>
</TR>
</TABLE>
</BODY>
</HTML>
・valign ..... 縦方向の行ぞろえを指定できます。
TRだと行全体に。TDだとそのセルだけに反映されます。
値として以下の物が使えます。
top ：上に寄せます。
middle ：真ん中に寄せます。
bottom ：下に寄せます。
alignと値が違います。そこだけ注意すればOKです。
これらを一緒に使うことも、もちろん可能です。
<HTML>
<HEAD>
<TITLE> 行ぞろえ あわせ技 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3" width="500" height="100">
<TR align=left"" valign="top">
<TD>名前</TD>
<TD>かつべ</TD>
</TR>
<TR>
<TD align="center" valign="bottom">
年齢
</TD>
<TD align="right" valign="top">
（‾□‾；）！！
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
他にも指定できる値はいくつかありますが、上記に示したものを使うのが
安全だと思います。
ここまでは、簡単ですよね(^-^)/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6.sample05 「テーブル： TR,TDタグの属性 width, height」
──────────────────────────────────────
さぁ今度はTABLEタグでも出てきた横幅と高さの指定です。
まずは、何も指定しないパターンです。
<HTML>
<HEAD>
<TITLE> 幅の調整 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE bordercolor="Blue" border="1">
<TR>
<TD>名前</TD>
<TD>かつべ</TD>
</TR>
<TR>
<TD>年齢</TD>
<TD>（‾□‾；）！！</TD>
</TR>
</TABLE>
</BODY>
</HTML>
この時、ブラウザは行または列の要素の中で一番大きな物に、自動的にそろえて
くれます。
今度はテーブルに大きさをつけてみましょう。
<HTML>
<HEAD>
<TITLE> 幅の調整 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE width="500" height="300" bordercolor="Blue" border="1">
<TR>
<TD>名前</TD>
<TD>かつべ</TD>
</TR>
<TR>
<TD>年齢</TD>
<TD>（‾□‾；）！！</TD>
</TR>
</TABLE>
</BODY>
</HTML>
テーブル全体に幅と高さを指定していますが、各行と列の指定はないため、
ブラウザが自動的に幅と高さを割り振っています。
また、実は規格上(HTML4.0)、TABLEタグにheight属性は存在しません。
※ただIE,NNともに、その意味を汲み取ってくれます。
通常 TR の height の合計値がイコール TABLE の合計値に
なりますから、指定する必要もあまりないと思われます。
そこで、TRとTDで幅と高さを指定してやる必要があります。
<HTML>
<HEAD>
<TITLE> 幅の調整 </TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE width="500" bordercolor="Blue" border="1">
<TR height="100">
<TD width="250">名前</TD>
<TD width="250">かつべ</TD>
</TR>
<TR height="300">
<TD width="250">年齢</TD>
<TD width="250">（‾□‾；）！！</TD>
</TR>
</TABLE>
</BODY>
</HTML>
height、widthともにピクセル単位で指定します。
ここに矛盾した値を入れるとデザインが崩れる原因になります。
必ず、
<TABLE width="500">
と指定した場合、合計値が500になるように指定してください。
また、
<TABLE width="500" bordercolor="Blue" border="1">
<TR>
<TD width="100">名前</TD>
<TD width="250">かつべ</TD>
</TR>
<TR>
<TD width="250">年齢</TD>
<TD width="100">（‾□‾；）！！</TD>
</TR>
</TABLE>
という矛盾もしないように組んでください。
こういう小さいことの積み重ねで泣かされます(^^;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
7.sample06 「テーブル： TDタグの属性 rowspan, colspan」
──────────────────────────────────────
今度は、セルとセルを結合してみましょう。
この章はちょっと難しいかもしれません。
まずは上下に結合してみます。
徐々にサンプルも複雑になってきました(^^;
<HTML>
<HEAD>
<TITLE>やりたいことリスト(下に向かって結合)</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3">
<TR bgcolor="#000000">
<TD width="25"><B><FONT color="#FFFFFF">No</FONT></B></TD>
<TD width="150"><B><FONT color="#FFFFFF">画面</FONT></B></TD>
<TD width="200"><B><FONT color="#FFFFFF">やりたいこと</FONT></B></TD>
</TR>
<TR>
<TD width="25" align="center">1</TD>
<TD width="150">トップページ</TD>
<TD width="200">アクセスカウンターをつけたい</TD>
</TR>
<TR>
<TD width="25" align="center">2</TD>
<TD rowspan="3">掲示板</TD>
<TD width="200">背景を変えたい</TD>
</TR>
<TR>
<TD width="25" align="center">3</TD>
<TD width="200">もっと速く動くようにしたい</TD>
</TR>
<TR>
<TD width="25" align="center">4</TD>
<TD width="200">メールアドレスは必須項目に</TD>
</TR>
</TABLE>
</BODY>
</HTML>
注目するのは
<TD rowspan="3">掲示板</TD>
ここです。
自分のセルも合わせて3つ分、下に結合するという意味です。
※上には結合できません。
そして、その下に出てきている行では、
<TR>
<TD width="25" align="center">3</TD>
<TD width="200">もっと速く動くようにしたい</TD>
</TR>
<TR>
<TD width="25" align="center">4</TD>
<TD width="200">メールアドレスは必須項目に</TD>
</TR>
TDが一つなくなって(省略されて)います。
実際の画面と見比べて、どうなっているかチェックしてください。
逆に、左右に結合するには colspan属性を使用します。
<HTML>
<HEAD>
<TITLE>トップページの構成整理表(右に向かって結合)</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<TABLE border="3">
<TR align="center">
<TD colspan="3"><B>トップページの構成</B></TD>
</TR>
<TR>
<TD width="20" align="center">1</TD>
<TD width="80">トップタイトル</TD>
<TD width="160">イメージ(GIF)</TD>
</TR>
<TR>
<TD width="20" align="center">2</TD>
<TD width="80">カウンター</TD>
<TD width="160">イメージ(CGI)</TD>
</TR>
<TR>
<TD width="20" align="center">3</TD>
<TD width="80">解説</TD>
<TD width="160">テキスト</TD>
</TR>
<TR>
<TD width="20" align="center">4</TD>
<TD colspan="2" align="center">水平線</TD>
</TR>
</TABLE>
</BODY>
</HTML>
考え方は、rowspanと同じです。
<TD colspan="3"><B>トップページの構成</B></TD>
自分自身も含めて右に3つ連結するという意味になります。
やはり左には結合できません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
8.sample07 「テーブル： 実際に作るには」
──────────────────────────────────────
「うおー、こんなのイチイチ書いてたら日が暮れちゃうよー(泣)」
ご安心ください。
私は簡単なテーブル以外は作成ソフトを使っています(^^;
テーブルが複雑になればなるほど人間の頭では追い切れなくなってきます。
またミスの誘発にもつながりますので、出来るだけホームページ作成ソフト
を使うようにしてください。
この上のサンプルも、DreamWeaverを使って作りました。またソフトによっては表計
算ソフトなどからドラッグ＆ドロップで作れるものもあります。
空いた時間を使って、デザインや内容を充実させましょう！
PS.
でも理解は必要ですよー(^^;
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編 集 後 記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
テーブルの話で終始してしまいました。
連結のところはちょっと難しかったでしょうか？
ここでつまずく人も多く、使い方について議論の対象によくなる
HTMLの中でも、なかなかの曲者だったりします。
前回お話しましたクルマのバッテリーですが、上がってから見事400kmくらい
走ったところでバッチシ回復しました。もう、超ご機嫌で帰路を急いでいたら、
後ろからパッシングと赤い光が........。背筋が寒くなり、ゆっくりと頭を後
ろにやると予想通り覆面パトカーが。
ちょっとばかしスピードも出していたのですが、追い越し車線を長いこと走って
いたのがいけないとのこと。1km程度ですが(^^;
圏央道という高速道路を走っていたんですが、ココすごくすいているため
ついつい出しちゃんですよね。しかも一台抜いてから5分くらい他のクルマ
に全く出会わなかったため、そのまま走らせていたんですが、手痛い出費に
なってしまいました。
「法廷通行帯外違反」というそうです。ちなみに1点の6000円でした。
スピードの誘発になるということらしいのですが「本当にこれ危険か？」
というとちょっと疑問です。
と、捕まったときにいえない情けない私。とほほ(^^;
さてさて、みなさんからのご意見やご質問は随時受け付けております。
お気軽にお寄せください(^^)/
< mm-webp@ichikoro.com >
次回はなんとクリスマスイブのお届けになります。
それではまた来週！ (^^)/~~~~
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【 Webプログラミング Code Sample 】
発 行 ： ichikoro.com
発行責任者 ： 勝部 麻季人
< katsube@ichikoro.com >
発行部数 ： 1325部(前回)
Webサイト ： < http://www.ichikoro.com/webp/ >
お問い合わせ先 ： < mm-webp@ichikoro.com >
Powerd by まぐまぐ
All Right Reserved, CopyRight(C) 2001 Webプログラミング Code Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
----------------------------------------------------------------------
★デジタル製品購入前にクチコミ評価をチェック┏━━━━━━━━━━━┓
★ＰＣ・ネットで困ったら、相談しよう！ ┃ 株式会社リクルート ┃
★売れ筋ランキングもチェック！ ┃ＩＳＩＺＥ ＰＣ相談室┃
★もちろん登録料・利用料一切無料です！ ┗━━━━━━━━━━━┛
http://ad.trafficgate.net/e/m.pl?h=10137&g=6&m=92&t=mail
----------------------------------------------------------------------
