ホームページビルダー［HPB_Maniax］

処理

どこでも配置モードではできませんので標準モードでページを作成してください。

まずは表を使った配置方法です。

表-表の挿入

行・列ともに1にし表を挿入

表を選択し編集-属性の変更

属性-表タブで表の幅、表の高さ共に100%

枠の表示は任意で行ってください。

次にセルを選択し属性の変更

属性-セルタブのレイアウトを水平位置揃え、垂直位置揃え共に「中央揃え」を選択してください。

この<td></td>の中にコンテンツを作成していきます。

スクリーンショット

要素・属性

<table width="100%" height="100%">
 <tbody>
  <tr>
   <td valign="middle" align="center">ここを中央配置にします。</td>
  </tr>
 </tbody>
</table>

サンプル

スペースの関係でwidthを100%としていません。解りやすいように緑のborder-colorを指定しています。

ここを中央配置にします。

しかし、<table></table>を使った中央配置には弊害もあります。そこでブロック要素とスタイルシートを使った中央配置を行ってみます。

ここでは以下のソースを元に行います。

<div>
 <p>ここを中央配置にします。</p>
</div>

表示-スタイルシートマネージャーでスタイルシートマネージャーを表示させてから追加-HTMLタグの候補で「DIV」を選択します。

位置で幅と高さを100%に指定します。

文字のレイアウトタブの水平方向の配置で「中央配置」を選択してOKをクリック

次にHTMLタグの候補で「P」

レイアウトタブで「左」を選択しマージンの単位部分が予約語である事を確認し、そのまま値の部分をクリックするとグレーバックの状態で「自動」と表示されます。右マージンも同じ様に設定します。上下のマージンは<p></p>の要素内容（文章量）に応じて相対値（%）で指定してください。

スクリーンショット

スタイル

<style type="text/css">
<!--
DIV{
 width: 100%;
 height: 100%;
 text-align: center;
}
P{
 margin-left : auto;
 margin-right : auto;
 margin-top : **%;
 margin-bottom : **%;
}
-->
</style>

サンプル

スペースの関係でwidthを100%としていません。解りやすいようにborderを指定しています。緑が<DIV>赤が<P>