| テーブル（表）タグ |
ホームページを作る上で最も大切なタグと言っても過言ではありません。制作プロの方は、このテーブルの組み方に力を入れるそうです。 |
<table ★>〜</table>
★･･･
border="ピクセル"（枠線の太さ）
bordercolor="枠の色指定"
bgcolor="背景色指定"
background="背景画像指定"
cellspacing="ピクセル"（セルとセルの間隔）
cellpadding="ピクセル"（枠線とセルの間隔）
width="ピクセル"（table枠の幅）
height="ピクセル"（table枠の高さ）
align="left,center,right"
（デフォルトはleft）
valign="top,center,bottom"
（デフォルトはcenter）
＜ページのつながりについて＞
http://joywave.net/
├ index.html （トップページ）
├ kiso1.html （基礎編１）
├ kiso2.html （基礎編２）
├ kiso3.html （このページ）
├ sonota.html （その他）
└ gazou （フォルダー）
└ c004bcg.gif （画像）
私のＨＰはこのような階層にしています。このページは「kiso3.html」で、画像c004bcg.gifとは階層がひとつ異なります。
その場合は、「gazou」というフォルダーの中にある画像c004bcg.gifと指定します。
「gazou/c004bcg.gif」とは、そういう意味です。
≪参考≫ひとつ前の階層に戻る場合は、「../」で表します。
このページから、「基礎編１」にリンクを貼る場合は、同じ階層でつながっていますので、「kiso1.html」と指定できます。
|
|
|
<table>と</table>に挟まれた範囲がテーブルであることを示しています。
テーブルを構成する各要素の最初と最後に書きます。枠線を表示するときは「border属性」で指定します。デフォルトは「0」で枠線が表示されません。
属性は多数ありますが、よく使うのは左のものです。borderは横罫線と同じ性質でピクセルで指定すると立体的な線に見えます。
なお、「 table 」は単独では使えません。後述する「 tr 」「 td 」と組み合わせて使用します。
こんな感じです。bgcolorを指定すると
border="1"
bgcolor="#ccccff" |
|
border="3"
bgcolor="#ccffcc" |
|
また、背景画像を壁紙として挿入できます。
background="gazou/c004bcg.gif"
わざと左上に寄せています。 |
「http://joywave.net/」を書けば絶対ＵＲＬで、省略していますので、相対ＵＲＬになります。
左欄に余白がありますので、それぞれの関連について書きます。
ここまででも充分ですが、上の「わざと左上に寄せている」では枠線と文字が引っ付いていて少し見にくいですね。そこでcellpaddingの登場です。
<table border="1" cellspacing="0" cellpadding="10">
こうすると、左と上から10ピクセルずつ間隔が空きます。 |
cellspacingを指定すると
| <table border="1" cellspacing="5"> |
|
上と下を見比べてください。
| <table border="5" cellspacing="5"> |
|
枠線に色を付けると
<table border="1" cellspacing="5"
bordercolor="#ff0000"> |
|
次に、cellspacing="0"にすると
| <table border="3" bordercolor="#ff0000" cellspacing="0"
cellpadding="8"> |
|
立体感のない枠線になります。
このテーブル作成は覚えるまでが難しく、でも、より良いＨＰを作るためには不可欠です。
酷な言い方ですが、何度もチャレンジしてください、きっと出来ます！
影ながら応援しています^^ |
<tr>〜</tr>
<td>〜</td>
bgcolor、backgroundで背景色や背景画像も指定できます。
<td>はwidth、heightも指定できます。
<td>はセル内のテキスト位置を下記のように指定できます。
<td align="★" valign="☆">
★･･･leht、center、right（横位置指定）
☆･･･top、middle、bottom（縦位置指定） |
<tr>〜</tr>は行を定義するタグです。横一列分の最初と最後に記述します。
<td>〜</td>は最小単位でエクセル（Excel）でいうところの「セル」に値します。
「table」「tr」「td」の関係は次のようになります。
<table>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
<td>〜</td>は最小単位と書きましたが、この中にさらにテーブルを作ることもできます。 このページも<td>〜</td>内にテーブルを組み込むことによって作っています。
<td>で背景色、背景画像を指定すると、
<table>
<tr><td bgcolor="#ccccff">A1</td>
<td>B1</td><td bgcolor="#ffcccc">C1</td></tr>
<tr><td>A2</td>
<td background="gazou/c004bcg.gif">B2</td><td>C2</td></tr>
</table>
|
<table align="★">〜</table>
★･･･left、center、right |
<table>でalignを指定すると、テキストの回り込みが発生します。デフォルトはleftですが、指定しないと回り込みは発生しません。
指定すると下記のようになります。
<table align="left">
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
align="left"と指定したことで、テーブルが左に配置されました。その後のテキスト文章はテーブルの右に配置され、テーブルが終わったところから回り込んで先頭にきています。
align="left"と指定したことで、テーブルが左に配置されました。その後のテキスト文章はテーブルの右に配置され、テーブルが終わったところから回り込んで先頭にきています。
|
| <td nowrap>〜</td> |
セル内の改行を禁止します。
テーブルの大きさは通常、ブラウザの文字の大きさなどの設定により自動的に調節され、データを各セル内にうまく納めるため、セル内のテキストが長い場合は自動的に改行されます。
nowrapを指定することで、自動改行されなくなります。
<td width="206">〜</td>
| ブラウザの「表示」→「文字のサイズ」を変えてみてください |
<td nowrap>〜</td>
| ブラウザの「表示」→「文字のサイズ」を変えてみてください |
但し、「nowrap」を指定する場合、「width」は設定しないでください。
|
<td rowspan="★">〜</td>
<td colspan="★">〜</td>
rowspan･･･セルを縦方向に連結
colspan･･･セルを横方向に連結
★･･･連結するセル数 |
表作成やレイアウトのためによく用いる手段です
■横に連結（セルの書き順：A1→B1→A2+B2）
<table border="1" width="120">
<tbody>
<tr><td align="center">A1</td><td align="center>B1</td></tr>
<tr><td colspan="2" align="center">A2+B2</td></tr>
</tbody>
</table>
■縦に連結（セルの書き順：A1→B1+B2→A2）
<table border="1" width="120">
<tbody>
<tr><td align="center">A1</td>
<td rowspan="2" align="center">B1+B2</td></tr>
<tr><td align="center">A2</td></tr>
</tbody>
</table>
</tbody>はテーブル本体のグループ化する意味です。現段階ではそのような機能をするブラウザはありませんが、長いテーブルを印刷する場合、各ページにヘッダとフッタを付けたり、ヘッダとフッタを固定したまま本体部分をスクロールすることが可能になります。省略しても差し支えありません。 |
<colgroup ★>〜</colgroup>
★･･･
span="グループ化する列数"
width="列幅"
align="left,center,right"
valign="top,middle,bottom"
|
縦列の構造的なグループ化をします。span属性でグループ化する縦列の数、width属性で列の幅を指定します。
このようにグループ化することで、複数の縦列に対してまとめてスタイルシートを適用したり色変更などのＨＴＭＬの属性を指定できるようになります。
終了タグ</colgroup>は省略可能です。
|
| 画像タグ |
ページに画像を挿入する方法について書きます。 |
<img src="★" width="☆１" height="☆２"
border="◆" alt="◇">
★ ･･･画像のＵＲＬ
☆１･･･横サイズ（ピクセル）
☆２･･･縦サイズ（ピクセル）
◆ ･･･枠の有無とサイズ（"0"で縁なし）
◇ ･･･画像の説明 |
srcには画像の名前（半角英数と一部の記号のもの）を入れます。上記のテーブル内にも書き込むことができます。「･･･.gif」、「･･･.jpg」ですが、容量が小さいほど開くスピードが早くなるので、イラストなどは「･･･.gif」写真は「･･･.gif」か「･･･.jpg」を使いましょう。また、横・縦のサイズは画像をクリックすれば判りますので、そのサイズを書きましょう。でも、実際のサイズより大きく見せたり、小さく見せたりすることもできます。
alt属性（画像の説明）は必ず書きましょう。これは、もし画像が表示されなかったとき画像の替わりに表示されることと、目の不自由な方のためにカーソルを上に持っていくと音声ガイダンスのように読み上げてくれるソフトがあるからです。 |
<img src="★" align="☆">
★･･･画像のＵＲＬ
☆･･･top,middle,bottom |
通常、画像はテキストと一緒にひとつの行に配置されます。そのときの画像とテキストの並べ方を指定するものです。
<img src="gazou/top2.gif" width="112" height="32"
border="0" align="top">上が揃う
 上が揃う
