*div要素によるブロック内のレイアウト [#v4111e8f] [[最初に説明した>../div]]ように、 div要素を使えば、1つ以上の要素をグループ化することができます。 そして、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/JouhouC2007/12th,next);進んでください。 ---- #navi2(Lecture/JouhouC2007/12th,prev,toc,next) |