- ベストアンサー
表を作りたい・・
トーナメントのような表? （実は犬のHPを作ろうと思っています、そこで父親の種類、母親の種類・・・というぐあいにしたいのです．。家計図???) をHPにのせたいのです・・・ HTMLの知識も素人同然なので当然のことながらCSSとか分かりません・・・ よってワードとかで作らないといけないんですがなんかずれてしまいます それを画像にしてはるつもりなので・・・ フリーでないですか? やっぱ CSSでないと無理ですよね・・・・ ちなみにテーブルは却下です・・・
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
テーブル却下とありますが、テーブルが面白そうなのでテーブルで作ってみました。 画像で200KB～300KBなんていったら、動画ファイル級になってしまいますね。 ちなみにこのソースですと、約3KBです。 ポイントとしては、まず、１番上の行に祖父母の名前が来るとしたら、その次は２行あけて 父母が入り、その下にはまた２行あけて孫が入るといった感じで作成します。 あけた２行には家計図の線が入ります。 そして、フォントの種類は文字によって幅が変わらないように全てＭＳゴシックに指定（font-family:"ＭＳゴシック";）します。 こうする事によって、家系図の線の部分の幅調整がスペースを入れる事によって等幅にできると思います。 名前の入るセルにはクラス名（class="name"）をつけ、スタイル指定で文字サイズをやや小さめにし、 センタリングする（font-size:15; text-align:center;）ようにします。 あとは文字サイズの指定とセルの幅をうまく調整（font-size:25; width:76;）すればOKだと思います。 ちなみに作ってみたソースはこんな感じです。 <HTML> <HEAD> <TITLE>家系図もどき</TITLE> <STYLE type="text/css"> <!-- TD{ font-family:"ＭＳ ゴシック"; font-size:25; width:76; } .name{ font-size:15; text-align:center; } --> </STYLE> </HEAD> <BODY> <CENTER> <TABLE border="0" cellpadding="0" cellspacing="0"> <TR> <TD class="name">TTT</TD> <TD class="name">MMM</TD> <TD class="name">NNN</TD> <TD class="name"></TD> <TD class="name"></TD> <TD class="name"></TD> <TD class="name">AAA</TD> <TD class="name">GGG</TD> </TR> <TR> <TD> ┃</TD> <TD> ┗━</TD> <TD>━┫</TD> <TD></TD> <TD></TD> <TD></TD> <TD> ┣━</TD> <TD>━┛</TD> </TR> <TR> <TD> ┃</TD> <TD> ┏━</TD> <TD>━╋━</TD> <TD>━┓</TD> <TD></TD> <TD> ┏━</TD> <TD>━╋━</TD> <TD>━┓</TD> </TR> <TR> <TD class="name">DDD</TD> <TD class="name">LLL</TD> <TD class="name">KKK</TD> <TD class="name">QQQ</TD> <TD class="name"></TD> <TD class="name">DDD</TD> <TD class="name">CCC</TD> <TD class="name">BBB</TD> </TR> <TR> <TD> ┃</TD> <TD></TD> <TD></TD> <TD> ┗━</TD> <TD>━┳━</TD> <TD>━┛</TD> <TD></TD> <TD> ┃</TD> </TR> <TR> <TD> ┃</TD> <TD></TD> <TD></TD> <TD></TD> <TD> ┣━</TD> <TD>━┓</TD> <TD></TD> <TD> ┃</TD> </TR> <TR> <TD class="name">VVV</TD> <TD class="name"></TD> <TD class="name"></TD> <TD class="name"></TD> <TD class="name">EEE</TD> <TD class="name">FFF</TD> <TD class="name"></TD> <TD class="name">OOO</TD> </TR> <TR> <TD align="right">┗━</TD> <TD align="center">━━━</TD> <TD align="center">━┳━</TD> <TD>━━━</TD> <TD>━┛</TD> <TD align="center">┃</TD> <TD></TD> <TD></TD> </TR> <TR> <TD align="right"></TD> <TD align="right">┏━</TD> <TD align="center">━╋━</TD> <TD align="center">━┳━</TD> <TD>━┓</TD> <TD align="center">┃</TD> <TD></TD> <TD></TD> </TR> <TR> <TD class="name"></TD> <TD class="name">YYY</TD> <TD class="name">PPP</TD> <TD class="name">ZZZ</TD> <TD class="name">XXX</TD> <TD class="name">WWW</TD> <TD class="name"></TD> <TD class="name"></TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
その他の回答 (3)
- yuizuian
- ベストアンサー率42% (103/245)
＞かなり面倒ではないですか? めちゃめちゃ面倒です。 でも父・母・子くらいなら、画像を使うよりよっぽど軽いですよ。 ＞分割（スライス?)はどのくらいの大きさになったらするべきなんですか? ＞２００～３００KBぐらいですか ＞ちなみにブロードバンドユーザー向けなんですが・・・・ 一般に表示するのに7秒以上かかると「重い」と思われます。 ですから、それ以内に収めれば良いのですが…… 200～300って重過ぎません？（＾＾； ブロードバンドならそう気にする必要も無いかもしれませんが、 大きくても100くらいでしょうか？ 50KBの画像を4分割する辺りから画像分割の本領発揮！と聞いたことがあります。 ただ切って切って～と繰り返していると、結果として分割する前よりも表示に時間がかかってしまう場合もあります。 （サーバとのやり取りが増えすぎるため） 画像を分割する前に、パレット数を減らしたり圧縮したり、 その画像にもっとも適した画像形式を選んだりして画像サイズを見て、 その後分割するかを決めるのが一番良いと思いますよ。
- kaname_s
- ベストアンサー率19% (143/739)
こんばんは。 「表」イコール「テーブル」と受けとめてはいけないんですよね？？ えっと、例えば ポチ ┃ ┣ブチ ┣ジロー ┗ジョン とか、こういうのを書こうとして「ずれてしまう」という事なんでしょうか？？ おつかいのマシンがWinの場合しか解らないのですが、ワードなどでフォントの設定リストを出すと、普通のゴシック・明朝体フォントのすぐ下に「文字サイズが常に均等」なフォントがあると思います、それを使うと文字によるズレは起こらなくなると思うんですが… 的を外していたらすいません。
- yuizuian
- ベストアンサー率42% (103/245)
CSSは全く関係ないと思うのですが… 家計図なら1×1ピクセルの画像（線に使います）を用意して、 テーブルタグが解っていれば作れますよ。 もしそういった使い方をするのでもテーブルタグは使いたくない！というなら、いっそのこと家計図そのものを画像にしてはどうでしょう。 あまりにも大きな画像になるなら、分割すれば良いことです。
お礼
かなり面倒ではないですか? それは考えたのですが・・・ 回答 ありがとうございます・・・ 分割（スライス?)はどのくらいの大きさになったらするべきなんですか? ２００～３００KBぐらいですか ちなみにブロードバンドユーザー向けなんですが・・・・
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
皆様 回答 ありがとうございます