KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/5th/layout

レイアウトをする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}}