全体的に中央で、文字配置を左寄せにしたい
スタイルシートでの構造について
全体的に中央に配置させるには、普通に中央揃えになります。しかし、全体区分を中央に幅固定で、しかもその区分内のテキストは左寄せにするにはどうすればいいのでしょうか？
テーブルレイアウトをすれば簡単ですよね。
横幅を指定したテーブルを作成し、そのテーブル自体を中央揃えにすれば(笑)
しかし、テーブルレイアウトを使わずにスタイルシートで実装するにはどうすればいいのか、ということになりますが、まず、全体の配置を中央にさせるためのスタイルを設定する必要があります。
しかしこのままでは、その中に配置されているものがすべて中央揃えになってしまいますよね？
全体を中央に
この中のテキストはすべて中央になります。
この中のテキストはすべて中央になります。
この中のテキストは左寄せになります。幅は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]ボタンをクリックします。
作成したスタイルを適用しよう
- [書式]→[スタイルシートのリンク]コマンドで、スタイルシートのリンクを設定しておきます。
- 書式設定ツールバーの[スタイル]の中から「contents」を選択します。
- クイックタグセレクタの<p.contents>の右側▼をクリックして、一覧から[タグの編集]をクリックします。
- p を div に変更して、OK (チェックアイコン） ボタンをクリックします。
- 書式設定ツールバーの[スタイル]の中から今度は「main」を選択します。
- クイックタグセレクタの <p.main>の右側▼をクリックして、一覧から[タグの編集]をクリックします。
- p を div に変更して、OK (チェックアイコン） ボタンをクリックします。
スポンサーリンク
INDEX
問題は解決しましたか？
操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！
2012年12月21日（日本時間）をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。 なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。
