.HTML 背景や配置・配色など リスト他 '98. 2. 8
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .ActiveX.  ---  .名前. _一覧
[ページの背景等]  ページの背景  文字の配色(全体)  全体の配置(マージン)  文字・画像等の配置( DIV )   区切り線( HR )   左右方向の分割配置( MULTICOL )  LAYER → [フレーム] 
[リスト等]  リスト  番号付リスト  アイコンを指定するリスト  定義型リスト  具体例  備考
その他  そのまま表示  引用文  中央寄せ表示  右・左寄せ表示  タイトル・BODYの上書
 BG=Big-B060.gif img=Big-RNGO.gif
T リスト表示
箇条書き の表示をします。
<P> ← 勝手に 段落として表示されます。
<UL>何のために?<BR>
<LI>ホームページを表示するためのブラウザは、長い文章でも自動的に画面の 幅に合わせて表示してくれます。<BR>
<LI>しかし、文章はいつでも行の左端から表示されます。<BR>
リスト表示を使えば、その項目に合わせて、きちんと右にずらして表示されます。<BR>
<LI>ここの文章はリストによって表示されています。( ウィンドウの幅を狭くしてみると、確認できます。) <BR>
</UL> </P> ← 勝手に 段落として表示されます。
<LI>項目  このようにして、項目をいくつか設定します。
これらを、表示方法を指定するタグの中に挿入します。

<P><UL>リストの内容</UL></P>
 中に書いた項目の先頭に ・ が表示されます。
<P><DIR>リスト内容</DIR></P>
<P><MENU>リスト内容</MENU></P>

T 番号付リスト
<LI> を次のタグの中に書くと、 ではなく、番号が表示されます。
<P><OL>番号付リストの内容</OL></P>
 項目の先頭に 番号 が表示されます。
リストは、一つの段落として表示されます。( <P> が付けられます。)
中の項目には TYPE=A のように、先頭番号または記号も指定できます。
<LI TYPE=A>  A/a/I/i/3


T アイコン付リスト
Netscapeの場合は次のように・付リストの見出し記号を指定できます。
<LI TYPE=disk>  disk/circle/square

T 定義型リスト ( 番号などを付けないリスト )
これは、見出し付き文書を表示するためのものです。
<DT>見出しの文  このようにして、見出し文を設定します。
<DD>文章  このようにして、見出し以下の文章を書きます。
「見出し文」と「文章」は、行の先頭から表示するか、右側にずらして表示するかという違いだけです。

このようにして、「見出し文」と「文章」をいくつか作り、表示方法を指定するタグの中に挿入します。
<DL>定義型リストの内容</DL>

リストは一つの段落として扱われます。つまり、リストの上下には<P>と</P>が自動的に付加されて表示されます。


T 具体例

番号付リストの例。
OL LI の例 <OL> <LI>AA <LI>AA <LI>AA </OL> OL START=3 の例 <OL START=3> <LI>AA <LI>AA <LI>AA </OL>
上記の表示例
  1. AA
  2. AA
  3. AA
上記の表示例
  1. AA
  2. AA
  3. AA
  ・付きリストの例。
LI の例 <UL> <LI>AA <LI>AA <LI>AA </UL>
上記の表示例
  • AA
  • AA
  • AA
  定義型リストの例。
<DL> <DT>TT <DD>DD <DD>DD <DT>TT <DD>DD </DL>
TT
DD  
DD
TT
DD
TYPE を使用した例。
LI TYPE=A の例 <OL TYPE=A> <LI>AA <LI>AA <LI>AA </OL> LI TYPE=a の例 <OL TYPE=a> <LI>AA <LI>AA <LI>AA </OL> LI TYPE=I の例 <OL TYPE=I> <LI>AA <LI>AA <LI>AA </OL> LI TYPE=i の例 <OL TYPE=i> <LI>AA <LI>AA <LI>AA </OL> なお、 <LI TYPE=A>AA <LI TYPE=a>AA <LI TYPE=I>AA <LI TYPE=i>AA でも可。
上記の表示例
  1. AA
  2. AA
  3. AA
上記の表示例
  1. AA
  2. AA
  3. AA
上記の表示例
  1. AA
  2. AA
  3. AA
