コンテンツ

• 説明書
• テキストを揃える方法
• 左{
• 正しい{
• センター{
• 部門、輪郭およびボディ部門を集中させる方法
• どうやって
• 必要なもの

テキストをマークするHTMLタグに含まれているHTML配置属性を使用するのではなく、Webデザイナーがプレゼンテーション情報（配置オプション）をスタイルシートに転送することをお勧めします。この記事では、テキストを揃える方法と、分割など、より大きなページ要素を中央揃えする方法について説明します。

説明書

スタイルシートを使用すると、テキストよりも整列して中央に配置できます。 （Fotolia.comからの6922デザイナーによるウェブサイトのレイアウト画像）

テキストを揃える方法

1. 段落や引用などの通常のテキストブロック内でテキストを揃えるには、text-alignプロパティを使用します。

2. text-alignプロパティの値オプションは、left、right、center、およびjustifyです。位置揃えされたテキストはWeb上ではあまり読みにくいため、図には左、右、および中央の配置のみが示されています。この図では、幅の調整が要素に適用されていない場合、各段落にはページ上のブロック要素のサイズを示すために黒い境界線があります。

3. 通常、要素はIDまたはクラスに割り当てられます。このIDまたはクラス内の項目のテキスト配置は、次のような規則で定義されています。

   左{

   text-align：left。 }

   正しい{

   text-align：正しいです。 }

   センター{

   text-align：center。 }

部門、輪郭およびボディ部門を集中させる方法

1. 全体のレイアウトまたは大きなレイアウトを中央に配置することをお勧めします。このような場合は、異なるCSSテクニックが使用されます。

2. 中心に配置したい最大の要素のセレクターにCSSルールを適用します。本体要素、境界部、コンテナ部のいずれでも構いません。

3. この方法でセンタリングしてもテキストの配置には影響しません。中央揃え要素は、中央揃え要素内のテキストのデフォルトの左揃えを保持します。

   
   

4. 以下は、ページの中央に配置された本文要素（わかりやすくするために黒い枠線付き）の図です。要素の幅を設定する必要があります。その場合、左右の余白は自動に設定されます。これは次のようにして行われます。

   ボディー{幅：80％;右マージン：自動。マージン左：自動。ボーダー：1px黒一色。 }

どうやって

• 左揃えがデフォルトなので、通常はalign-leftを使用する必要はありません。ただし、以前に中央揃えまたは右揃えのテキストを後でデフォルトに再定義する必要がある場合は、それが存在することに注意する必要があります。中央揃えする要素の幅は、ピクセル、パーセンテージ、またはemsで定義できます。

必要なもの

• テキストエディタ
• HTMLエディタ
• 基本的なHTMLの知識