<img src="gazou/top2.gif" width="112" height="32" border="0" align="bottom">下が揃う
下が揃う |
<img src="★" align="☆" vspace="◆" hspace="◇">
★･･･画像のＵＲＬ
☆･･･left,right
◆･･･画像に対する上下の余白（ピクセル）
◇･･･画像に対する左右の余白（ピクセル） |
画像とテキストなどの位置関係とそれらの隙間を決めます。
<img src="gazou/top2.gif" width="112" height="32"
border="0" align="left">alt属性（画面の･･･（中略）･･･ソフトがあるからです。
|
alt属性（画像の説明）は必ず書きましょう。これは、もし画像が表示されなかったとき画像の替わりに表示されることと、目の不自由な方のためにカーソルを上に持っていくと音声ガイダンスのように読み上げてくれるソフトがあるからです。
|
<img src="gazou/top2.gif" width="112" height="32"
border="0" align="left" vspace="10" hspace="20">alt属性（画面の･･･（中略）･･･ソフトがあるからです。
|
alt属性（画像の説明）は必ず書きましょう。これは、もし画像が表示されなかったとき画像の替わりに表示されることと、目の不自由な方のためにカーソルを上に持っていくと音声ガイダンスのように読み上げてくれるソフトがあるからです。
|
このように、画像とテキストの位置関係は調節できるのですが、テーブルの場合はできませんでした。テーブルの場合は、border="0"のテーブルの中にもうひとつテーブルを用意し、この２つのテーブルの大きさを変えておけば、画像余白と同じように見せることができます。
|
| リンクタグ |
ページ内の画像やテキストをクリックできて、他のＵＲＬなど、指定の場所に移動するようにします。 |
<a href="★" taget="☆">〜</a>
★･･･ＵＲＬ
☆･･･
"_blank"（新しいページで開く）
"_top"（フレームを解除して表示。フレームを使っていないときはそのまま表示）
|
ＵＲＬは現在のページとの位置関係を考えて、絶対ＵＲＬか相対ＵＲＬかを決めます。このページ左下の「トップページ」などがリンクしています。
<a href="index.html"><img src="gazou/top1.gif" width="92" height="16" border="0" alt="トップページへ"></a>
となっています。
この場合の"index.html"は「index.html」というページを指します。同様に、"gazou/top1.gif"の意味は、「gazou」というフォルダー内の「top1.gif」というGIF画像を指します。
|
<a href="#★">〜</a>
<a name="★">〜</a>
★･･･キーワード |
≪ページ内リンク≫
name属性で、キーワードのついたページ内の特定の位置に移動できるようにします。
右下の「ＴＯＰへ」は、<body>のすぐ後に
<a name=top></a>
と書いておき、
<a href="#top"><img src="gazou/top2.gif"
width="56" height="16" border="0" alt="ページ先頭へ"></a>
で指定しています。
「ＴＯＰへ」をクリックした後、ブラウザのアドレスバーを見れば、「http://joywave.net/kiso3.html#top」と表示されています。
他のページの特定の位置に移動する場合も、相対ＵＲＬの後に指定したキーワードを書きます。「・・・・・・/kiso3.html#top」と同様ですね。
キーワードが一致しないと移動しませんし、１つのページ内に同じキーワードが２つある場合はどうなるのか確認していません。ページが異なればキーワードは同じ言葉でも構いません。
|
<a href="mailto:★">〜</a>
★･･･メールアドレス
アドレスに続けて
?Subject= ･･･件名
&body= ･･･本文
%0D%0A ･･･本文中の改行
≪ご注意≫
最近、迷惑メールが増えているそうです。
ＨＰのソースに書かれているアドレスを拾う「メールアドレス収集ロボット」があって、
収集されることがあるそうです。
ここに書いたメールフォームは便利ですが、充分注意してください。
私はトップページにあるレンタルフォームや暗号化アドレスを使っています。
|
≪メールフォーム≫
リンクを利用して、指定先のメールアドレスにメールを送る場合に使います。
<a href="mailto:++++@*******.****"><u>メール送信</u></a>
としておけば
メール送信１
と表示され、クリックするとメール入力画面が開きます。
（マウスをのせたときに背景が薄青色になるのは別の処理です）
また、"mailto:++++@*******.****?Subject=お問い合せ"としておくと、件名に「お問い合せ」と自動的に入力されています。
さらに、"mailto:++++@*******.****?Subject=お問い合せ&body=お名前：%0D%0Aアドレス：%0D%0Aお問い合わせ内容："とすると、件名「お問い合わせ」と本文に「お名前：＜改行して＞アドレス：＜改行して＞お問い合わせ内容：」など記載できます。
メール送信２
※マウスを乗せると、ステイタスバー（スタートボタンのすぐ上辺り）に
表示が出ます。これでも少し判りますね。
Outlook Express 6 ではうまく起動しましたが、あなたはどうです？
|
