*レイアウトをする [#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/InfoDesignB2005/4th,next);進んで、課題をおこなってください。 ---- #navi2(Lecture/InfoDesignB2005/4th,prev,toc,next) }} |