KAWANO's PukiWiki Plus! - Lecture/JouhouC2008/12th/layout の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/JouhouC2008/12th/layout へ行く。

*div要素によるブロック内のレイアウト [#v4111e8f]

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

**行揃えによるレイアウト [#r68480eb]
行の揃え方を設定するには、
''text-align''プロパティを設定します。

#pre(novervatim){{
COLOR(red):text-align: COLOR(blue):行揃え位置
}}

text-alignプロパティは、
行の揃え方を設定します。
揃える位置には、次の設定ができます。
-left: 左揃え
-right: 右揃え
-center: 中央揃え

#pre(novervatim){{
div.note {
  COLOR(red):text-align: COLOR(blue):left;
}
div.example {
  COLOR(red):text-align: COLOR(blue):center;
}
}}

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

#pre(novervatim){{
div.note {
  margin-left: auto;
  margin-right: auto;
}
}}


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

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

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

&br;
&navi2(Lecture/JouhouC2008/12th,next);進んでください。
----
#navi2(Lecture/JouhouC2008/12th,prev,toc,next)