- ベストアンサー
DreamWeaverMXでセルのサイズを固定したいのですが
DreamWeaverMXと奮闘し始めて1週間で、なんとかDreamWeaverでできること、メリットが見えてきましたが、どうも頭を悩ませているのが、テーブルです。 テーブルのセルのサイズをきちんとピクセル指定してても少し関係ないところのセルのサイズを変更すると、すぐに全体のサイズまで変わってしまいます。 ちょっとこれは表現しにくいのですが、 つまり理想は、ちょっとやそっとじゃテーブル、セルのサイズが変更されないようにしたいと思っています。 いまだにレイアウトビューと、スタンダードビューの使い分けのメリットが見えてこないのですが、テーブルについてアドバイスをお願い致します。 ちなみにレイヤーを使用しているサイトというのは思ったより少ない気がしますが、なぜ皆さんレイヤーをもっと使わないのでしょうか。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
普通のHTMLだけでは、厳密にセル幅のテーブルを指定してもサイズが思うように反映されません。よってスタイルシートを使用しましょう。 まず、スタイルシートを設定しましょう。 <head>～</head>の間に <style type="text/css"> <!-- table { width:500px; } .td01 { width:300px; } .td02 { width:150px; } .td03 { width:50px;} //--> </style> と指定します。注意点は、テーブルのサイズ500pxと、セルの合計幅が同じようになるように指定しなければなりません。この場合3つのセルの幅の合計が500pxになるように設定しています。 次にタグの指定は以下のようになります。 <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="td01">300px幅</td> <td class="td02">150px幅</td> <td class="td03">50px幅</td> </tr> </table> となります。 こすることによって、精密なセル幅を指定できます。 しかし、注意点があります。いくらスタイルシートで厳密な幅を指定しても、その幅を超える画像など入れたら崩れます。また、TDにnowrapなど、W3Cの非推奨要素タグを入れた場合など注意しなければなりません。よって、完全なレイアウトを目指すようなら、すべてにおいてスタイルシートをを使用することをお勧めします。全てスタイルシートを使用し、非推奨要素は使用しないレイアウトを目指しましょう。 また、レイアウトでテーブルを使用することは私はなるべく避けるようにしています。 私の場合は、おっしゃる通り、レイヤー機能を使用しデザインしています。この場合のレイヤー機能とは<Layer></Layer>ではなく、Dreamwaverでは簡単にできるスタイルシート（position）を使用したレイヤー機能です。便利ですよね。 確かにレイアウト全体でレイヤーを使ったサイトは少ないですが、所々、レイヤー機能を使ったサイトはあります。例えば、あるリンクボタンにカーソルがロールオーバーすると、リンクボタンの窓が出てくるなど、それは、レイヤー機能とJavaScriptを使用すれば簡単にできます。もうひとつ、レイヤー機能を使うとどうしても左上つけのレイアウトになってしまう事です。でも私の場合、レイヤー機能を使っても画面センタリングできるようにスタイルシートの技術でできるように考えています。ちょっと高度ですが.....。 私の場合、スタイルシートでレイヤー機能をふんだんに使い、レイアウトしてますが、結構面倒が掛かります。レイアウトでテーブルを使用していない分、HTMLのソースはすっきりしますが、はっきり言って結構面倒がかかるのが難点ですね。
その他の回答 (3)
shevyさんこんにちは！ 頑張っているようですね。 テーブルを使ったデザインなどは、デザイン系をやっていた方が一番戸惑うところですね。 イラレやフラッシュのようにきっちりとは収まってくれませんので・・。 ＞テーブルについてアドバイスをお願い致します。 今回のアドバイスについては、私もいつも参考にさせてもらっている専門家のmat-21さんの回答がありますので・・そちらを・・ 私からはどんどん経験を積んで下さい・・かなぁ 結局プレビューで確認しながら、どういう場合にどうなってしまうかを確認して覚えて行くしかありません。 そして、レイアウトが崩れないようにスタイルシートでフォントサイズを固定することを覚え・・ そして、フォントサイズを固定すると見る側の中にそれを嫌う人がいることを覚え・・ 自分のモニターではちょうど良い大きさで作ったのに友達のPCで見たらやたら大きかったりその逆だったり・・ レイヤーを使って作ったページが見る側の人が文字を大きくしていたためにレイヤーと文字が重なっていたり・・ ページが開くまでに異常に時間がかかったり・・ ん？ちょっと話がずれてしまいました・・m(_ _)m ＞いまだにレイアウトビューと、スタンダードビューの使い分けのメリットが見えてこない・・ 本当はデザインのためにテーブルを使うことは推奨されていないのですが、レイアウトビューはこのテーブルでデザインするためのものです。 例えば、スタンダードビューでテーブルを使っても右か左か中央にしか配置できません。 それ以外の『この場所！』というところにテーブルを配置するにはテーブルを入れ子にしたりレイヤーを使ったりとHTMLなどの知識が必要になりますが、レイアウトビューですとドラッグで位置を決められますので、比較的簡単にレイアウトできます。 （といってもプレビューするとずれていますが・・） そのかわりうまく作らないとソースが複雑（複雑なテーブルが出来てしまう）になってしまいます。 で、私はスタンダードビューで作業することをお勧めします。 スタンダードビューでソースを確認しながら、そしてプレビューで確認しながら・・ アクションスクリプトよりもずっと簡単ですよ。
お礼
yayopixさん、こんばんは。 毎度本当にお世話になっております。 いつも私が一方的にお礼を記入して締め切っているだけに、yayopixさんに覚えていただけているだけで光栄です。 このグラフィックソフトカテゴリーの常連みたいになっていて恥ずかしい気もしますが、そこは開き直って近い将来、DreamWeaverMXやら、FireWorksの回答者側に立てるようにがんばります。 今回のテーブルの件ですが、あえてスタンダードビューでレイアウトをすればいいというのは本当に参考になりました。 一冊のマニュアルでは、とにかくレイアウトビューを使ってのレイアウトがメインみたいになっていたので、絶対にレイアウトビューじゃないといかんのかなと頭を抱えていただけに本当に光明が差し込んできた気分がしました。 とりあえずは作ることですよね。 わかりました、ひたすらいろんなサイトのデザインを模倣してみます。 ActionScriptより簡単と言われると、それならもっとがんばれるかなという気がしてきました。 心強いお言葉感謝いたします。 ご丁寧なアドバイスありがとうございました。
セル内に英数字が入っている場合は指定のサイズより幅が広がることがあります。 任意に改行するなどしてください。 レイヤーについては下記URLを参考にしていただくと 使わない理由が分かると思います。
お礼
ありがとうございます。 いろんな見方ができるように今はひたすら作ってみます。 参考サイトの紹介までありがとうございました。
セル内に英数字が入っている場合は指定のサイズより幅が広がることがあります。 任意に改行するなどしてください。 レイヤーについては下記URLを参考にしていただくと 使わない理由が分かると思います。
お礼
mat-21さんありがとうございます。 大変参考になりました。 細かい実際の表記方法まで教えていただきまして恐縮致します。 スタイルシートを使うのですね。 うーむ、自分のタグへの理解の脆弱性が実感できます。それだけにやる気もでてきました。 とにかく一つずつ理解していこうと思います。 またレイヤーですが、まだまだ理解力が乏しい気がするので、レイヤーを使ったレイアウトにもどんどんトライしていこうと思います。 レイヤーのレイアウトだと面倒がかかるというデメリットもあるんですね。そこらへんの理解は徐々にテーブルとレイヤーの使い分けが完全にできるようになってくれば理解できそうな気がします。 とにかく今はひたすらがんばります。 ありがとうございました。