KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/4th/layout のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2005/4th/layout へ行く。
  • 1 (2007-02-24 (土) 07:05:44)
  • 2 (2007-02-24 (土) 07:10:26)

レイアウトをする

HTMLでレイアウトを指定するときの注意

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

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

特定の要素のレイアウトを指定する

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

pre> <h1 align="揃える位置">...</h1> （h1〜h6で使えます） <p align="揃える位置">...</p> <hr align="揃える位置">...</hr> <table align="揃える位置">...</table>

/pre>

行の揃え方を指定することができます。 揃える位置は、次の3つです。

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

特定の範囲のレイアウトを指定する

見出しや段落、水平線、表以外の要素（ただし表の中身はのぞく）のレイアウトを決めるには、 div要素とalign属性を指定します。

pre> <div align="揃える位置">...</div>

/pre>

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

セル内のレイアウトを指定する

表の各セルの中の、レイアウトを指定するには、 tr、th、td要素に、alignやvalign属性を指定します。

pre> <tr align="横方向の揃える位置" valign="縦方向の揃える位置">...</tr> <th align="横方向の揃える位置" valign="縦方向の揃える位置">...</th> <td align="横方向の揃える位置" valign="縦方向の揃える位置">...</td>

/pre>

セルの中の、内容を揃える位置を、横方向と縦方向で指定することができます。 それぞれの値は、次のとおりです。

• 横方向
  • left: 左揃え
  • center: 中央揃え
  • right: 右揃え
  • justify: 両端揃え
• 縦方向:
  • top: 上
  • middle: 中央
  • bottom: 下

次へ進んで、課題をおこなってください。