KAWANO's PukiWiki Plus! - Lecture/JouhouC2008/12th/layout

div要素によるブロック内のレイアウト

最初に説明したように、 div要素を使えば、１つ以上の要素をグループ化することができます。 そして、div要素に対してレイアウトの設定をすれば、 グループ内のすべての要素にもレイアウトが設定されます。

行揃えによるレイアウト

行の揃え方を設定するには、 text-alignプロパティを設定します。

text-align: 行揃え位置

text-alignプロパティは、 行の揃え方を設定します。 揃える位置には、次の設定ができます。

• left: 左揃え
• right: 右揃え
• center: 中央揃え

div.note {
  text-align: left;
}
div.example {
  text-align: center;
}

なお、 text-alignプロパティは、 指定したブロックレベル要素に対して、 その中身の揃え方を設定します。 ブロック自体を中央に揃えたい場合には、 次のように左右のマージンを「auto」にします。

div.note {
  margin-left: auto;
  margin-right: auto;
}

そのほかのレイアウト

div要素は、行揃え以外にも、次のような設定ができます。 つまり、ほかの要素と同じようなレイアウトの設定ができます。

• 枠線（border）
• マージン（margin）
• 余白（padding）
• 行の高さ（line-height）
• など

また、ここでは説明しませんが、 div要素に、文字の種類や大きさ、色や画像などのデザインに関する設定をすることもできます。

次へ進んでください。