テーブルの活用
テーブルを使えば本格的なデザインも思いのまま！！
今までの並べるだけのデザインが見違えるように変化します、この方法は組み合わせ次第で無限に広がります。
|
<table border="0" width="200" height="117" cellspacing="0" cellpadding="0" background="001.gif">
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<marquee scrollamount="2" width="180" behavior="alternate">今時のHP作り！！</marquee>
<br>
<br>
<marquee scrollamount="5" width="180">
更新履歴や最新ニュース・その他管理人からの簡易伝言版として活躍することでしょう☆</marquee>
</td>
</tr>
</table>
</td>
</tr>
</table>
●上記のタグが上のイメージを構成するタグです。
ポイントはテーブルのサイズと背景画像のサイズを一緒にすることです、このままでも十分使えます
ので設定を変える所を説明します
最初はwidth="200"
height="117"この部分これが画像のサイズでありテーブルのサイズでもあります
次にbackground="001.gif"これは背景画像までのパスです
そして『今時のHP作り！！』の部分にHPタイトルや更新履歴を入力
記事部分は 更新履〜でしょう☆ の部分を好きな文字に変更すれば完成です。
背景画像はWindowsであれば画像を右クリックしてから名前を付けて背景を保存でOKです
画像はご自由にお使いください。
中の字の色やサイズを変えたい時には
marquee scrollamount="5" width="180" style="font-size:10pt; color: #FF0000"
マーキーのタグ内にスタイル属性を設定すればOKです ↑この部分
|
|
<table border="0" width="200" height="117" cellspacing="0" cellpadding="0" background="001.gif">
<tr>
<td>
<div style="text-align:center">
<table border="0" width="180" cellspacing="0" cellpadding="0">
<tr>
<td>
<textarea rows="4" name="S1" cols="23" style="background-color: #FFFF80">
2002/00/02
色々な更新
2002/00/01
色々な更新
2002/00/00
更新履歴表示
</textarea></td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
●上記のタグが上のイメージを構成するタグです。
ポイントは最初と同じですが、
textarea
rows="4"
name="S1"
cols="23"
style="background-color: #FFFF80"
この 4 と 23 を変えるとフォームの大きさが崩れます、そしてバックカラー部分
を変更すると一体感が失われます。
このまま使用する時は下記の個所に気をつけて変更して下さい。
最初はwidth="200"
height="117"この部分これが画像のサイズでありテーブルのサイズでもあります
次にbackground="001.gif"これは背景画像までのパスです
そして2002/00〜履歴表示 部分を変更します、この時に横には全角で23文字までスクロール無しで入り
縦には4段落分のスペースがあります。
中の字の色やサイズを変えたい時には
textarea rows="4"
name="S1"
cols="23"
style="background-color: #FFFF80; font-size:
10pt; color: #FF0000"
このように カラー設定の後ろにスタイル属性を付けて設定
使用タグ説明
<table>〜</table> テーブル本体のタグです
<tr>〜</tr> 段落区切りのタグです、この中に書かれた物は全て一段落で処理
<td>〜</td> セル構築のタグです、この中が一セルとなります
<p> 段落のタグ
<marquee>〜</marquee> マーキーのタグです
<textarea>〜</textarea> テキストを表示又は入力する為のフィールド設定のタグ
<br> 改行タグ
<div>〜</div> このタグで挟まれた領域を一まとめと定義するタグ
<center> センターリングのタグです
上記のタグに付属する属性の説明は省かせて頂きます、興味がありましたら
検索エンジンで ＨＴＭＬ ⇒ 各タグ（属性） と検索して見て下さい。
