Top > Lecture > InfoDesignB2005 > 4th > layout
AND OR

レイアウトをする

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要素に、alignvalign属性を指定します。

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

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

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


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


}}


Reload   Diff   Front page List of pages Search Recent changes Backup Referer   Help   RSS of recent changes
Last-modified: Tue, 11 Mar 2014 01:20:22 HAST (3244d)