TOP > FrontPage > FrontPage 2003 (上級編) > スタイルシート TIPS

全体的に中央で、文字配置を左寄せにしたい

スタイルシートでの構造について

全体的に中央に配置させるには、普通に中央揃えになります。しかし、全体区分を中央に幅固定で、しかもその区分内のテキストは左寄せにするにはどうすればいいのでしょうか？

テーブルレイアウトをすれば簡単ですよね。
横幅を指定したテーブルを作成し、そのテーブル自体を中央揃えにすれば(笑)

しかし、テーブルレイアウトを使わずにスタイルシートで実装するにはどうすればいいのか、ということになりますが、まず、全体の配置を中央にさせるためのスタイルを設定する必要があります。

しかしこのままでは、その中に配置されているものがすべて中央揃えになってしまいますよね？

全体を中央に
この中のテキストはすべて中央になります。
　

この中のテキストは左寄せになります。幅は500ピクセルで(笑)

こんな感じですね。

そこで、その区分内に横幅指定の区分を作成し、その区分のテキスト配置は左寄せにすればいいということになります。

FireFoxでは、この例では全体を中央に、ボックスの中は左寄せにはなりません。おそらくIEだけです。FireFoxでもちゃんと実装するには、コードビューに切り替えて、全体を中央に配置させるためのボックスのstyle属性に、margin:0 auto; を付け加える必要があります。

では実際にスタイルシートを作成してみましょう。

スタイルシート(CSSファイル) を開きます。ない場合は新規作成します。
スタイルツールバーの[スタイル]をクリックします。
スタイルのダイアログボックスの[新規作成]をクリックします。
[新しいスタイル]ダイアログボックスが表示されたら、[名前(セレクタ)]に任意の名前（セレクタ)を入力します。
ここでは「contents」を指定します。スタイルの種類は「段落」のままでOKです。
[書式設定]ボタンをクリックして、一覧から[段落]をクリックします。
[段落]ダイアログボックスの[配置]を「中央」にして、[OK]ボタンをクリックします。
[説明]の部分に text-align: center と設定されたことを確認して、[OK]ボタンをクリックします。

スタイルのダイアログボックスの[新規作成]をクリックします。
[新しいスタイル]ダイアログボックスが表示されたら、[名前(セレクタ)]に任意の名前（セレクタ)を入力します。
ここでは「main」を指定します。スタイルの種類は「段落」のままでOKです。
[書式設定]ボタンをクリックして、一覧から[配置]をクリックします。
[配置]ダイアログボックスの[幅]を指定して[OK]ボタンをクリックします。
[書式設定]ボタンの中から[段落]をクリックします。
[段落]ダイアログボックスの[配置]を「左」にして[OK]ボタンをクリックします。
[説明]に width: (指定幅); text-align: left が設定されていることを確認したら
[OK]ボタンをクリックします。