3813933 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! --/--
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
全て | カテゴリ未分類 | HTML文字画像リンク | HTMLタグ(テーブル) | HTML(応用編) | 楽天で購入した商品 | スポーツ,アウトドア,車,バイク | 心緒 | インテリア,ライト,収納,ベビー,キッズ | アフィリエイト入門編 | TV・オーディオ・カメラ | 自己管理,美容,インナー | DVD,CD,本,旅,楽器 | 生活,美容,健康,家電 | 金運アップ,風水,自己トレ | ユーザービリティとSEO | 楽天市場のPR | アフィリエイト | 音楽 | 食品,グルメ,飲料 | ダイエット,健康,食品 | 園芸,DIY,ペット,おもちゃゲーム | 日用品雑貨,キッチン用品,寝具 | パソコン・周辺機器 | ファッション,ジュエリー,アクセサリー,靴 | 防災,介護,医療 | ブランド雑貨,時計 | 酒場放浪記 | 天気気象予報 | 気になる動画 | 最近チェックした商品 | 血圧測定 | 気になるニュース | 人生の名言集
2006.07.20
XML
カテゴリ:HTML(応用編)
・応用編


■ カラフルなデザインをつくる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」を合体させてみます。





[トップページへ戻る][次のページ⇒]






お気に入りの記事を「いいね!」で応援しよう

Last updated  2008.12.21 08:39:27



© Rakuten Group, Inc.