HPビルダーの標準モードでテーブルを使いページ作成

質問

ホームページビルダー8を使って、今まで「どこでも配置モード」でページを作っていましたが、見た時にディスプレイの中央に配置されないので、急遽「標準モード」で作り始めたところです。
(本来ピクセル表示なのですが見た目のイメージとして)たとえば、横25cm縦60cmくらいの縦長のページを作る際、次のうちどの方法がよいでしょうか？
1.　最初から3cm(○ピクセル)角くらいの小さなセルをページいっぱいにつくり、それを必要に応じて縦横連結して、タイトルや見出しや文章や写真を配置していく。
2.　最初は縦横五個ずつくらいの適度なサイズのセルをつくり、それを分割したり、増やしたり、連結したりして、配置していく。
3.　パソコンに入力する前に、ページ構成を決定しておき、セルの配置を最初からそれにあわせて作り、セルの多少の引き伸ばしなどだけですむようにする。

私の素人考えだと、1.の方法でやろうと思っています。理由は、ある行の1つの列だけを増やしたり分割したりしたい時に、すべての行にまで新しい列が出来てしまい、他の完成している写真や文章配置までまたやりなおさなければならないからと思うからです。　それよりかは、最初からそれ以上分割する必要のない細かいセルをたくさん作っておけば、縦横どのようにセルを結合しても他の行や列に影響しないと思うからです。
3.が理想ですが、それでも後から修正したい場合があると思うので、それを考えると1.の方法がよいのではないかと思います。
皆様はどのようにやっているのでしょうか？
利点や欠点、その他のアドバイスをお願い致します。

回答No.4

exit0107 · ベストアンサー

ビルダーのバージョンは8ですね。
う～ん、ちょっと古くてCSSに対応しているかどうか分からないというのが正直なところです。

私が使用しているのは最新の15ですが、これはしっかりとCSSに対応しています。
ただ使いこなしているかと聞かれれば全然です。
むしろ始めて買った頃の6.5の方が眼一杯使っていましたね。

私は趣味のサイトを二つほど持っていまして、あまり更新しない方のサイトはビルダーで作りましたが、もう一つの頻繁に更新する方はまったくビルダーを使用していません。
使うのは素材を作る時のWEBアートデザイナーくらいです。

私も参考書片手にサイトを作っている素人ですからソフトを使わずに一から全部作ることは出来ません。
ただ現在はプロの方々が作成されたテンプレートを無料で配布しているサイトが無数にあります。
そこから気に入ったテンプレートをダウンロードして自分でカスタマイズしています。
基本の形が出来ていれば、タグの意味さえ理解すれば結構簡単に出来ますよ（わからないことがあればググればいいし）

そういうテンプレートを編集するときはTerapadなどのフリーのテキストエディタを使用し、ビルダーは使いません。
ビルダーは自分で勝手にタグを作成してしまうため、かえってレイアウトが崩れてしまう場合があるんです。
オプションで【タグを自動整形する】のチェックボックスを外しても、余計な場所にスペースを入れてくれたりして、せっかく見やすいように整えているタグを崩してくれるんです(^_^;)

hpmakeさんのサイト作成に関しても、急がれるようならば一旦ビルダーで作っておいて、それから腰を据えてHTMLとCSSを勉強されてはいかがでしょうか？

参考までに
私は手っ取り早くHTMLとCSSを理解したくて【一週間でマスターするXHTML & CSS for Windows 】という本を一番最初に買って勉強しました。
難しいことは後回しで、とにかく初心者にわかりやすいように構成されているのでオススメです。
（別に出版社の回し者ではありませんが）
ただ私がいいと思ってもhpmakeさんに合っているかどうかは分かりませんので、購入に関してはくれぐれも自己責任でお願いします（笑）
ちょっと古めの本ですので、今はもっといい本が出ているかもしれません。

お礼

ご回答ありがとうございます。
ビルダーを使わないで作る際もWEBアートデザイナーは利用している、無料のテンプレートが無数にあるので、それをカスタマイズして使う、テンプレートを編集するときはTerapad(知らなかったので調べてみます)などのフリーのテキストエディタを使用し、ビルダーは使わない、など参考になるやり方があり、勉強になりました。
お薦めの本(浜俊太朗著)は図書館にありましたのでまず手配しました。(その後購入に至ると思います。)
どうもありがとうございました。

回答No.3

exit0107

悪名高い「どこでも配置モード」ですね（笑）
これは使わないほうがいいです。

「どこでも配置モード」でビルダーが強引に配置を決めるために、かなり無茶苦茶なソースが吐き出されます。
なので今回のように中央に配置されなかったり、またIEでは思い通りの配置になっていても他のブラウザだと悲惨なことになっていたりと、いいことがありません。

