ブロック要素
リストを作成する 役割・機能
ul
Win･････5.5/6 Mac･････････5 Win･･････････7 Mac･････････7 Win･････7/8.5 Mac･･･････1/2
<html > 属性＝"値" 〜 </html>
書 式
記述例 <p>材料は以下のとおりです。</p>
<ul type="square">
<li>鶏もも肉</li>
<li>きゅうり</li>
<li>しいたけ</li>
<li>春雨</li>
属 性 概 要 指定可能な値
type リストマークを指定する disc：●
circle：○
square：■、□
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
書 式
表示例
<ul>は順不同のリストを作成します。各リストの項目は<li>で記述しま す。type属性で、リストマークのスタイルを設定することができます。
解説
<ul 属性＝"値"> 〜 </ul>
■ol（P.43） ■li（P.44）
参照項目
<html 属性"値"> 〜 <html>
書 式 ブロック要素
番号付きのリストを作成する 役割・機能
ol
Win･････5.5/6 Mac･････････5 Win･･････････7 Mac･････････7 Win･････7/8.5 Mac･･･････1/2
書 式
記述例 <p>ルールは簡単です。</p>
<ol type="1">
<li>カードは52枚使用し、等分に配る</li>
<li>順番に手札からカードを出していく</li>
<li>場のカードより強い札を出す</li>
<li>同じ数であれば、ツーペア、スリーペア、フォーペアで出すこ とができる</li>
<li>手札が早くなくなった人から勝ち抜け</li></ol>
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 表示例
<ol>は番号付きリストを作成します。各リストの項目は<li>で記述しま す。type属性で番号付けの数値タイプを、start属性で開始の番号を 指定することができます。
解説
■ul（P.42） ■li（P.44）
参照項目
<ol 属性＝"値"> 〜 </ol>
属 性 概 要 指定可能な値
type リストの数値タイプ 1：数字
を指定する a：小文字アルファベット A：大文字アルファベット i：小文字ローマ数字 I：大文字ローマ数字
ul、ol要素の子要素
リストの項目を記述する 役割・機能
li
Win･････5.5/6 Mac･････････5 Win･･････････7 Mac･････････7 Win･････7/8.5 Mac･･･････1/2 文
書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設
定 参照項目 書 式
記述例
記述例
記述例 <ul>、<ol>で共通に使用し、リストの中身（項目）を記述します。type 属性を使って、項目ごとにリストマークを変えることもできます。
<p>好きなもの／嫌いなもの</p>
<ul>
<li type="circle">ライゾウ</li>
<li type="square">ブタ</li>
<li type="circle">睡眠</li>
<li type="square">徹夜</li>
<li type="circle">菊地成孔</li>
属 性 概 要 指定可能な値
type リストマークを指定する ul、ol要素のtype属性値
value リスト項目の番号 番号
■ul（P.42） ■ol（P.43）
<li 属性＝"値"> 〜 </li>
summary 表の目的などの要約を 文字列 記述する
align 配置を指定する left：左寄せ
center：センタリング right：右寄せ
width 幅を指定する ピクセル、パーセント
bgcolor 背景色を指定する カラーネーム、
カラーコード background※ 背景画像を指定する URI
border 外枠の太さ ピクセル
bordercolor※ 外枠の色 カラーネーム、
カラーコード cellspacing 外枠と表のセルの間隔 ピクセル cellpadding セル枠と中身の余白 ピクセル
※ブラウザの独自拡張機能 ブロック要素
表を作成する 役割・機能
table
Win･････5.5/6 Mac･････････5 Win･･････････7 Mac･････････7 Win･････7/8.5 Mac･･･････1/2
記述例 <table border="1" bordercolor="#0099cc">
<tr><td>タイトル</td>
<td>発売日</td>
<td>種類</td></tr>
<tr><td>MUSICAL FROM CHAOS</td>
<td>2000.6.25</td>
<td>DVD</td></tr>
<tr><td>DCPRG & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S /SINO</td>
<td>2001.7.10</td>
<td>Single</td>
</tr>
<tr><td>REPORT FROM IRON MOUNTAIN</td>
<td>2001.8.10</td>
<td>Album</td></tr>
</table>
属 性 概 要 指定可能な値
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式 <table 属性＝"値"> 〜 </table>
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
表示例
<table>では、表全体の設定をします。align属性の配置位置は、width 属性を指定したときに適用されます（width属性で幅を指定しない場 合、ブラウザのウィンドウ幅に合わせて表示されます）。また、border属 性を指定しない場合、デフォルトでは枠なしで表示されます。bgcolor 属性、background属性で背景を指定することができる他、共通属性 style（P.143）でデザインを詳細に指定することもできます。
解説
HTMLでは基本的に一段組で上から下に記述した内容が表示されます が、<table>を活用することで、二段や三段などにすることができます。
以下の画面は、<table>を使ったレイアウト例です。
参照項目 ■tr（P.47） ■th（P.49） ■td（P.51）
Note
table要素の子要素
表の行を記述する 役割・機能
tr
Win･････5.5/6 Mac･････････5 Win･･････････7 Mac･････････7 Win･････7/8.5 Mac･･･････1/2
記述例 <table width="400" align="center">
<tr align="center" bgcolor="#0099cc">
<td>タイトル</td>
<td>発売日</td>
<td>種類</td>
</tr>
<tr bgcolor="#ccffff">
<td>MUSICAL FROM CHAOS</td>
<td>2000.6.25</td>
<td>DVD</td>
</tr>
<tr bgcolor="#ccffff">
<td>DCPRG & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S /SINO</td>
<td>2001.7.10</td>
<td>Single</td>
</tr>
<tr bgcolor="#ccffff">
<td>REPORT FROM IRON MOUNTAIN</td>
<td>2001.8.10</td>
<td>Album</td>
</tr>
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
属 性 概 要 指定可能な値
align 行のセル内での横の left：左寄せ
配置を指定する center：センタリング right：右寄せ
valign 行のセル内での縦の top：上ぞろえ
配置を指定する middle：中央 bottom：下ぞろえ baseline：ベース
ラインにそろえる
bgcolor 背景色を指定する カラーネーム、
カラーコード background※ 背景画像を指定する URI
※ブラウザの独自拡張機能
<tr 属性＝"値"> 〜 </tr>
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
表示例
<tr>〜</tr>で括った範囲を表の1行とします。行内の項目は、<tr>〜
</tr>内に、<td>〜</td>で項目を記述します。bgcolor属性で背景色 を、background属性で背景画像を指定することができます。この
<tr>での指定は、行単位で適用されます。
また、align属性でセル内での横の配置を、valign属性でセル内での縦 の配置を指定することができます。サンプルの記述例では、<table>タ グのalign属性でウィンドウ内での表の位置を指定し、<tr>タグのalign 属性でセル内でのテキストの配置を指定しています。
解説
参照項目 ■table（P.45） ■th（P.49） ■td（P.51）
tr要素の子要素
表の見出し項目を記述する 役割・機能
th
Win･････5.5/6 Mac･････････5 Win･･････････7 Mac･････････7 Win･････7/8.5 Mac･･･････1/2
記述例 <table border="1" bordercolor="#0099cc">
<tr bgcolor="#0099cc">
<th>タイトル</th>
<th>発売日</th>
<th>種類</th>
</tr>
<tr bgcolor="#ccffff">
<td>MUSICAL FROM CHAOS</td>
<td>2000.6.25</td>
<td>DVD</td>
</tr>
<tr bgcolor="#ccffff">
<td>DCPRG & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S /SINO</td>
<td>2001.7.10</td>
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
属 性 概 要 指定可能な値
rowspan 連結する縦の行数を 整数値
指定する
colspan 連結する横の列数を 整数値
指定する
nowrap セル内での自動改行を
禁止する
width 幅を指定する ピクセル、パーセント
height 高さを指定する ピクセル、パーセント
bgcolor 背景色を指定する カラーネーム、
カラーコード
align 行のセル内での横の left：左寄せ
配置を指定する center：センタリング right：右寄せ
valign 行のセル内での縦の top：上ぞろえ
配置を指定する middle：中央 bottom：下ぞろえ baseline：ベース
ラインにそろえる
<th 属性＝"値"> 〜 </th>
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
<td>Single</td>
</tr>
<tr bgcolor="#ccffff">
<td>REPORT FROM IRON MOUNTAIN</td>
<td>2001.8.10</td>
<td>Album</td>
</tr>
</table>
表示例
表の見出し項目を記述します。<tr>〜</tr>内に、<th>〜</th>で見 出しに当たる項目を記述します。デフォルトで太字、セル内センタリン グで表示されます。
また、セル内でのテキストの位置は、align、valign属性で指定すること ができます。align属性でセル内での横の位置を、valign属性でセル内 での縦の位置を指定します。
解説
参照項目 ■table（P.45） ■tr（P.47） ■td（P.51）
tr要素の子要素
表の項目を記述する 役割・機能
td
Win･････5.5/6 Mac･････････5 Win･･････････7 Mac･････････7 Win･････7/8.5 Mac･･･････1/2
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
記述例 <table border="1" bordercolor="#0099cc">
<tr bgcolor="#0099cc">
<th>タイトル</th>
<th>発売日</th>
<th>種類</th>
</tr>
<tr bgcolor="#ccffff">
<td height="50">MUSICAL FROM CHAOS</td>
<td>2000.6.25</td>
<td rowspan="2">DVD</td>
</tr>
<tr bgcolor="#ccffff">
<td height="50">DCPRG & ROVO PAN-AMERICAN BEEF STAKE ART FEDERATION'S /SINO</td>
属 性 概 要 指定可能な値
rowspan 結合する縦の行数を 整数値
指定する
colspan 結合する横の列数を 整数値
指定する
nowrap セル内での自動改行を
禁止する
width 幅を指定する ピクセル、パーセント
height 高さを指定する ピクセル、パーセント
bgcolor 背景色を指定する カラーネーム、
カラーコード
align 行のセル内での横の left：左寄せ
配置を指定する center：センタリング right：右寄せ
valign 行のセル内での縦の top：上ぞろえ
配置を指定する middle：中央 bottom：下ぞろえ baseline：ベース
ラインにそろえる
<td 属性＝"値"> 〜 </td>