全て
| カテゴリ未分類
| HTML文字画像リンク
| HTMLタグ（テーブル）
| HTML（応用編）
| 楽天で購入した商品
| スポーツ,アウトドア,車,バイク
| 心緒
| インテリア,ライト,収納,ベビー,キッズ
| アフィリエイト入門編
| TV・オーディオ・カメラ
| 自己管理,美容,インナー
| DVD,CD,本,旅,楽器
| 生活,美容,健康,家電
| 金運アップ,風水,自己トレ
| ユーザービリティとSEO
| 楽天市場のPR
| アフィリエイト
| 音楽
| 食品,グルメ,飲料
| ダイエット,健康,食品
| 園芸,DIY,ペット,おもちゃゲーム
| 日用品雑貨,キッチン用品,寝具
| パソコン・周辺機器
| ファッション,ジュエリー,アクセサリー,靴
| 防災,介護,医療
| ブランド雑貨,時計
| 酒場放浪記
| 天気気象予報
| 気になる動画
| 最近チェックした商品
| 血圧測定
| 気になるニュース
| 人生の名言集
2006.07.19
テーマ： ホームページ作成の悩み(545)
カテゴリ： HTML（応用編）
・応用編
前回までで、ＨＴＭＬの基本はおわりです。
今回からは、実際の応用を学んでいきます。
ということで、まずはいままでの復習もかねて、テーブルの応用です。
たとえば、次のようなカラフルなデザインをつくりたいとき。
入力ソースはこのようになっています。
「 table width="300" 」の数字はデザイン全体の長さを表し、数字を変えるとデザイン全体の大きさも変わります。
ではさっそく今回の一番のポイントです！！
それは・・・・・「 height="～" 」！！！
これを「 tr 」に設定することで、テーブルのなかに何も文字が入ってなくても、デザインを表示することができます。
仮にこの「 height="～" 」を設定しないとデザイン自体が表示されなくなるのです。
今回は「 20 」で設定していますが、好きな数字で設定オッケーです！！
実際に文字をいれるとこんな感じです。
文字をちょっとカスタマイズするとこんな感じです。
（「 <font size="" color="">～</font> 」を「 <td>～</td> 」に入れてカスタマイズ）
文字を真ん中にもってきます。
（「 <td align="center" >～</td> 」としてみましょう）
文字と枠（今は見えていませんが）の間隔を調節してみましょう。
（「table」の「 cellpadding="～" 」に好きな数字をいれます）
さらに外枠を表示してみましょう。
「table」の「 border="" 」に好きな数字をいれます。（今回は1を入れました）
次回はこのつづき。
外枠でいろいろ遊んでみましょう。
前回までで、ＨＴＭＬの基本はおわりです。
今回からは、実際の応用を学んでいきます。
ということで、まずはいままでの復習もかねて、テーブルの応用です。
たとえば、次のようなカラフルなデザインをつくりたいとき。
入力ソースはこのようになっています。
< 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>
<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を入れました）
文字が入りました。
おお、本当だ！！
キレイでしょ。
うんうんこりゃいいね。
次回はこのつづき。
外枠でいろいろ遊んでみましょう。
お気に入りの記事を「いいね！」で応援しよう
Last updated
2008.12.21 08:29:10
[HTML（応用編）] カテゴリの最新記事
-
ホームページＨＴＭＬソースの基本構造 2008.04.04
-
カーソルの形状を変更する方法 2008.03.22
-
楽天広場HTML講座 スクロールバーのテンプ… 2007.06.30
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
