~戻る

ホームページデザイン/レイアウトテーブルタグ
投稿者:ゆ
GRHRDTyMQik

┏━━┳━━━━━┳━━━┓
┃  ┃  文字 ┃   ┃
┃画像┣━━━━━┫MENU ┃
┃  ┃流れる文字┃   ┃
┣━━┻━━━┳━┻━━━┫
┃ 文字   ┃     ┃
┃      ┃ 画像  ┃
┗━━━━━━┻━━━━━┛

をやりたいのですが
何度やってもうまく
いかないです漣、

わかる方教えて
ください煉ォ



2/10^17:51[削除][コピー]
ドコモ SH703i
[レスをする]
[最新順][古い順]
[13]B
JNuBTATIBWI

>>[12]
いや、どうせダミー区画作るなら端に集中、
それから、最小公倍数の区画にする点は、どの場合でも一般的に適用可能、
と思ったこともあってレスしたんだけど、
[1]もうまく出来きてたと思います。

ちなみに[4]の
「最大公倍数」は
「最小公倍数」の間違いです。すみません。


2/14^02:07[削除][コピー]
PC Mozilla
[12]すご(*^o^*)~
583ffoM8Fbw

そうやってつくるんですね☆
バランス的に[3]です!
[1]は消していきま〜す。


2/12^23:54[削除][コピー]
EZ W53CA
[11]ゆ
GRHRDTyMQik

親切にありがとう
ございましたミ

ためしてみますミ


2/11^23:37[削除][コピー]
ドコモ SH703i
[10]B
JNuBTATIBWI

[3]のタグの場合、テーブルの最下部に、[4]で説明した「ダミー区画」があるので、どうしても下の枠が余計になります。
<table border="0" cellspacing="0">
にしとけば多分大丈夫。

ところで、[9]のような配分にして、かつ、枠線一切無しなら、↓のような感じですね。
各区画の幅は表示されている文字や画像に応じて決まってくるので、特に数値を入れた幅指定はしていません。
<table border="0" cellspacing="0"><tr><td align="center" rowspan="2">画像タグ</td><td align="center">文字</td><td align="center" rowspan="2">MENU</td></tr><tr><td align="center">流れる文字のタグ</td></tr><tr><td align="center" colspan="2">左下の文字</td><td align="center">画像タグ</td></tr></table>


2/11^23:31[削除][コピー]
PC Mozilla
[9]ゆ
GRHRDTyMQik

画像の割合でいくと

┏━┳━━━━┳━━━━━┓
┃ ┃WELCOME!┃ MENU  ┃
┃画┃    ┃PROF DAYS┃
┃像┣━━━━┫REAL 1000┃
┃ ┃流れる字┃BBS! APPE┃
┃@┃    ┃LINK MAIL┃
┣━┻━━━━╋━━━━━┫
┃〇〇〇〇〇 ┃     ┃
┃〇〇〇〇〇〇┃ 画像A ┃
┃〇〇〇〇〇〇┃     ┃
┗━━━━━━┻━━━━━┛


こうしたいです!
枠はまったく無しでォ

[3]の通りにしたところ

┏━┳━━━┳━━━┓
┃画┃文字@┃   ┃
┃像┣━━━┫MENU┃
┃@┃流れ字┃   ┃
┣━┻━━━╋━━━┫
┃ 文字A ┃画像A┃
┗━━━━━┻━━━┛
└─────────┘

細い枠が下にズレて
でているのですが何か
いけなかったのでしょうか・


2/11^16:14[削除][コピー]
ドコモ SH703i
[8]B
Zu04ohxX.AQ

枠線らしきものがまったく無しでいいなら、[3]のタグの出だしの
<table border="1"> を
<table border="0" cellspacing="0"> に。

下の段の区画の幅調整ですが、下記のAのように右端区画の左端が縦一直線に揃う感じであれば[3]のタグよりうんと単純なタグになりますが、

┏━━┳━━┳━━┓
┃  ┣━━┫  ┃
┣━━┻━━╋━━┫
┃     ┃  ┃
┗━━━━━┻━━┛

下記Bのようにズレがあるとまたまた複雑ですが、やりたいのはどっちてすか?

┏━━┳━━┳━━┓
┃  ┣━━┫  ┃
┣━━┻━┳┻━━┫
┃    ┃   ┃
┗━━━━┻━━━┛

今から忙しくなるのですぐにはレス出来なくなります。


2/11^15:30[削除][コピー]
ドコモ SH903i
[7]ゆ
GRHRDTyMQik

再びすみませんォ
枠は消せますかィ
あと下の部分の

┏━━━━┳━━┓
┃ 文字 ┃画像┃
┗━━━━┻━━┛
このぐらいの割合に
したいのですがォォ


2/10^23:27[削除][コピー]
ドコモ SH703i
[6]ゆ
GRHRDTyMQik

Bさん詳しい説明
本当にありがとう
ございます

ちさんもありがとう
ございましたマ!!

Bさんがつくって
下さったタグで
やってみたいと
おもいますニ

