ｈｔｍｌタグを覚えよう！(中級編)

ここで紹介するタグは複雑で面倒くさいものが多いですが、
覚えることが出来れば、ＨＰを綺麗にカッコよく仕上がりますよ。
・テーブルタグ　　　・画像(イメージ)タグ

〜テーブルタグ〜
表組を形成するタグです。このタグを使いこなせば、綺麗で
見やすいレイアウトにすることが出来るでしょう。
<table 〜〜〜>〜〜〜</table>
〜〜〜の部分に"テーブルを使う"という定義です。
この部分に<tr></tr>と<td 〜〜〜></td>を組み込んで表を作ります。
<tr>〜</tr>で囲まれた部分が表の横１列の段落になり、
その中を<td>〜</td>で囲んだ範囲が１つの枠になります。
〜〜〜，〜〜〜の部分に以下の項目を追加出来ます。
border　テーブルに枠線を付けます。
border="数値"　テーブルの枠線の高さを決めます。
width="ピクセル数or％"　テーブルの幅を決めます。
bgcolor="色コード"　テーブル内の背景色を決めます。
cellspacing="数値"　テーブルの枠線の太さを決めます。
cellpadding="数値"　テーブルと文字の感覚の幅を決めます。
width="ピクセル数or％"　その枠の幅を決めます。
bgcolor="色コード"　その枠内の背景色を決めます。
colspan="数値"　その枠が横の段落をまたぐ数を決めます。
rowspan="数値　その枠が縦の段落をまたぐ数を決めます。
※<td>の代わりに<th>を使うことが出来ます。
　<th>は<td>の効果＋中央寄せ＋太字になります。
※色コードとピクセルor％についてはこちらを参照にして下さい。
※追加する項目の間には半角スペースを入れて下さい。
こんなふうに入力しよう！
テーブルタグは言葉で説明するが難しいので、下に実例を出しました。
参考にして下さい。コピーして持って帰って使ってもいいですね。
　　　　↓文字を枠で囲む↓

閉じ込められた！
　　　　↓タイトルを作る↓

タイトルっぽくなるかな？
　　　　↓段組を作る↓

このように
枠線を見えないようにすれば		段組を作ることも
出来ます
　　　　↓表を作る↓

順位曲　名歌　手　名
１位ｍａｎｕａｌ下手田ウレル
２位ギリギリババチョップＤ'ｚ
３位ｅｂｉｆｌｙＳＷＡＰ
　　　　↓メニューを作る↓

macha's worldミニメニュー
ゲーム人気投票に参加しよう!ドリキャス最新情報
ＤＣセーブデータを無料で配布他のＤＣユーザーのＨＰが見たい
　　　　↓テーブルの中にテーブルを↓

こんな感じです
テーブルの中にテーブルを入れると
少し重くなるので注意しましょう。
　　　　↓工夫次第でこんなレイアウトも↓

３　階階


段
２　階
１　階
地下駐車場

