製品名
：ホームページ・ビルダー
バージョン
：6.5, 7, 8, 9, 10, 11, 12, 13
QA番号
：HPB-1037
タイトル
：表を使ってページをレイアウトしよう
やってみましょう
表を使ってページをレイアウトしよう
操作手順
どこでも配置モードはとても簡単に自分の好きなレイアウトでページを作成していくことができます。しかし、常にページの中央に配置することができなかったり文字同士、または文字と画像が実際に公開してみたら重なってしまったりなどの、制限事項が重なりなかなか思うように作成できないこともあります。
そこで、標準モードでもどこでも配置モードのようにちょっと複雑なページを作成するポイントをここでは紹介します。
まず下の 2 枚のページを見てください。上が標準モードで作成したページ、下がどこでも配置モードで作成したページです。
どちらもほぼ同じように見えますが、標準モードの利点はどのようなウインドウの大きさでも「中央揃え」などの位置揃えがウインドウの大きさが変わっても生かされるというところです。どこでも配置モードではこのままウインドウのサイズを大きくすると右側に余白ができてしまい、見栄えがあまりよくありません。
標準モードで作成
どこでも配置モードで作成
今回はこの標準モードで作成したページの簡単な手順とポイントを順を追って紹介していきます。
以下の画面は 〔V13〕 のものですが、〔V12〕＋〔V11〕＋〔V10〕＋〔V9〕＋〔V8〕＋〔V7〕＋〔V6.5〕 でもほぼ同様の操作で行うことができます。
1. まず画像、文字の配置を考えてページ内に表を作成します。上の標準モードのページをまずホームページ・ビルダーのページ編集画面で開いてみると、下のようになります。
画像などの回りについている点線は表です。この表は現在非表示の状態になっています。更にこの表は 2 つの表で構成されています。
オレンジの枠が全体のバランスを取っている大元の表。更に中にある青い表はメニューの項目を並べている別の表です。
まずこのオレンジの外枠の作成方法を説明します。
2. まず新しいページに表を挿入します。行数を 5、列数を 2 で作成します。
〔V13〕〔V12〕〔V11〕〔V10〕〔V9〕〔V8〕〔V7〕〔かんたん〕 の場合：ナビメニューから「表の挿入」を選択します。
〔V13〕〔V12〕〔V11〕〔V10〕〔V9〕〔V8〕〔V7〕〔スタンダード〕〔エディターズ〕＋〔V6.5〕 の場合：メニューバーから「表」→「表の挿入」を選択します。
「表の挿入」ダイアログが表示されます。
すると画面上に下のような表が出来上がります。
ここで表の作り替えを簡単にするボタンの説明をします。
下の表編集のボタンを使うと表を結合したり、結合した表をもう一度分けたり、行や列を追加したりするのがとても簡単です。通常は上のツールバーの中に収納されています。
ボタンの動作は、左から「表の挿入」「行の追加」「列の追加」「行の削除」「列の削除」「右のセルと結合」「下のセルと結合」「選択セルの結合」「列の分割」「行の分割」です。
〔V13〕〔V12〕〔V11〕〔V10〕〔V9〕〔V8〕〔V7〕〔かんたん〕 では、上記表編集ツールバーが表示できません。編集スタイルを 〔スタンダード〕 または 〔エディターズ〕 に切り替えてご利用いただくか、メニューバーの「表」メニュー項目をご利用ください。編集スタイルは、メニューバーから「表示」→「編集スタイルの切り替え」で切り替えてください。
では先程の表を構成し直してみます。まず表の 1 行目、4 行目、5 行目はセルが分割されてないので、隣のセルと結合します。
更に結合しなかった 2 行目、3 行目の 2 列目が縦に結合している状態なので、更に下のセルと結合します。
これで大元の表は完成です。各セルの中に画像を入れていきます。下の図は表の中で画像や文字を配置する場所を「中央揃え」でレイアウト済みのものです。
この作業に関しては、HPB-0400 「文字を中央や右に寄せたい」を参照にしてください。
更にこの作成した表全体を画面中央に寄せると、常にページの真ん中に作成した内容が表示されるようになります。
こちらも、HPB-0345 「表を画面の中央に表示したい」を参照してください。
3. 次に縦に結合したセルの中にもう一つの表を挿入します。その前にセルの属性を下詰めになるように変更します。縦に結合したセルをクリックし、メニューバーから「編集」→「属性の変更」を選択します。
「属性」ダイログが表示されます。
[セル] タブが選択されている状態で属性ウインドウが開いてくるので [垂直位置揃え] の部分で [下揃え] を選択しておきます。
縦に結合したセルの中に表を新しく挿入します。行数は 4、列数は 2 で作成します。
できた表の 1 列目には画像、2 列目には文字を入力していきます。
これで画像、文字の挿入は完了です。後はそれぞれのレイアウトを考えます。今回の画像はメインとなる画像がやや上に来ます。このままだと右のメニューがすぐ横に並んでしまうので、最後に残ったメイン画像のすぐ下のセルの中に改行を入れて隙間を作ります。空白のままだとそのセルが潰れた状態になってしまいます。もし不要であれば上のセルと結合してしまっても構いません。
4. 最後に作成した表の枠を非表示に設定し、背景を設定しましょう。表の枠を非表示にする方法は、HPB-0262 「表の枠を非表示にしたい」を参照してください。
今回の作成方法はあくまでも一例です。これを応用していくと様々なレイアウトのページを標準モードで作成していくことができます。どこでも配置モードで困った文字や画像の重なりを避けることもできますし、見栄えもきれいになります。是非試してみてください。
最終更新日：2009年02月26日