うまくできなければ
またアドバイス
お願いしますニ

本当にありがとう
ございました


2/10^23:07[削除][コピー]
ドコモ SH703i
[5]B
QerzG0gR9vI

すみません。
構造上つじつまあわすという点では、[1]の下の方に書いてあるようなテーブルもアリでしたね。
ただ、区画の幅のバランス的にどうでしょうか?

ゆサン、
混乱させてすみません。
[2]のようなテーブルにするなら、
[3]のテーブル中の
colspan="2" を全部削除して、
<tr><td align="center">流れる文字</td></tr>の直後に</table>を入れて、その後ろは全部削除。
これで出来ます。


2/10^22:02[削除][コピー]
PC Mozilla
[4]B
QerzG0gR9vI

ここはタグを作るだけの場ではないので関心のある人が後から見た時のために【補足説明】を追加しておきます。

★テーブルの上半分は、真ん中だけ2段組。左右は2段分の高さで1区画ですね。
この場合、左と右の区画を2段抜き指定にします(rowspan="2")。
その場合、2つめの<tr>〜</tr>の中には、流れる文字の入る区画だけを記述します。
つまり、次のようにAの部分だけを2段目と見なします。

┏━━━┳━━━┳━━━┓
┃@段目┃@段目┃@段目┃
┃   ┣━━━┫   ┃
┃   ┃A段目┃   ┃
┣━━━┻━┳━┻━━━┫
(下は略)

★テーブルの上半分は横に3区画、下は横に2区画。
こういう場合は、最大公倍数の6区画からなるテーブルにします。[3]のタグの末尾で、一見無駄そうな段(<tr>〜</tr>)があり、その中に<td></td>が6個入っているのは、構造上つじつまを合わせるためのダミー区画です。
その上で、上の方は1区切りの幅を2区画分にして(colspan="2")、下の方は1区切りの幅を3区画分にします(colspan="3")。
┏━┳━┳━┓
┃2┃2┃2┃
┣━┻┳┻━┫
┃3 ┃ 3┃
┣┳┳╋┳┳┫
┗┻┻┻┻┻┛
もともとが6区画並びだということになっていないと、上記のような考え方はできないので、一番下にダミー区画を作ってやります。
(ただし、枠線等の設定次第では、ダミー区画がくっきり出てしまうかも知れません)。

(例えば上が4区画、下が2区画、みたいに割り切れる場合は、ダミー区画は必要ありません)。


2/10^21:05[削除][コピー]
PC Mozilla
[3]B
QerzG0gR9vI

失礼します。上半分と下半分とで横に並ぶ区画の数が違いますが、構造上のつじつまを合わせる工夫をすれば、できます。

テーブルの細部(色や枠など)は後回しにして、とりあえずテーブルの基本構造は次のような感じです(区画内の表示位置はとりあえず全て中寄せにしてあります)。

<table border="1"><tr><td align="center" colspan="2" rowspan="2">画像</td><td align="center" colspan="2">文字</td><td align="center" colspan="2" rowspan="2">MENU</td></tr><tr><td align="center" colspan="2">流れる文字</td></tr><tr><td align="center" colspan="3">左下文字</td><td align="center" colspan="3">画像</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>

これをどう貼るかですが、
@メニュー部分をリンクタグ(メニュータグ)でやっている場合は、上記タグ中のMENUの部分にリンクタグを代入。

Aコーナー設置してトップページに表示されているのを生かす場合は、
1)コーナー間コメントを2つ作って以下のように配置:
コーナー間コメント1
コーナー
コーナー
・・・
コーナー間コメント2

2)
・コーナー間コメント1に、上記タグのMENUの前までを入力。
・コーナー間コメント2に、上記タグのMENUより後の部分を入力。
(両方とも、表示指定なし、改行なしに設定しとけばいいでしょう。テーブルの下に少し空白が欲しければ、コーナー間コメント2だけ「改行直後」でもいいですね)。

【補足】
★上記タグ中の「流れる文字」の部分は、<marquee>タグだけで作って下さい。
(流れる文字自体がテーブルにしなくてはならないと思っている人があるようですが、上記タグ中の「流れる文字」のところにテーブルタグを入れちゃうと、テーブル内テーブルになってしまい不具合が起こります。


2/10^20:45[削除][コピー]
PC Mozilla
[2]ゆ
GRHRDTyMQik

┏━┳━━┳━━┓
┃画┃文字┃MENU┃
┃像┣━━┫MENU┃
┃ ┃流れ┃MENU┃
┗━┻━━┻━━┛
これの作り方
教えて下さいォ


2/10^20:31[削除][コピー]
ドコモ SH703i
━━━━━━━━━┓
@peps!でホムペ作成ァ
┗━━━━━━━━━┛

★@peps!姉妹サイト★
(全部無料>(^o^)y
リアル!日記!ブログ!はココ!
激アピ!最強プロフィール
大人気!超簡単リンク集!

~戻る
Copyright(c)2024
@peps! byP-Nest Japan