〜画像(イメージ)タグ〜
画像を貼るタグです。ＤＣでＨＰを作る場合これが一番の問題点です。
ＤＣでは基本的に自分で画像を作って、ＨＰにアップすることは
出来ません。ではどうすればいいかをここで説明します。
(１)フリー素材を見つけよう！
背景・アイコン・ボタン等、いろいろな画像を提供しているサイトが
ネット上にはたくさんあります。macha's worldのリンク集や
GOO、YAHOO等の検索サイトで探してみるといいですよ。
↓気に入った画像が見つかったら・・
(２)ファイルネームを知ろう！
ＤＣユーザー向けの素材集のページなら、あらかじめファイルネーム
が表記されていますが、それ以外の素材屋さんのページだと
ファイルネームは記載されていません。その場合は
Lycosメールを使った方法を下記に載せたので参考にして下さい。
１, まず欲しい画像をパッドのＸ＋Ａボタンを押してＶＭの保存します
２, 次にweb上のフリーメール、Lycosメールを借りましょう！
　 ここは無料でメールアドレスがもらえ、非常に便利な所ですよ。
３, 借りたらそこに保存した画像を添付してメールを送ります。
４, Lycosメールにログイン(フレームなし)してメールを開きましょう
５, 下の方に「ダウンロード」という所があるのでそこを押します。
６, そして添付した画像を選択すると、その画像が表示されます。
７, そこでパッドのＲトリガーを引き「しおりに追加」を選びましょう
８, そうすれば画像のURLが表示されるのでそれをコピーします。
９, そのURLをトランスローダーのSource URL部分にペーストします
　 詳しくは下のトランスローダーの使い方を参照にしてね！
↓ファイルネームがわかったら・・
(３)画像を自分のサーバーに保存しよう！
その画像をコピーして、自分のＨＰスペースに保存しましょう。
ＤＣではトランスロードというものを使って保存します。
１,まずはトランスローダーのページに行きましょう。
　 行くと、いろいろ記入する所が出てきます。
　 ↓に記入部分の説明を書きましたんで、参考にしてください。
＜Source URL＞の部分に欲しい画像のアドレスを入力します。
http://〜〜〜/〜〜.jpg といったかんじで
＜Rename to＞の部分にはどんな名前で保存するかを決めます。
※拡張子(〜〜〜.gifの"gif"の部分等)は同じにしましょう。
＜Target FTP server＞の部分に自分のＨＰのサーバー名を
入れましょう。 ジオシティーズの場合＝「ftp.geocities.co.jp」
クールの場合＝「都市名.cool.ne.jp」をそれぞれ入れればOKです。
＜Target Account＞の部分には自分がファイルエディターに入る
時に使うアカウントを入れます。
＜Target Password＞の部分には自分のパスワードを入れます。
※↑の部分の他にも入力できる所がいろいろありますが、
他の部分には何も入力しないでいいです。
２,入力が済んだら下の方にある「transloadr」のボタンを押します。
　 すると「今トランスロードしてます」というページになります。
　 ここでは何もしないで待ちましょう、自動的に次ページに飛びます
３,次のページはトランスロードの結果報告になります。
　 成功した場合は"UPLORD:〜URL〜"と表示されます。
　 失敗した場合は"Error"とエラー内容が表示されます。
　 深夜(テレホタイム)等で報告ページが最後まで表示されない時は、
　 プラウザの「再読込み」をしてみてください。
トランスローダーを使うとパスワードが外部にもれる恐れがあるので、
使い終わったらパスワードを必ず変更するようにしましょう!!
※トランスローダーに関する質問などは掲示板またはメールまでどうぞ
↓ではいよいよ画像を貼りましょう・・
<img src="ファイル名" 〜〜〜>
画像を置くタグです。〜〜〜の部分に以下の項目を追加できます。
width="ピクセル数or％"　画像の横幅を決めます。
height="ピクセル数or％"　画像の縦幅を決めます。
alt="好きな文字"　画像が表示される前の代理テキストです。
border="数値"　画像の外線の太さを決めます。(通常は"1")
※画像サイズ(widthとheight)は必ず設定しましょう。
　設定しないと読み込みに時間がかり重くなる恐れがあります。
※ピクセルor％についてはこちらを参照にして下さい。
※追加する項目の間には半角スペースを入れて下さい。
こんなふうに入力しよう！
画像の貼りかたの実例を出してみました。参考にしてください。
　　　　↓画像を貼ってみよう↓

　　　　↓クリックするとジャンプします↓

macha's world
　　　　↓画像のとなりに文を↓

このようにテーブルタグを使えば、
画像の隣に文章を入れる事が可能です。
<body background="ファイル名" 〜〜〜>
画像を背景に使うタグです。壁紙等の素材はこのタグを使って、
貼ります。〜〜〜の部分はテキストの色等を決めます。

ホームページ制作に関する質問・疑問・意見等は
掲示板またはメールまで気軽にどうぞ。

・ｈｔｍｌタグを覚えよう上級編へ
・ＤＣでＨＰを作ろう！に戻る　・ワールドマップに戻る
Click Here !