| *** 適当に作ってみよう *** |
| 1.自己紹介ページを作る ◇完成予想図 TOPと同じですが、簡単なものにします。イキナリこったものを作るのはなかなか難しいです。
↑こんな感じの物。実物はこちら ◇実際に作ってみる ソースを書きますので、まずはこれらを全部メモ帳で打ち込んで下さい。（保存名はprofile.htmlで）
気づいた人もいるでしょうが、トップページで作った時とそんなに大差ないですね。でも今回のは<table>と言うのを使うので、ややこしいんですよ＾＾； ◇解説 1.TOPページを作る。と同じところはすべて省略します。 と言うと、違う所は<table>だけになりますね。でもこの<table>タグの中では一番ややこしいといえばややこしいんです。ワードを使った事のある人はわかりやすいと思いますが、表です。表と言うのは、 ┌┬┐ ├┼┤ └┴┘ ↑の様な形をしたものですね。でも、今回は周りの黒い線にあたる部分はありません。では、解説していきます。 <table width="100" border="0"> <table>と言うタグに属性が入ってます。<table>とはココから表ですよ〜。と言うものです。じゃーtableの横に書かれてるのは何のためにあるん？と思いますよね。実はコレは、横幅と周りの枠をどうするか決めています。width="100"が表の横幅を決めています。width="100"で100pxの表にしてね。と言う意味になります。100pxにすると、横幅はブラウザのウィンドウが小さかろうが大きかろうが必ず同じ大きさになります。指定の方法には、width="○○%"と言う風に、ブラウザのウィンドウの大きさに対する比率で作る事も出来ます。こうすると、ウィンドウが小さい人でも、横スクロールをしなくてすむようになり、見る人が見やすいホームページになります。このあたりは人それぞれです。ちなみにタダで作るウェブサイト！はpxで指定しています。 さて、次に行きましょう。border="0"が周りの枠の大きさ（太さ）を決めています。border="0"は枠無しです。数字を増やせば増やすほど太くなります。 <tr> これは、表の横列を始めます。と言う意味です。 <td> ここから1マスです。と言う意味です。 </td> マスの終わりを示します。 </tr> 表の横列はココで終わりです。と言う意味になります。 </table> はもちろん、表の終わりですね。 ・・・？？？？？ですね。実際やってみるとわかりやすいと思います。 試しに、 <table border="1"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> </table> と打って表示してみて下さい。
↑こうなりますよね？こうやって一度やってみることで、意味がわかるようになります。<table>に色を付けたりできます。今回の作成には関係ないので、下で語ることにします。 保存して表示してみて下さい、うまくできたでしょ？ ◇ソースを綺麗に 今回はタグを打つときに、tableの所だけ左側にスペースを入れてみました。これは、ソースを綺麗に表示するためにスペースを空けています。 今はまだ、文字数的に少ないから良いですが、作成していくとどんどん文字数が増え、グチャグチャになってしまいます。そうなると、後から編集する時に大変になるため、今回のようにスペースを空けて後から見てもわかりやすいようにします。<table>が始まる前に1行空けているのも後から見てすぐ<table>がある所をわかるようにするためです。改行は<br>と入れなければ改行されないので、メモ帳などでどれだけ改行しても表示するときは改行されません。 このソースを綺麗にすると言う心がけはとても大切な事だと自分は思います。後から更新する時に困らないですむと、作業時間の短縮にもなります。 ◇テーブルを弄る 表に色を付けたい人などもいると思いますので、その方法の解説をしたいと思います。(一部省略されている場所がありますが、上から順番に見て行けば分かると思います。） まずは背景から変えてみましょうか。 <table border="1" bgcolor="#CCCCCC"> と言う風に、bgcolor=""を付けることにより、背景を変えることが出来ます。 次に、枠に色を付けてみます。 <table border="1" bordercolor="#000000" bgcolor="#CCCCC"> と、bordercolor=""を付けることにより、枠に色が付きます。 変な2重の枠が嫌だ。と言う場合は <table border="1" bordercolor="#000000" cellspacing="0" bgcolor="#CCCCCC"> cellspacing="0"を付けましょう。 今度は1行色を変えましょう。 <tr bgcolor="#000000"> 色を変えたい行の<tr>にbgcolor=""を付けると、その行だけ色が変わります。 今度は1マスだけ。もう予想できた人もいるでしょう。 <td bgcolor="#FF0000"> 色を変えるマスの<td>にbgcolor=""を付けると、そのマスだけ色が変わります。 各マスも枠の色を変更できます。 <td bordercolor="#0000FF"> これも、枠の色を変えたいマスにbordercolor=""を付けます。 次は、色から離れて、マスの結合です。 横に結合したい場合は、 <td colspan="2"> colspan=""を付けます。上の場合は横に2マス結合します。 縦に結合したい場合は、 <td rowspan="2"> rowspan=""を付けます。上の場合だと縦に2マス結合します。 まだまだあるけど、使いそうなのをあと少しだけ。 文字をマスの上、中、下に配置します。 <td valign="xxx"> xxxの部分には、top,middle,bottomの3つのうち一つを入れます。topは上、middleは中央、bottomは下です。 <tr>にvalign="xxx"を付けても使えます。この場合は行全体が上、中、下のどこかになります。
文字をマスの左、中央、右に配置します。 <td align="xxx"> xxxの部分には、left,center,rightの3つのうち一つを入れます。leftは左、centerは中央,rightは右です。 <tr>にalign=""を付けても使えます。この場合は行全体が左、中央、右のどれかになります。
テーブルは横幅だけでなく、縦幅も変えることが出来ます。 <table height="50" width="50"> height=""で高さを決めます。コレはwidth=""と指定の仕方は同じです。 上のだと、50pxのテーブルということになります。もちろん○○%でも可能です。 マスの横幅、縦幅も変更できます。 <tr height="" width=""> <table>の場合と一緒なので、省略します。 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||