KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/5th/layout の変更点

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

*レイアウトをする [#scbbe1af]

**HTMLでレイアウトを指定するときの注意 [#h8f232d1]
HTMLでは、レイアウトを指定する要素や属性があります。
しかし、HTMLは文書の構造を示すのが役割です。
COLOR(red):''HTMLでレイアウトを指定することは、''
COLOR(red):''現在よく使われているバージョンであるHTML 4.01では推奨されていません。''

HTML 4.01では、レイアウトの指定は
''CSS（スタイルシート）''を使うことが推奨されています。
今回は、古典的な手法として、
HTMLでの指定を紹介します。

**特定の要素のレイアウトを指定する [#h80f0feb]
いくつかの要素では、
''align''属性を指定することで、レイアウトを決めることができます。

#pre(novervatim){{
COLOR(red):<h1 align="COLOR(blue):揃える位置COLOR(red):">COLOR(black):...COLOR(red):</h1> COLOR(black):（h1〜h6で使えます）
COLOR(red):<p align="COLOR(blue):揃える位置COLOR(red):">COLOR(black):...COLOR(red):</p>
COLOR(red):<hr align="COLOR(blue):揃える位置COLOR(red):">COLOR(black):...COLOR(red):</hr>
COLOR(red):<table align="COLOR(blue):揃える位置COLOR(red):">COLOR(black):...COLOR(red):</table>
</pre>
}}

行の揃え方を指定することができます。
揃える位置は、次の3つです。
-left: 左揃え
-center: 中央揃え
-right: 右揃え

**特定の範囲のレイアウトを指定する [#xee91f96]
見出しや段落、水平線、表以外の要素（ただし表の中身はのぞく）のレイアウトを決めるには、
''div''要素と''align''属性を指定します。
#pre(novervatim){{
COLOR(red):<div align="COLOR(blue):揃える位置COLOR(red):">COLOR(black):...COLOR(red):</div>
</pre>
}}

div要素は、複数の要素をまとめて扱うときに使用するものです。
div要素で囲んだ内容を、align属性を使うことで、
レイアウトを指定することができます。
揃える位置は、上述のとおりです。

**セル内のレイアウトを指定する [#v3476092]
表の各セルの中の、レイアウトを指定するには、
tr、th、td要素に、''align''や''valign''属性を指定します。
#pre(novervatim){{
COLOR(red):<tr align="COLOR(blue):横方向の揃える位置COLOR(red):" valign="COLOR(blue):縦方向の揃える位置COLOR(red):">COLOR(black):...COLOR(red):</tr>
COLOR(red):<th align="COLOR(blue):横方向の揃える位置COLOR(red):" valign="COLOR(blue):縦方向の揃える位置COLOR(red):">COLOR(black):...COLOR(red):</th>
COLOR(red):<td align="COLOR(blue):横方向の揃える位置COLOR(red):" valign="COLOR(blue):縦方向の揃える位置COLOR(red):">COLOR(black):...COLOR(red):</td>
</pre>
}}

セルの中の、内容を揃える位置を、横方向と縦方向で指定することができます。
それぞれの値は、次のとおりです。
-横方向
--left: 左揃え
--center: 中央揃え
--right: 右揃え
--justify: 両端揃え
-縦方向:
--top: 上
--middle: 中央
--bottom: 下


&br;
&navi2(Lecture/InfoDesignB2004/5th,next);進んで、課題をおこなってください。
----
#navi2(Lecture/InfoDesignB2004/5th,prev,toc,next)

}}