上記の表示例
  1. AA
  2. AA
  3. AA


T 備考
IExplore と Netscape での、表示の違い。
TYPE を指定した場合。
IExplore  Netscape
 I.AA
 II.AA
 III.AA
I.AA
II.AA
III.AA

表の中に入れた場合。
IExplore リストの上の空行が残る。
Netscape リストの下、または上下に空行が残る。

IExplore では、行を右寄せした分が計算されていないないようです。
表の右側に右寄せした分の余白がなければ、行の右端は表の外にはみ出してしまいます。

T そのまま表示 (1) . . . 文字やスペースなど。
<P> <PRE>  ---ここが1行目。何も書かなくても、ここも改行されます。<BR>
 この中では、元の文書の 改行,スペース,タブ が、そのまま表示されます。
1行の文章が長くても、自動的に折り返し表示されません。(今表示されている画面の幅を狭くすると確められます。)
<B> <FONT> などのタグは、タグとして機能します。
この範囲の最初と最後は、自動的に段落記号<P>が付加されます。
ただし、この例のように表の中に入れた場合には、下の空行だけが残ります。
表示される文字は、現在表示されている書体です。
文書をそのまま表示させたり、絵文字を使って地図を書くときなどに便利です。
</PRE></P>
メモ : MS ゴシックの全角文字は、半角2文字分よりも少し狭い幅です。
混ぜて使うときは要注意です。
備考 4.0
デフォルトでは<PRE>〜</PRE>の中は 固定幅フォントです。
IExprore では、次のように 可変幅フォントも使用できます。
<PRE><FONT FACE="MS Pゴシック">〜</FONT></PRE>

 そのまま表示 (2) . . . タグなどもそのまま表示。
<P> <XMP>
PRE タグとほぼ同じです。 ただし、XMP タグ以外の、<FONT>などのタグや、<!----> などもそのまま表示されます。 表示される文字は、現在表示されている書体です。
</XMP> </P>
<P> <PLAINTEXT>
前の XMP タグとほぼ同じです。(ただし、XMP タグは有効。)
Netscape3.0では、</PLAINTEXT>が働かない場合があるようです。
そのため、ここでは<PLAINTEXT>を使っていません。
</PLAINTEXT> </P>
<P> <LISTING>
前の XMP タグとほぼ同じです。(ただし、XMP タグは有効。) 表示される文字は、現在表示されている書体です。
</LISTING> </P>


T 引用文 (桁下げ表示)
<P> <BLOCKQUOTE>
 この範囲の文章は、他の文章よりも1行の幅が狭くなります。
 引用文の中に、さらに引用文を入れる事ができます。
 この範囲の前後には、自動的に段落記号<P>が付加されます。
 ただし、このテキスト例のように、表の中に入れた場合には、段落記号<P>は付加されません。
 (Netscape3.0では 表の中に入れても、下に空行が残ります。)
</BLOCKQUOTE> </P>

T 中央表示 (左右の中央に表示)
文章・画像・表などを、左右の中央に表示します。
最初と最後は改行しなくても、段落として表示されます。
<P><CENTER>
 (中央に表示する内容) 
</CENTER></P>

T 左右位置指定表示 (左右の表示を指定)
<P><DIV ALIGN="LEFT">   LEFT/CENTER/RIGHT
(表示する内容)
</DIV></P>
ALIGN=CENTER を指定した場合は、上記 <CENTER> と同じになります。



T タイトルの上書き
 タイトルはいくつでも書くことができ、順番に表示されます。
 大きな画像を使ったページなどでは有効かもしれません。
<HTML> <HEAD><TITLE>タイトル1</TITLE></HEAD>
<BODY>
 (本文の内容)
<TITLE>タイトル2</TITLE>
</BODY>
<TITLE>タイトル3</TITLE>
</HTML>

BODY の上書き
 BODY タグを複数書いた場合も、順番に上書きされます。
 一見すると最後に書いた内容だけが採用されているように見えますが、複数のマーキーの背景色をまとめて変更する場合に利用できます。

T
     
    mtoga@sannet.ne.jp    登録日 '96. 6.15
  URL : http://www.page.sannet.ne.jp/mtoga/index.html