--.--
--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

05.05
Fri
・応用編


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

前々回からはじまった応用編。
今回は、レーシングフラッグのような模様をつくってみます。



まずは、こんな感じです。







入力ソースはこのようになっています。

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr height="20">「A」「B」「A」「B」</tr>
<tr height="20">「B」「A」「B」「A」</tr>
</table>


(「A」部分には、「<td bgcolor="#ccffcc" width="25%"></td>」が入ります)
(「B」部分には、「<td bgcolor="#ffffcc" width="25%"></td>」が入ります)


ここでのポイントは、「td」に「bgcolor=""」をもってきたことです。
これで交互に色を変えることができます。

さらに「td」に「width="~%"」を設定します。
~%」に入れる数字は、100%をヨコのマス目数で割った数です。
(今回は、100/4で、25%)

これで、自動的に均等にマス目が分割されるようになります。



ではここで、前回と同じように外枠で遊んでみましょう。


「table」の属性「border="~"」で外枠を表示させ、「bordercolor="~"」で色をつけます。
(今回は「border="1"」「bordercolor="#009900"」にしています)










ここでさらに、「table」に「bgcolor=""」属性をプラスしてみましょう。
(今回は「bordercolor=""009900"」と同じ色にしてみます)








これを「テーブル2」と名づけます。


ちなみにここで、「cellspacing="~"」の数字を大きくすると・・・








こんな感じにもなります。




次回は前回の「テーブル1」と今回の「テーブル2」を合体させてみます。
関連記事
スポンサーサイト

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

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

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。