|
|
| S**H2
- Table Tagg Guide - |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |About |Step.01 |Step.02 |Step.03 |Step.04 |Step.05 |Step.06 |Q&A |How to Link |Contact| | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Step.01 -Foundation- まずは一番の基礎となるタグから順番にはじめましょう◎ これを覚えておかないと先には進めないので しっかりとマスターしておきましょう^^*
これだけでテーブルの基礎タグはおしまいです ちなみに、上記のタグだと↓こんな感じになります
さて、上記のタグの意味を補足すると
とまぁこんな感じの意味になります。 さらに補足すると<tr>~</tr>を増やせばテーブルは縦に繋がっていくし <td>~</td>を増やせばテーブルは横に繋がっていくというわけです。 文章だけだとなんのこっちゃ?となる方もいらっしゃると思いますので 実際にやってみましょう^^* + + + + + + + + + + + + + + + + + + + <テーブルを横につなげてみる>
こんな感じになります。 ひとつの<tr>~</tr>の間に<td></td>を入れた数だけ セルは横に繋がっていくということです。 + + + + + + + + + + + + + + + + + + + <テーブルを縦につなげてみる>
とまぁこんな感じになります。 つまり、<tr>~</tr>までの1括りが1段になるというわけです。 要するに<tr>は一段一段のまとまりのことで <td>は一つ一つの小さい部屋(セル)のことです。 どちらかひとつがかけてもテーブルにはならないし タグの中でtrとtdが逆になっても成り立たないと言うわけです。 ここはしっかりと押さえておいてくださいね^^* + + + + + + + + + + + + + + + + + + + + ちょっとここで簡単なテーブル用語(?)をおさらいしておきましょう^^
とまぁ、基礎知識はこれぐらいにして実際にやってみましょう^^ 余談ですが、ネオペットが公開している「HTMLガイド」と上の図は 若干異なっている部分があるので混乱しないようにご注意くださいね^^; ↑TOP↑ Step.02 -Easy change- 基礎タグが把握できた所で、簡単な装飾をしてみましょう^^* ここでは大きさ変更・色変更・線の種類変更をやってみます。 + + + + + + + + + + + + + + + + + + + + <大きさ変更> まずは大きさの指定からやってみましょう。 大きさを指定するにはそれぞれ、セルの縦と横の大きさを指定することが出来ます。 基本のテーブルは以下↓でしたよね?これを基準に変更してみましょう!
●セルがひとつのテーブルの場合●
赤文字で書かれている部分がサイズ指定になります。 「width」が横幅指定で 「height」が縦幅指定です。 ●セルが複数繋がったテーブルの場合●
こんな風に、一つ一つのセルの大きさを指定することも出来るんです。 複数繋がったセルの大きさを変更する時は以下の点に注意してくださいね^^;
この文章だけではわかり辛いと思いますので上から順に説明していきますね。
他の指定(線の種類等)にも支障をきたす場合があるので きちんと数値を確認してください; 最後に4つ目ですが、複数繋がったテーブルはいわば木で作った枠と同じです。 何らかの指定を加えて無理やり力を加えない限りテーブルの縦線と横線は 几帳面に描かれた1本の直線以外にはなりえないのです; 考えてみればあたりまえのことなのですけど、これを理解しているのとしていないのとでは 全く違いますのでよく理解しておいてくださいね^^ + + + + + + + + + + + + + + + + + + + + <色変更> さて、サイズ変更が出来たところで次はテーブルの色を変えてみましょう! このHPは背景が黒なので若干わかり辛いのですが テーブルは本来、何も指定しなければ線に色はついておりません。 ですので色変更は一番簡単で可愛い装飾なんですよ^^* ●セルがひとつのテーブルの場合●
赤文字で書かれている部分が色変更になります。 ここでは「deeppink」と直接色の名前で打ち込んでいますが 他にも16進法の色コードで色指定をすることもできます^^ ●複数繋がったテーブルの場合●
こんな風に<td>要素の中に「bordercolor="色"」を入れることで セルごとに線の色を変えることも出来ちゃうのです^^* 組み合わせによれば綺麗で可愛いと思いませんか? ちなみに、段ごとに色を変えるなんてことも出来ちゃうのです!
こんな感じになります^^* いろいろと試してみてくださいね◎ + + + + + + + + + + + + + + + + + + + + <枠線変更> さて、この章の最後に枠線を変更してみましょう! 枠線変更には2種類あって線の太さを変えるものと線の種類自体を変えるものがあります。 簡単な方から紹介いたしますね^^* ●枠線の太さを変えてみる●
赤文字で書かれている部分が線の太さ指定になります。 結構簡単でしょ? いろいろ試してみてくださいね^^* ●枠線の種類を変える● 今まで枠線の種類を何も指定しなければ勝手に二重線のテーブルになっていましたよね? 実はこの線、いろいろと変更することが出来るのです! 線の種類の一覧表も載せておくのでお好きな線に変更してみてくださいね^^
一本線になったでしょ? このタグを使えば線の種類はもちろん、線の太さや色まで一括して指定で来ちゃうんです! ここでタグにちょっと補足をさせていただきますね^^; まず、タグを見て気づいている方もいらっしゃるかと思いますが、 今までずっと「border=」の後の数字が「1」になっていたのに対し今回は「0」になっています。 これにはちゃんと意味があってまずはその説明をしますね。 そもそも「border=」というのは線の太さ指定でしたよね? 実はこれ、数字を1から上にしないと線が表示されないのです^^; なので今までずっと「1」にしてタグを紹介してきたのですが、 今回は「style=」の中で線の太さも一括して指定できる=「border=」は必要ない ということになりますので今回は「border=」を「0」にしています。 ちなみに、「style=」を使って枠線の指定を行う際には 線の太さ指定「border="数字"」や色指定「bordercolor="色"」は使えません; ちょっとややこしいですが、覚えてしまうと非常に便利なタグですので いろいろと試して慣れてくださいね^^*
↑TOP↑ Step.03 -Characteristic- ここではテーブルタグの持つ特性をご紹介致します^^* 少々難しいかもしれませんが覚えてしまえばかなり便利な特性ばかりですので ぜひ覚えてくださいね◎ + + + + + + + + + + + + + + + + + + + + <テーブルの間隔> タイトルを見ただけでは何のことかわからないですよね; ここまでで紹介してきたタグを使うと 必ずテーブルは外枠と内枠があったのですが その外枠と内枠との間にあるスペースの間隔指定と もうひとつ、内枠とセルの中の文字との間隔指定を紹介させていただきます。 説明を読んでもなんのこっちゃ?という方が多いと思いますので 取り合えずやってみましょう◎ ●外枠と内枠の間隔指定●
ね?間隔が広くなったでしょ? ここではわかりやすいように広く間隔を取ってありますが 実際は「5」ぐらいの方が見やすいかもしれませんね; お好みに合わせて数値をいろいろと試してみてくださいね^^* ●セルと文字の間隔指定●
今度は文字との間隔が広くなったでしょ? 間隔指定のタグはどちらもよく似ているので間違えないように注意してくださいね^^; + + + + + + + + + + + + + + + + + + + + <位置指定> 今度は位置指定をやってみましょう◎ 位置指定とはテーブルの中に入れた文字や画像などの位置を指定するという 文字そのままの意味です笑 早速やってみましょう! ●左寄せ→右寄せ●
テーブルは通常、何も指定しなければ全て左寄せになっています。 赤文字で書かれている部分が右寄せのタグです。 また、「right」を「center」に変えると中央寄せになりますよ^^* 上記↑では位置指定を<tr>の中に入れたので一段全てが右寄せになりましたが もちろん、セルごとに位置指定をする事だって出来ますよ^^ ●セルごとに位置指定をしてみる●
こんな風に「align=位置」を<td>要素の中に入れるだけで セルごとの個別指定も出来るのです^^* 位置指定は左右だけでなく上下も指定することが出来ます。 ●中央寄せ→下寄せ●
こんな感じになります。 テーブルは特に指定していなければ垂直方向に中央寄せになっています。 赤文字の部分が位置指定のタグになります^^* 位置指定のタグは上下と左右、よく似ておりますので間違えないように気をつけてくださいね^^; こちらも当然、セルごとに指定をすることが出来ますよ◎ やり方は左右の指定と同じですので省きますね^^;
上記↑は一覧ですのでよろしければお使いくださいね◎ + + + + + + + + + + + + + + + + + + + + <セルの結合> さて、この章の最後にセルの結合を紹介させていただきます。 テーブルを使った表って何もしないとこんな感じ↓になるんですけど これ↑をセルの結合を使ってこんな風↓にしてみましょう◎ ●左右のセルの結合●
赤文字の部分が結合のタグです。 ちょっとややこしいかもしれませんが、たぶんタグを見ただけでは説明不足だと思いますので 少々補足させていただきますね^^; 今回上記↑では2マス×2マスの表を使っていますのでそれを使って説明致します。 まず「colspan」の後にある数字の「2」ですが、これは結合させたいセルの数です。 今回は横に2マス、結合させましたので「colspan="2"」になっていますが 3マス結合させたければ数字は3になります。 ただし、当然ですが存在しないセルは結合させることが出来ませんのでご注意くださいね; セルを結合させた段は全部セルがひとつになるので<td>はひとつに減ります。 例えば3つのセルのうち、2つを結合させたならその段にセルは2つになるので <td>は2つになるということです。 ●上下のセルの結合●
赤文字で書かれている部分がセルの結合タグです。 こちらも基本は左右の結合と同じですですが タグ中の<td>を減らす場所が変わってきますのでご注意くださいね^^; このタグは結構ややこしいので慣れるまで時間はかかりますが 慣れたらかなり便利です♪ ちょっと応用するとこんな↓レイアウトも思いのまま! 構造が気になる人はソースをどうぞ♪ ↑TOP↑ Step.04 -Development- ここでは「Easy」で紹介した装飾だけでは満足できない方のために さらにワンランク上の装飾をご紹介致します。 ワンランク上といってもそんなに難しくない装飾なので さくさくいっちゃいましょう◎ + + + + + + + + + + + + + + + + + + + + <フィルター> まずはこれ、フィルターからはじめましょう^^* 一概にフィルターといってもいろいろと種類があって、使いこなせるようになるとなかなか便利ですよ! 私も重宝しています^^ ●透過フィルター● 名前の通り、テーブル全体を透過してしまうフィルターです 当HPは背景を黒一色にしてあるため、非常にわかり辛いと思いましたので 変化を見るためにサンプルには背景を指定しておきますね^^; なお、このタグはIEしか反映されません;
背景が濃い色の時や派手な壁紙の時にすごく便利です^^* 数字は100~0までで0に近いほど透過が進み、100に近いほど原色に近くなります。 大体50~70ぐらいがおすすめですよ^^ ●形状フィルター● タイトルだけじゃなんのこっちゃ?って感じですよね^^; 要するに、いろいろな形をしたフィルターってことです(余計わかり辛いですか?汗) 形状フィルターは全部で3種類あって、タグはほとんど同じです。 一部を変えるだけで3つの表情を見せる、面白いフィルターですよ^^ なお、このタグはIEしか反映されません;
見てわかるようにこれは左から右に消えかかっていますよね? これが一つ目です^^* ちなみに、赤文字になっている部分の一番最後、太文字になっている部分の 数字「1」を「2」に変えると丸くフィルターがかかるし 「3」に変えると十字にフィルターがかかります^^ サンプルは後程、下に載せておきますね◎ 少しだけタグの補足をしておきます。 赤文字になっている部分の一部、()中の「opacity=100」はフィルター開始部分の透過度を 「finishopacity=0」はフィルター終了部分の透過度を指定しています。 「0」が完全に透明で「100」が完全に不透明(原色)ということになります^^ もちろん、100や0にこだわらなくても大丈夫ですので お好きな数字に変えてくださいね^^
実はこれ以外にもフィルターを使った様々な装飾方法があるのですが、 説明しだすとキリがないしどんどん複雑になっていくので 一端ここでフィルターはストップします^^; 興味のある方は外部の検索サイトで「テーブル フィルター」などで検索を掛けてみてくださいね^^* + + + + + + + + + + + + + + + + + + + + <テーブルの背景> 今まで一切触れてこなかった背景についてですが、まずテーブルは特に指定がなければ 透過された状態(つまり透明)ということになります。 背景が一色ベタ塗りの場合、特に問題ないと言えばないのですが、 やはり指定しているのとしていないのとでは見栄えもかなり違ってきます^^; ここではテーブルの背景色指定と壁紙指定、壁紙固定を紹介致しますね^^ ●テーブルの背景色指定● まずは一番簡単な背景色指定からいってみましょう!
はい、テーブル全体がピンクになりました^^* ちなみに、これは<table>で背景色指定をしているので いくつセルを増やそうと全て枠ごとピンク一色になってしまいます^^; そこで、一つのセルごとに色を指定してみましょう◎ ●セルごとに背景色を指定●
色指定タグ「bgcolor="色"」を各<td>要素の中に入れることで セルごとの色指定をすることが可能になるわけです◎ <td>要素の中で指定をする場合、セルには反映されますが枠には反映されませんのでご注意くださいね^^; ●1行ごとに背景色を指定●
と、こんな風に<tr>要素の中に「bgcolor="色"」を入れると1行ごとに色指定することが出来ます。 今回もセルの時と同じく、枠に色は反映されません^^; とまぁ背景を一色で指定するだけでもこれだけの変化があるのですが、 壁紙にしちゃうともっといろんな変化があるわけなんです^^* ●テーブルの背景指定● まずは基本、壁紙を貼ってみましょう^^*
こんな感じでテーブルに背景をつけることも可能です。 今回はタイル状の壁紙を使いましたが、固定型の壁紙だって使うことが出来るのですよ! ●テーブルの壁紙固定 - 一列固定 - ●
これで上に一列固定することが出来ました^^* タグの赤文字の中で太文字になっている「top」を「bottom」に変えれば 今度は下一列固定タグになりますのでよろしければお試しくださいね◎ 今度は縦に一列固定してみましょう!
これで左端に縦一列の固定が出来ました^^* 上下の時と同様、タグ中の太文字の「left」を「right」に変えれば 左端一列固定から右端一列固定に変わりますのでこちらもよろしければお試しくださいね◎ ●テーブルの壁紙固定 - 一箇所固定 - ● 今度は一箇所に壁紙を固定してみましょう! 基本のタグは同じで、指定箇所のみ変えるだけで使い回しが出来ますので サンプルは一つだけに致しますね^^; 固定箇所の指定方法については後程表にてご紹介いたしますので◎
今回は右下に固定しましたが全部で5箇所、固定することが出来ますよ^^* タグ中の赤太文字「right bottom」の部分を以下↓の表に従って変更すれば 好きなところに固定することが出来ますよ^^
↑TOP↑ Step.05 -Another usage- こちらの項目ではタイトル通り、装飾とは一味違った小技を紹介致します^^* 覚えておけば便利だし、使い方によってはものすごく素敵なレイアウトも出来るので しっかり覚えておきましょう◎ + + + + + + + + + + + + + + + + + + + + <テーブルの横並べ>
タグだけ見るとなんのこっちゃって感じですよね? 軽く説明すると赤文字の部分がテーブルを横に並べるのに一番重要な部分です。 緑の文字がひとつめのテーブルのタグ、黄色の文字がふたつめのテーブルのタグです。 要するに横並べというのはテーブルの「border=」で指定しなければ線が表示されないという 一つのテーブルの特徴を応用したものなんですよ^^* ちなみに、赤文字の<TD>~</TD>を増やしていけば テーブルは横に2つ、3つ、4つ・・・と繋げていくことも出来ますよ^^ タグはこちら↓ + + + + + + + + + + + + + + + + + + + + <スクロールバーつきテーブル> 通常、テーブルって文章に合わせて上下左右に伸びますよね? このタグを使えば決まった大きさでその大きさ以上に長い文章の場合は スクロールバーが出るのでテーブルの大きさには何の変化もないという素敵な小技です^^* これさえ知っていればレイアウトも思いのまま! 私もいろいろな部分でいっぱい使っています◎
これは縦100×横200のテーブルです。ね?文章が長くてもテーブルのサイズは変わらずにスクロールバーが出てるでしょ?改行していないので若干見辛いですけどサンプルだと思ってご了承ください^^;
これはHPの一箇所にエリアを作っているだけですので テキストエリアと違ってタグが反映されてしまいます◎ 線の種類の部分には「Steo.02 - Easy change -」の中で紹介している 線の変え方のところにある線の種類を参考にしてみてくださいね^^* + + + + + + + + + + + + + + + + + + + + <テーブルの枠線いろいろ> ここで紹介するタグは、複数繋がったテーブルの線を消したり見せたりするタグです。 説明が下手なのでこれだけではなんのこっちゃ?って方も多いはず^^; さっそくやってみましょう! ●テーブルの外枠だけ表示●
赤文字の部分が内側の枠消去のタグです。 一番外にある大きな枠だけ表示されて中のセルを区切っている線だけ消えたでしょ? 「rules」が内側の線を、という意味で「none」が消去というような意味だと思ってくださいね^^ 今回はわかりやすいように色をつけたのですが使い方によっては 素敵なレイアウトになるかもしれませんね◎ ●縦のライン消去●
赤文字の部分が縦のライン消去のタグです。 さっきは内側の枠全てを消しちゃいましたが 今回は隣り合わせのセルを区切るラインだけが消えてるでしょ? ラインは消えていてもタグ上ではセルは4つ存在していることになっているので これも使い方によっては素敵なレイアウトになるかもしれませんね^^* ●横のライン消去●
赤文字の部分が横のライン消去のタグです。 今度は上下のセルを区切る線がなくなっていますよね? これも当然、ラインが消えてもセルは4つ存在していますので 使い方によっては素敵なレイアウトになるかもしれませんね◎ この枠線の表示非表示タグに関して少し補足をしておくと、 <table>要素の中で「border=数字」を使って線の太さを指定しているテーブルでなければ 使うことは出来ません^^; つまり、線の種類や太さを<table>要素の中で「style=」を使って指定している場合 この「rules="○○"」というタグは無効化されてしまうということです。 ↑TOP↑ Step.06 -Application- お疲れ様でした^^* Step.05までは技術的な説明をしてきましたが Step.06ではいくつか、このHPで紹介した技術を使って実際に組んだタグを紹介いたしますね◎ お気に召したテーブルがございましたらご自由にお持ち帰りなさってください^^ + + + + + + + + + + + + + + + + + + + + <応用テーブル>
紹介するのはこれぐらいにしておきますね; テーブルタグは発想次第でいくらでも可愛く変身するのであとはguest様の 思うままにテーブルを組んでいってください^^* ↑TOP↑ -Q&A- こちらではテーブルタグに関するよくある質問をピックアップしてみました 何か疑問がございましたらメニューの「Contact」よりメール画面に飛ぶことが出来ますので お気軽にご連絡くださいね^^* この項目は皆様の質問に応じて少しづつ増えるかもしれません^^; + + + + + + + + + + + + + + + + + + + + 01.テーブルタグってそもそも何? テーブルタグとはHTMLタグの中の1つです。結構使いやすいタグで 例えばレイアウトとして使ったり文章や画像を整理するのに使ったりと 使いこなせればすごく便利なタグですよ^^ 02.テーブルのレイアウトが崩れる! 必ずタグのどこかに原因があります。数値の指定をしている場合は ありえない指定値になっていませんか? 各単語のつづりやスペースなどにミスはありませんか? テーブルが崩れるということは必ずどこかに原因があるので 面倒ですがもう一度タグを見直してみましょう^^; 03.ここにあるタグは自由に使ってもいいの? どうぞ、お好きなだけ使ってやってください^^* ただし、ソースを見てこのHPのレイアウト自体を真似るなどの行為はご遠慮ください^^; 04.説明が難しすぎて結局の所よくわかんない! どこがどうわからないのか、またどういう風にしたいかなどを 明確に記入してご連絡ください^^* 出来る限りご相談に乗らせていただきますので◎ 05.偽フレームってどうやって作るの? 一言で言うとテーブルタグとページ内リンクの応用です。 自分のやりたいHPの形が明らかならその形になるようにテーブルタグを組んで あとは本文を表示させたい場所にスクロールつきテーブルのタグを、 メニューを作りたいところにページ内リンクを使ってメニューを作れば完成です。 はっきりとレイアウトは決まっているけどやり方がイマイチ・・・という方は お気軽にご連絡くださいね♪ 06.どうやったらそんなにすぐにテーブルタグが組めるようになるの? これは慣れですとしかいいようがないです^^; 回数重ねて何をどの要素に入れればどうなるのか、という仕組みを覚えてしまわないことには テーブルタグもそれ以外のタグも自由に扱うことはできませんしね^^; ただタグをコピーして使うだけでなく、少しづつ自分で組んでみるといいですよ^^ 07.表ってどうやって作るの? 表についてはまずHTMLガイドをご覧ください◎ HTMLガイドを見てそれ以上の表を作りたい、またはよくわからなかったという方は メールにてご相談くださいね^^* HTMLガイドへはこちらからどうぞ→*Click Here* ↑TOP↑ -About Link- 当HPは完全リンクフリーとなっております。 当HPを気に入ってくださった方や少しでも便利だと思ってくださった方、 もちろんリンク集のリンク先を増やしたい方など 貼るも剥がすもご自由にどうぞ^^* その際にご連絡は特に必要ないですが、一言でもご連絡をいただけると 喜んで遊びにいかせていただきます笑 なお、相互リンクは募集しておりませんので相互の申請はお控えください^^; この素敵なバナーはamane_12345様に作っていただきました^^* お忙しいのに無理言ってしまってすみませんでした^^; 本当に感謝しております!
-MINI Link- 無断リンクばかりですが、どこも素敵なHPばかりですので ぜひ一度足を運んでみてください^^* HPを作るためにとても役に立つHPばかりですよ^^
↑TOP↑ -Contact- 当HPはテーブルに限定してタグの説明をさせていただいています。 HP内のタグに誤りがある場合や表現がよくわからないなど ご意見・ご感想・誤字脱字報告などお気軽にご連絡くださいませ^^* また、タグに関する質問も受け付けておりますので テーブルタグで何か不明な点などございましたらいつでもご連絡くださいね◎ 出来る限りご協力させていただきますので♪ kaede1020へ連絡する?→
↑TOP↑ |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
...Count Start : 06'05'30 Material by : Sky Ruins ... Thanks!!! |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||