FC2ブログ
05.05
Fri
・応用編


■ カラフルなデザインをつくる

前回までで、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を入れました)





文字が入りました。
おお、本当だ!!
キレイでしょ。
うんうんこりゃいいね。





次回はこのつづき。
外枠でいろいろ遊んでみましょう。
関連記事
スポンサーサイト




comment 0 trackback 0
トラックバックURL
http://oyedihawakisi.blog37.fc2.com/tb.php/160-59cf9ebd
トラックバック
コメント
管理者にだけ表示を許可する
 

 New Favorite blog Entries 最新記事 33サイト掲載中

back-to-top