TOP > Expression > Expression Web > Chapter 5 制作を効率化する便利な機能

CSSでボックスをセンタリングする

Google Bookmarks に追加 Check Yahoo!ブックマークに登録 このページをはてなブックマークに追加
ボックス全体を中央に寄せて、ボックスの中の文字を通常の左寄せにするテクニックを紹介します。
Page 1 > Page 2 > Page 3 > Page 4

全体的に中央に寄せるスタイルを作成する

全体的に中央に寄せるボックススタイルを作成します。幅が100%の中央揃えになるようにスタイルに設定しましょう。

  1. ［スタイル］作業ウィンドウの［新しいスタイル］をクリックします。または、［書式］メニューの［新しいスタイル］をクリックします。
  2. ［新しいスタイル］ダイアログボックスの［セレクタ］にクラス名を指定します。
  3. ［ブロック］カテゴリを開き、［text-align］値を「center」にします。
  4. ［配置］カテゴリを開き、［width］値を「100%」にします。
  5. ［OK］ボタンをクリックします。

Webページ全体スタイルとしてセンタリングで幅固定のレイアウトの場合

全てのWebページにおいて、全体的に中央で幅が固定されたボックスの中にコンテンツを配置するレイアウトの場合、上記のスタイルの代わりに、<body>タグ自体に［text-align］値を「center」にするスタイルを設定するのもひとつの方法です。

Page 1 > Page 2 > Page 3 > Page 4
INDEX
関連記事

問題は解決しましたか？

操作方法、設定方法等で困ったら、Expression Web & FrontPage Users Forum に投稿してください！

▲このページのトップへ