ホームページ作成講座 めもタグ

トップページ | ホームページ講座 | HTML | CSS | 素材作成 | リンク

トップページ > 初心者向けホームページ作成講座 > 罫線を引く/リストを作成する

罫線を引く/リストを作成する

spacer

罫線（水平線）で文章を区切る

罫線を引くには<HR>タグを使います。<BR>同様、終了タグなしで 使用します。
↓<HR>タグで引かれる罫線です。

記述例

<HTML>
<HEAD>
<TITLE>段落タグ</TITLE>
</HEAD>
<BODY>
…例えば写真1枚をパソコンに取り込んだとします。取り込んだ写真は1個の<BR> ファイルとなり、パソコン上から閲覧できます。<BR>
つまりファイルは、文字や画像情報のデータが入った１つの箱と思えばいいでしょう。
<HR>
フォルダとは、ファイルを格納する場所です。<BR>
例えば画像ファイルやテキスト(文字)ファイル等が一緒でなおかつ数が…
</BODY>
</HTML>

ブラウザでプレビュー

…例えば写真1枚をパソコンに取り込んだとします。取り込んだ写真は1個の
ファイルとなり、パソコン上から閲覧できます。
つまりファイルは、文字や画像情報のデータが入った１つの箱と思えばいいでしょう。
フォルダとは、ファイルを格納する場所です。
例えば画像ファイルやテキスト(文字)ファイル等が一緒でなおかつ数が…

オプションを指定することで、罫線の太さ・長さなどを変えることができ、これらは
組み合わせて使うことができます。（複数指定の区切りはお約束の半角スペースです）

size=""：罫線の太さ
width=""：罫線の長さ(ピクセル)
NOSHADE：罫線の影の有無
align=""：罫線の位置(左：left　中央：center　右：right)：

記述例

<HTML>
<HEAD>
<TITLE>段落タグ</TITLE>
</HEAD>
<BODY>
罫線を太くしました
<HR size="10">
250ピクセルの罫線↓
<HR width="250">
影なし罫線↓
<HR NOSHADE>
罫線の位置は、罫線の長さを併用して表示してます
<HR width="150" align="right">
<HR width="150" align="center">
<HR width="150" align="left">
</BODY>
</HTML>

ブラウザでプレビュー

罫線を太くしました
250ピクセルの罫線↓
影なし罫線↓
罫線の位置は、罫線の長さを併用して表示してます

spacer

リストを作成する

リストを作成するには<OL>〜</OL>
または<UL>〜</UL>タグ内に
<LI>タグと項目を記述します。

<OL>は番号なしのリスト
<UL>は番号ありのリストです。

記述例

<HTML>
<HEAD>
<TITLE>段落タグ</TITLE>
</HEAD>
<BODY>
番号なしリストです
<UL>
<LI>Windows3.1</LI>
<LI>Windows95</LI>
<LI>Windows98</LI>
<LI>WindowsME</LI>
<LI>WindowsXP</LI>
</UL>

番号ありリストです
<OL>
<LI>Wii</LI>
<LI>DS</LI>
<LI>Game Cube</LI>
<LI>Nintendo 64</LI>
</OL>
</BODY>
</HTML>

ブラウザでプレビュー

番号なしリストです
  • Windows3.1
  • Windows95
  • Windows98
  • WindowsME
  • WindowsXP
番号ありリストです
  1. Wii
  2. DS
  3. Game Cube
  4. Nintendo 64

spacer

リストの見出しを変える

<LI>にオプションを指定することで
リストの見出しを変えることができます。

番号なしリスト用
type="disk"：●
type="square"：■
type="circle"：○

番号ありリスト用
type="A"：英大文字(A〜Z)
type="a"：英小文字(a〜z)
type="I"：ローマ数字大文字(I・IV等)
type="i"：ローマ数字小文字(i・iv等)
type="1"：数字

記述例

<HTML>
<HEAD>
<TITLE>タイトルを入れてください</TITLE>
</HEAD>
<BODY>
番号なしリストの見出しを変えます。
<UL>
<LI>Windows3.1</LI>
<LI type="circle">Windows95</LI>
<LI type="square">Windows98</LI>
<LI type="disk">WindowsME</LI>
</UL>

番号ありリストです。<BR>
(ブラウザによっては、指定した項目より下の項目も変わる場合があります。)
<OL>
<LI type="A">野球</LI>
<LI>テニス</LI>
<LI type="a">ボーリング</LI>
<LI>サッカー</LI>
<LI type="I">ラグビー</LI>
<LI>バレー</LI>
<LI type="i">卓球</LI>
<LI>バスケット</LI>
<LI type="1">ゴルフ</LI>
<LI>ドッジボール</LI>
</OL>
</BODY>
</HTML>

ブラウザでプレビュー

番号なしリストの見出しを変えます。
  • Windows3.1
  • Windows95
  • Windows98
  • WindowsME
番号ありリストです。
(ブラウザによっては、指定した項目より下の項目も変わる場合があります。)
  1. 野球
  2. テニス
  3. ボーリング
  4. サッカー
  5. ラグビー
  6. バレー
  7. 卓球
  8. バスケット
  9. ゴルフ
  10. ドッジボール

spacer

リスト開始番号指定

番号付きリストで、開始番号を指定することができます。
指定には <LI value="開始番号">で行います。

記述例

<HTML>
<HEAD>
<TITLE>タイトルを入れてください</TITLE>
</HEAD>
<BODY>
<OL>
<LI value="4">Windows3.1</LI>
<LI>Windows95</LI>
<LI>Windows98</LI>
<LI>WindowsME</LI>
<LI value="10">WindowsXP</LI>
<LI>WindowsMCE</LI>
</OL>
</BODY>
</HTML>

ブラウザでプレビュー

  1. Windows3.1
  2. Windows95
  3. Windows98
  4. WindowsME
  5. WindowsXP
  6. WindowsMCE

前の講座：文字色を指定する/文字を修飾する | 次の講座：画像を表示させる | トップページ | ページの一番上へ▲