さて質問についてですが、配置のためのテーブルレイアウトはおすすめしません。
No2さんもおっしゃっているように今はcssによるデザインレイアウトが主流です。テーブルやフレームは時代遅れになっています。
hpmakeさんのイメージされているテーブルでの作り方（特に1）はexcelでの表の作り方を連想させますが、実際これをビルダーでやるとなると手間がかかりそうですし、デザインの変更などが大変です。

私も昔はビルダーのみでサイトを作成していましたが、今はだいたいの構造のみをビルダーで作成し、後は直接タグをいじって調整しています。
長い眼で見るとやはりHTMLとCSSの基本は理解していた方が、いろんな調整が簡単に出来ていいですよ。
今は初心者さん向きにCSSを解説したWEBサイトなども多いですから、少しずつ勉強されてみてはいかがでしょうか。

それと『1ページずつではなく、サイト全体をデザインする』というのはCSSを使えば簡単に出来ることです。
現在はどこのサイトでも、項目ごとに共通デザインになっていますよね。
トップページやその他のページが内容は違っても色やページのレイアウトは同じです。
これは大概、ページのファイル(HTML)とデザインのファイル(CSS)を分けて作成しています。

HTMLファイルにCSS部分を記述することも出来ますが、それだとデザインを変更したい時にファイルが10枚あれば10枚とも編集しなければなりません。
しかしデザインを記述したCSSファイルが１枚あってそのページにHTMLファイルをリンクさせておけば、デザインを変更したい時、そのCSSを編集するだけで、10枚のHTMLファイルのデザインが一度に変わるわけです。
ご理解頂けたでしょうか？

お礼

ご回答ありがとうございます。
『以前はビルダーのみで制作』そして、今はいろいろな技術を習得されていらっしゃる様で、今後の参考になります。
No.2の方とお二人の意見により、スタイルシートによるサイト全体の効率的なレイアウトについて必要性を強く感じましたので覚えたいと思います。
ビルダー8の本には、CSS 、スタイルシートという項目が全くありません。(目次、索引ともに)
HTMLが出来なくてもソフトとしての機能でビルダーがそれをやってくれますが、スタイルシートについてはビルダーは対応していないという事でしょうか。

回答No.2

naokita

テーブルは、HTMLでは"表"の意味です。
表といえばエクセルが有名ですが、
エクセルのように商品一覧とか時刻表とか
各種一覧表のようなウェブサイトを作るのでしたらテーブルで構いません。
ですが、
質問を読む限りでは、表ではないようなので、
テーブルを使わない方が良いでしょう。
1.2.3項の制作時にセルの計算が面倒という事もデメリットの１つで,
将来的に、コンテンツの拡張が面倒ですね。

昔は、テーブルレイアウトやフレームレイアウトといって
HTMLだけで枠を作ったものですが、
10年程度前頃からCSSが普及し始めて、
レイアウトが自由にできるようになったので、
テーブルレイアウトを使う人が減りました。
よって、
テーブルを使わず、HTMLで構造化しCSSでデザインするのが一般的です。

<div style="width:720px; margin:0 auto; border: 1px solid blue;">
<div><h1>ヘッダ</h1></div>
<div><ul><li>ナ</li><li>ビ</li></ul></div>
<div><h2>メイン</h2><p>メイン</p></div>
<div><p>フッタ</p></div>
</div>

この様に構造化して各コンテンツを分けます。
テーブルで云うセルです。このコンテンツの配置をCSSでデザインします。
（順番・縦横・位置・大きさ・色・背景・罫線などの指定です）
HTMLで１ページずつデザインするのではなく、
CSSでサイト全体をデザインする感覚です。

お礼

ご回答ありがとうございます。
おっしゃる通り、一覧表の様な罫線で囲まれた表ではなく、写真や文章を配置する為に用いる表(テーブル)についての質問です。
「テーブルレイアウト」は既に古いものになっている、とは知りませんでした。　
『HTMLで構造化し、CSSでデザインする』　　　CSSで、順番・縦横・位置・大きさ・色・背景・罫線などを指定できるのですね。
『1ページずつではなく、サイト全体をデザインする』という事がまだよくイメージできませんが、もっと勉強したいと思います。

回答No.1

Calm Trip（@CalmTrip）

(1) 見た時にディスプレイの中央に配置されない
→ → → 何が配置されないのですか?

(2) ＜横25cm縦60cmくらいの縦長のページ＞で、何をしたいかのイメージがつかめません。
→ → → 何のページを作ろうとされているのですか?
→ → → そのイメージに合ったページは、例えば何処ですか?

補足

(1) ネットで見たときに、全体が左寄せになり、サイドバーの幅を広くしている人の場合、文字が折り返さずに途中で途切れてしまいます。
また、文字が重なったりとか予定とは違う見え方がしてしまうとのご意見が多数この質問サイト内でありました。
(2) 単品の商品紹介のサイトです。
イメージとしては、最近よくある縦長の情報販売のサイトのようなものです。