全て
| カテゴリ未分類
| HTML文字画像リンク
| HTMLタグ（テーブル）
| HTML（応用編）
| 楽天で購入した商品
| スポーツ,アウトドア,車,バイク
| 心緒
| インテリア,ライト,収納,ベビー,キッズ
| アフィリエイト入門編
| TV・オーディオ・カメラ
| 自己管理,美容,インナー
| DVD,CD,本,旅,楽器
| 生活,美容,健康,家電
| 金運アップ,風水,自己トレ
| ユーザービリティとSEO
| 楽天市場のPR
| アフィリエイト
| 音楽
| 食品,グルメ,飲料
| ダイエット,健康,食品
| 園芸,DIY,ペット,おもちゃゲーム
| 日用品雑貨,キッチン用品,寝具
| パソコン・周辺機器
| ファッション,ジュエリー,アクセサリー,靴
| 防災,介護,医療
| ブランド雑貨,時計
| 酒場放浪記
| 天気気象予報
| 気になる動画
| 最近チェックした商品
| 血圧測定
| 気になるニュース
| 人生の名言集
2006.07.20
テーマ： ホームページ作成の悩み(550)
カテゴリ： HTML（応用編）
・応用編
前々回からはじまった応用編。
今回は、レーシングフラッグのような模様をつくってみます。
まずは、こんな感じです。
入力ソースはこのようになっています。
（「Ａ」部分には、「<td bgcolor="#ccffcc" width="25%" ></td>」が入ります）
（「Ｂ」部分には、「<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」を合体させてみます。
前々回からはじまった応用編。
今回は、レーシングフラッグのような模様をつくってみます。
まずは、こんな感じです。
入力ソースはこのようになっています。
| <table width="300" border="0" cellspacing="0" cellpadding="0">
<tr height="20">「Ｂ」「Ａ」「Ｂ」「Ａ」</tr> </table> |
（「Ａ」部分には、「<td bgcolor="#ccffcc" width="25%" ></td>」が入ります）
（「Ｂ」部分には、「<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
[HTML（応用編）] カテゴリの最新記事
-
ホームページＨＴＭＬソースの基本構造 2008.04.04
-
カーソルの形状を変更する方法 2008.03.22
-
楽天広場HTML講座 スクロールバーのテンプ… 2007.06.30
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
