2004.12.08
カテゴリ： カテゴリ未分類
ガクテンオーッ！！スパイラル～～～……ダッシャァ――――ッ！！！（挨拶）
メルシ～♪
というわけで、何気に昨日の日記、いろいろな方にお役に立てたようで嬉しいですねｗ
コメントを書いてくださった皆様、この場を借りて感謝いたしますm(_ _)m
「そなたらに感謝を」
で、最初から予定に組まれていたのでタグ講座Ｖｏｌ．２です。
今回はテーブルタグ説明の第二弾！少し高度になってきます。ですができるだけ分かりやすく説明を心がけますので…。
テーブルタグ講座は全部で３回あります。この３つともマスターできるようになれば僕のトップぐらい簡単に作れるでしょう。
センスのある人なら僕以上のＴＯＰなんて簡単に作成できるはずです（僕は「も～う～ダ～メ～ポ～…」）
いろいろな諸注意などは昨日の日記を見てください。
昨日の日記を見ていることを前提で書き込みしますので…。よろしくお願いします。
■テーブル （中級編）■
まず昨日の基本をマスターしてください。あれが何も見ないで作れるようになってないとかなり厳しいかと思われます。
これらの日記は『ＨＴＭＬタグ』ページのテーブルのところにリンクを貼りますので、
覚えたらそこからこの日記へ飛んでみるのもいいかもしれません。
今回はテーブルの作成もかねますが、テーブルの仕組みというものも説明します。
本格的にトップページが作りたい、という方は仕組みまでちゃんと覚えた方がいいものが作成できます。
ではまずテーブルの軽い仕組みから…。
という昨日の基本形のテーブルはもう分かりますね？
基本的にテーブルというものは、 『Tableタグの大きさ＞TR列のTDの大きさ』 とするのが基本です。
つまり、Tableタグで確保したwidthが300ならば、その中のtr列のtdのwidthは300以下の必要があるんです。
中一つのTDの大きさが100×50（縦・横３等分）となっています。
では最初のTDだけを限界を超えるように200に設定してみるとどうでしょう？
このように大きくしたTDだけが優先されるようになります。
さて…実はこのテーブル、大きくしたのはTD1-1だけなんです。それ以外の同じ行のTD2-1、TD3-1は100のままです。
このように、テーブルの大きさは全て 『大きい方が優先される』
ですが実はそれは『見た目』だけだったりします。実は上記のテーブルに文字をいろいろ打ち込んでみると…。
書いてあることは気にしてはいけません（爆）。
で、最初のTD1-1の場所にある『ＫＫＫ（以下略）』とその下のTD2-1、TD3-1の『ＲＲＲ&ＳＳＳ（以下略）』の違いが分かりますか？
よく見ると分かるはずです。TD1-1以外の下が２つとも途中で切れて改行されてしまっているのが。
あれが『見た目だけ』の理由です。上のTD1-1はwidthの大きさが200になっていますから、そのTD1-1だけ
ちゃんと全て端まで書くことができます。ですがその下の２つはwidthが100の場所までしか書けないんです。
つまりの囲いに騙されるなということですよ。で、気付いた方はなかなか鋭いですが、
他にもTableのwidthをtdのwidthが超えると異常が発生します。
それは実際に 大きくしたサイズにtdがなっていない ということ。
最初にTableタグのwidthの大きさは300といいましたよね？で、TD1-1はサイズ200に設定。
200になっているように見えます？どう考えても半分の150にさえ行っていないでしょう？
つまりwidthがもはや分からない未知数の数字になってしまうんです。上のテーブルのTD1-1の場所の見た目のwidthの大きさは
僕にも分かりません。まぁ…実際147ぐらいでしょうか。
なので基本として、よほどタグに自信が無い限りは必ず Tableのwidthやheightを中のtdが超えないようにしましょう。
追加として、中のtdの大きさの合計が、Tableの大きさよりも小さくなっているというのも避けてください。
つまり、Tableのwidthが300なのに、中の合計tdの横幅widthが250しかないとか…。
あれでも同一のエラーが発生します。こちらも注意してください。
最初のtdの大きさを200にしたら、そのあとのtdをちゃんと50・50などにするなどして、そろえるようにしてください。
さて…次は 作成 の方に入ります。
こちらのページ⇒ ■ を見てください。
今でさえ画像を消してしまったので少し編になっていますが、これは僕の旧トップページです。
このページの左側を題材にしてみようと思います。（ここでは少し小型化します）
まだテンプレートは完成していないので確実なものは作成できませんが、実はこれは３つのテーブルが合体したものです。
１．
２．
３．
という３つの大きなパーツによって成り立っています。実はあれ、結構作るの簡単なんですよ？（笑）
これを 全てより一回り小さいテーブル …まぁ…つまり、
というテーブルの中に入れてしまいます。すると…
ほら。僕の全トップの左側が完成したでしょう？簡単なんですよ。
だから自分自身では今の僕のトップでさえ全然すごいとは自分では思いません。簡単なのですから（苦笑）。
こんなものなんですよテーブルなんていうものは。無理に結合なんかして失敗している人もいるみたいですが、
そんなもの使わなくても最後に一番外側のテーブルをborder="0"にすれば消えますしね。
こんな風に。あとは中にbgcolorやbackgroundを追加するとか、スクロールを作成してみたりとか…。
そこらへんは作成する人のセンスや構成によります。そこは自分自身の力で。
だからどんな風にトップを作成するかを紙なんかに書いたらあとはどんな感じでテーブルを使えばいいか考えるだけです。
だから簡単なんですよ。僕のテンプレートなんて無くても簡単に作成できるはずです（説明さえされれば）。
みなさんも頑張ってテーブルを使いこなしてくださいねｗ
■テーブル （中級編） 終了■
あとはオマケいろいろ。
格闘ゲーム『φナル・アプローチ』
ふ……古すぎる…何年前だよコレ…（オトメットにて）
とりあえずいいんじゃない？（デスノートより）
メルシ～♪
というわけで、何気に昨日の日記、いろいろな方にお役に立てたようで嬉しいですねｗ
コメントを書いてくださった皆様、この場を借りて感謝いたしますm(_ _)m
「そなたらに感謝を」
で、最初から予定に組まれていたのでタグ講座Ｖｏｌ．２です。
今回はテーブルタグ説明の第二弾！少し高度になってきます。ですができるだけ分かりやすく説明を心がけますので…。
テーブルタグ講座は全部で３回あります。この３つともマスターできるようになれば僕のトップぐらい簡単に作れるでしょう。
センスのある人なら僕以上のＴＯＰなんて簡単に作成できるはずです（僕は「も～う～ダ～メ～ポ～…」）
いろいろな諸注意などは昨日の日記を見てください。
昨日の日記を見ていることを前提で書き込みしますので…。よろしくお願いします。
■テーブル （中級編）■
まず昨日の基本をマスターしてください。あれが何も見ないで作れるようになってないとかなり厳しいかと思われます。
これらの日記は『ＨＴＭＬタグ』ページのテーブルのところにリンクを貼りますので、
覚えたらそこからこの日記へ飛んでみるのもいいかもしれません。
今回はテーブルの作成もかねますが、テーブルの仕組みというものも説明します。
本格的にトップページが作りたい、という方は仕組みまでちゃんと覚えた方がいいものが作成できます。
ではまずテーブルの軽い仕組みから…。
| TD1-1 | TD1-2 | TD1-3 |
|---|---|---|
|
TD2-1
|
TD2-2 | TD2-3 |
|
TD3-1
|
TD3-2 | TD3-3 |
という昨日の基本形のテーブルはもう分かりますね？
基本的にテーブルというものは、 『Tableタグの大きさ＞TR列のTDの大きさ』 とするのが基本です。
つまり、Tableタグで確保したwidthが300ならば、その中のtr列のtdのwidthは300以下の必要があるんです。
中一つのTDの大きさが100×50（縦・横３等分）となっています。
では最初のTDだけを限界を超えるように200に設定してみるとどうでしょう？
| TD1-1 | TD1-2 | TD1-3 |
|---|---|---|
|
TD2-1
|
TD2-2 | TD2-3 |
|
TD3-1
|
TD3-2 | TD3-3 |
このように大きくしたTDだけが優先されるようになります。
さて…実はこのテーブル、大きくしたのはTD1-1だけなんです。それ以外の同じ行のTD2-1、TD3-1は100のままです。
このように、テーブルの大きさは全て 『大きい方が優先される』
ですが実はそれは『見た目』だけだったりします。実は上記のテーブルに文字をいろいろ打ち込んでみると…。
| ＫＫＫ：きっときっと楓ちゃん | TD1-2 | TD1-3 |
|---|---|---|
|
ＲＲＲ：ランランリンちゃん
|
TD2-2 | TD2-3 |
|
ＳＳＳ：好き好きシアちゃん
|
TD3-2 | TD3-3 |
書いてあることは気にしてはいけません（爆）。
で、最初のTD1-1の場所にある『ＫＫＫ（以下略）』とその下のTD2-1、TD3-1の『ＲＲＲ&ＳＳＳ（以下略）』の違いが分かりますか？
よく見ると分かるはずです。TD1-1以外の下が２つとも途中で切れて改行されてしまっているのが。
あれが『見た目だけ』の理由です。上のTD1-1はwidthの大きさが200になっていますから、そのTD1-1だけ
ちゃんと全て端まで書くことができます。ですがその下の２つはwidthが100の場所までしか書けないんです。
つまりの囲いに騙されるなということですよ。で、気付いた方はなかなか鋭いですが、
他にもTableのwidthをtdのwidthが超えると異常が発生します。
それは実際に 大きくしたサイズにtdがなっていない ということ。
最初にTableタグのwidthの大きさは300といいましたよね？で、TD1-1はサイズ200に設定。
200になっているように見えます？どう考えても半分の150にさえ行っていないでしょう？
つまりwidthがもはや分からない未知数の数字になってしまうんです。上のテーブルのTD1-1の場所の見た目のwidthの大きさは
僕にも分かりません。まぁ…実際147ぐらいでしょうか。
なので基本として、よほどタグに自信が無い限りは必ず Tableのwidthやheightを中のtdが超えないようにしましょう。
追加として、中のtdの大きさの合計が、Tableの大きさよりも小さくなっているというのも避けてください。
つまり、Tableのwidthが300なのに、中の合計tdの横幅widthが250しかないとか…。
あれでも同一のエラーが発生します。こちらも注意してください。
最初のtdの大きさを200にしたら、そのあとのtdをちゃんと50・50などにするなどして、そろえるようにしてください。
さて…次は 作成 の方に入ります。
こちらのページ⇒ ■ を見てください。
今でさえ画像を消してしまったので少し編になっていますが、これは僕の旧トップページです。
このページの左側を題材にしてみようと思います。（ここでは少し小型化します）
まだテンプレートは完成していないので確実なものは作成できませんが、実はこれは３つのテーブルが合体したものです。
１．
八重樫つばさ
白河ことり
２．
沢木椿
鑑純夏
３．
| 速瀬水月 |
|---|
| アルクェイド |
という３つの大きなパーツによって成り立っています。実はあれ、結構作るの簡単なんですよ？（笑）
これを 全てより一回り小さいテーブル …まぁ…つまり、
| 上記テーブル：１ |
|---|
| 上記テーブル：２ |
| 上記テーブル：３ |
というテーブルの中に入れてしまいます。すると…
八重樫つばさ
白河ことり
沢木椿
鑑純夏
| 速瀬水月 |
|---|
| アルクェイド |
ほら。僕の全トップの左側が完成したでしょう？簡単なんですよ。
だから自分自身では今の僕のトップでさえ全然すごいとは自分では思いません。簡単なのですから（苦笑）。
こんなものなんですよテーブルなんていうものは。無理に結合なんかして失敗している人もいるみたいですが、
そんなもの使わなくても最後に一番外側のテーブルをborder="0"にすれば消えますしね。
八重樫つばさ
白河ことり
沢木椿
鑑純夏
| 速瀬水月 |
|---|
| アルクェイド |
こんな風に。あとは中にbgcolorやbackgroundを追加するとか、スクロールを作成してみたりとか…。
そこらへんは作成する人のセンスや構成によります。そこは自分自身の力で。
だからどんな風にトップを作成するかを紙なんかに書いたらあとはどんな感じでテーブルを使えばいいか考えるだけです。
だから簡単なんですよ。僕のテンプレートなんて無くても簡単に作成できるはずです（説明さえされれば）。
みなさんも頑張ってテーブルを使いこなしてくださいねｗ
■テーブル （中級編） 終了■
あとはオマケいろいろ。
格闘ゲーム『φナル・アプローチ』
ふ……古すぎる…何年前だよコレ…（オトメットにて）
とりあえずいいんじゃない？（デスノートより）
お気に入りの記事を「いいね！」で応援しよう
...
歌月夜
さん
デスノート萌え～(違
(2004.12.08 21:02:56)
ふぇ？
うたまる3276
さん
こんな話デスノートにありましたっけ？
(2004.12.08 21:39:45)
こんにちゎ。
淕 0621
さん
おぉ～
†隼人†
さん
すごいですねぇ・・・、タグ講座。
すごくわかりやすく説明されてますね!!
僕には理解できないタグですが・・・（ﾏﾃ
３回目はどうなるか楽しみですね・・・ｗ
楽しみにしてます（＾＾ (2004.12.09 19:50:46)
すごくわかりやすく説明されてますね!!
僕には理解できないタグですが・・・（ﾏﾃ
３回目はどうなるか楽しみですね・・・ｗ
楽しみにしてます（＾＾ (2004.12.09 19:50:46)
すげぇ～ｗ
アルク0201
さん
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
