ホームページを無料で作りたい方必見！メモ帳で簡単に作れるギャグwebデザイン講座☆ 　
対話でわかる！？ギャグwebデザイン講座！*7日目*
☆表をつくってみよ〜！！
TOP > 7日目
　
　
「昨日（6日目に）やったことを下に書きだしてみたぞ！」

■<BODY background="貼り込む画像がある場所を指定">　/*背景に縦横連続して画像を貼り込む*/
■<img src ="貼り込む画像がある場所を指定">　/*画像を貼り込む*/
■<align="left"> 　/*右に回り込ませる*/
■<align="right"> /*左に回り込ませる*/
■<align="center"> /*中央揃え*/
■「フリー素材」として、背景、ボタン、アイコンなどの画像を、無料で配布しているサイトが結構ある！

　 　
「てとこだな。ちょっと覚えること多いけど、その調子でファイトだっ！今日は、表を作るぞ！ちとややこしいが、しっかりついてくるんだ！とりあえず今日は、こんな感じのページを作る予定だっ！！」
こんなページ←クリックしてみそ★
「表ってあのひょーですかぁ？」
「ひょーだ！取りあえず今まで使ったタグを使って骨組みをつくるぞ！ まず下の新しいテキストを作成するのだ！」
「ふぁーい」

<html>
<head>
　　　　<title>ぷろふぃーる</title>
</head>
<body background="image/megane.gif">
<center>
<h1>メガーネの自己紹介</h1>
</center>
</body>
</html>

　 　 　 　 　 　 　 　
「と打って、『profile.html』という名前を付けて、『mypage』の中に保存しておくのだっ！」
「保存しました〜！！」
「よし！次は、表のタグを入れていくぞ！『<BODY></BODY>』の間に『<table border="1"></table>』とうつのだっ！」
「打ちました！」
「この『<table></table>』は、表を作りますよ！と定義するためのものだっ！」
「はぁ、ひょうなんですか〜」
「そして、この『border="1"』は、表の線の太さをあらわしているっ！」
「ひょうなんですか〜」

<html>
<head>
　　　　<title>ぷろふぃーる</title>
</head>
<body background="image/megane.gif">
<center>
<h1>メガーネの自己紹介</h1>
<table border="1">
</table>
 </center>
</body>
</html>

「あれー？表示させても、またなんにもならないっすよ〜？？」
「ここまででは、なにも表示されないのだ。『太さ1の表を作りますよ』と言っているだけ。表には、『列縦方向<tr>と行横方向<td>』があり、それを記述しないと形にならないのだっ！」
「ふーんなんかむずかしそうですね。」
「まあな。挫折したら、メガーネをメガネとエロ本いっぱいの墓で葬ってやるからな。」
「うひょひょ〜☆楽しみにしてつ♪」
「まず『列<tr></tr>』から描いて行くぞ！」
「ふぁーい」

<html>
<head>
　　　　<title>ぷろふぃーる</title>
</head>
<body background="image/megane.gif">
<center>
<h1>メガーネの自己紹介</h1>
<table border="1">
<tr></tr>
 </table>
</center>
</body>
</html>

「かけました。」
「続いて<tr></tr>の間に『行<td></td>』を書いていくぞ！」

<html>
<head>
　　　　<title>ぷろふぃーる</title>
</head>
<body background="image/megane.gif">
<center>
<h1>メガーネの自己紹介</h1>
<table border="1">
<tr><td>本名</td><td>メガーネ</td></tr>
</table>
</center>
</body>
</html>

「保存して、ブラウザで確認してみそ！」
「うあっ！？なんか四角いのが2つできてますよ！」
「ふふーん♪それが、『列縦方向<tr>と行横方向<td>』で出来た表だ！」
「列と行？うーん…ミステリアス☆」
「次は、同じように列『<tr>』を増やしていくぞー！」
「ふぁーい！」

<html>
<head>
　　　　<title>ぷろふぃーる</title>
</head>
<body background="image/megane.gif">
<center>
<h1>メガーネの自己紹介</h1>
<table border="1">
<tr><td>本名</td><td>メガーネ</td></tr>
<tr><td>年齢</td><td>16</td></tr>
 <tr><td>趣味</td><td>パンチラ鑑賞</td></tr>
 <tr><td>好きな女優</td><td>インリン</td></tr>
 <tr><td>好きな四文字熟語</td><td>爆裂巨乳</td></tr>
 </table>
</center>
</body>
</html>

「おおーっ！かっくいいー！ひょーができてますよー？！！」
「うむよくがんばったな！何度も言うようだが、表は『列縦方向<tr>と行横方向<td>』でできているのだっ！その後の、『</table> 』も忘れてはいかんぞっ！」
「ふぁーい！なんかレベルアップしたみたいっす！」
「メガーネにしてはましになってきたなぁ。では、これに『index.html』に戻るのリンクをつけたしてみろっ！」
「えー？またリンクですか？リンクってどうやるんだっけ？」
「メガーネもう忘れたか！『</table>』の後ろに、『<br><br><a href="index.html">TOPに戻る</a>』とつけたしてみろっ！『<br>』は改行の意味だっ！」
「はいでやんす〜！」

<html>
<head>
　　　　<title>ぷろふぃーる</title>
</head>
<body background="image/megane.gif">
<center>
<h1>メガーネの自己紹介</h1>
<table border="1">
<tr><td>本名</td><td>メガーネ</td></tr>
<tr><td>年齢</td><td>16</td></tr>
<tr><td>趣味</td><td>パンチラ鑑賞</td></tr>
<tr><td>好きな女優</td><td>インリン</td></tr>
<tr><td>好きな四文字熟語</td><td>爆裂巨乳</td></tr>
</table>
<br><br>
<a href="top.html">TOPに戻る</a> </center>
</body>
</html>

「ブラウザで確認してみそ！」
「おーっ！戻れるようになりましたよ！でも、表の中の文字が見にくいです…」
「ふふ、なら『<table border="1">』に『<table border="1" bgcolor="#fff">』 を付け足して、背景を白にしてみろっ！！」
「へいへいほー！」
「また、一番始めに作った『diary.html』も『<br><br><a href="index.html">TOPに戻る</a>』をつけたして、トップページに戻れるようにしておくようになっ！！」
「ほーい！」
「後、表の属性を簡単に紹介すると『<width="横幅を数値入力">』横幅と、『<height="高さを数値入力">』高さを指定できるのだ。」
「ほへー！？どこに記述すればいいんすか？」
「表全体の幅を指定したいなら『<table width="横幅を数値入力">』すればよい！また、各表内のサイズを変えたいときは、『<td width="横幅を数値入力">』または、 『<td height="高さ幅を数値入力">』とそれぞれに指定すればいいのだっ！ 今日は、ここまでだっ！！表をもっと使いこなせるようになるとレイアウトに幅が出てくるぞー！！」
「がんばるっす！！」

これで、またwebマスターに一歩近づいた…ざぶーん

topに戻る
10日でできる？ホームページ
1日目| 2日目| 3日目| 4日目| 5日目| 6日目| 7日目| 8日目| 9日目| 10日目|
教子先生の！webテク講座！
〜テクその１〜| 〜テクその2〜| 〜テクその3〜| 〜テクその4〜|
Copyright (C)2006.01 duyopon
http://www16.plala.or.jp/duyopon_dayo/