楽天広場HTML講座・カラフルなデザインをつくる

・応用編 ■ カラフルなデザインをつくる 前回までで、ＨＴＭＬの基本はおわりです。 今回からは、実際の応用を学んでいきます。 ということで、まずはいままでの復習もかねて、テーブルの応用です。 たとえば、次のようなカラフルなデザインをつくりたいとき。 入力ソースはこのようになっています。 <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr height="20" bgcolor="#ccffcc"><td></td></tr> <tr height="20" bgcolor="#ffffcc"><td></td></tr> <tr height="20" bgcolor="#ccffcc"><td></td></tr> <tr height="20" bgcolor="#ffffcc"><td></td></tr> </table> 「table width="300"」の数字はデザイン全体の長さを表し、数字を変えるとデザイン全体の大きさも変わります。 ではさっそく今回の一番のポイントです！！ それは・・・・・「height="～"」！！！ これを「tr」に設定することで、テーブルのなかに何も文字が入ってなくても、デザインを表示することができます。 仮にこの「height="～"」を設定しないとデザイン自体が表示されなくなるのです。 今回は「20」で設定していますが、好きな数字で設定オッケーです！！ 実際に文字をいれるとこんな感じです。 文字が入りました。 おお、本当だ！！ キレイでしょ。 うんうんこりゃいいね。 文字をちょっとカスタマイズするとこんな感じです。 （「<font size="" color="">～</font>」を「<td>～</td>」に入れてカスタマイズ） 文字が入りました。 おお、本当だ！！ キレイでしょ。 うんうんこりゃいいね。 文字を真ん中にもってきます。 （「<td align="center">～</td>」としてみましょう） 文字が入りました。 おお、本当だ！！ キレイでしょ。 うんうんこりゃいいね。 文字と枠（今は見えていませんが）の間隔を調節してみましょう。 （「table」の「cellpadding="～"」に好きな数字をいれます） 文字が入りました。 おお、本当だ！！ キレイでしょ。 うんうんこりゃいいね。 さらに外枠を表示してみましょう。 「table」の「border=""」に好きな数字をいれます。（今回は1を入れました） 文字が入りました。 おお、本当だ！！ キレイでしょ。 うんうんこりゃいいね。 次回はこのつづき。 外枠でいろいろ遊んでみましょう。 [トップページへ戻る][次のページ⇒]