文章の整形・修飾

■文章の整形・修飾（カテゴリー）
　※「文章の整形・修飾」目次
　※番号付リスト <ol>
　※番号無しリスト <ul>
　※定義リスト要素 <dl>
　※リストの入れ子
　※文字のスタイル
　※フォントサイズ
　※カラーフォント
　※<BIG>, <SMALL> タグ
　※罫線 <HR> と 改行 <BR>
　※等幅フォントとプロポーショナルフォントについて

（１）"ＭＳ ゴシック"と"ＭＳＰ ゴシック"で、等幅フォントとプロポーショナルフォントの比較をしてみます。（１）が等幅フォントで、（２）がプロポーショナルフォントです。lilililil

（２）"ＭＳ ゴシック"と"ＭＳＰ ゴシック"で、等幅フォントとプロポーショナルフォントの比較をしてみます。（１）が等幅フォントで、（２）がプロポーショナルフォントです。lilililil

HTMLには標準でブラウザのウィンドウ幅だけ罫線を引くタグが用意されています。この罫線は節が変わる時やタイトルと本文を分ける場合などに用いられ、<HR>タグを使用します。

HTML文書は改行を明示的に指定しなければなりません。HTML文書で明示的に改行するには <BR> タグを用います。 改行は行間に余分なスペースを入れずに強制的に改行を行います。この<BR>タグは書いた回数だけ改行されます。

２行分改行<BR><BR>
１行分改行<BR>
改行後の文章

２行分改行

１行分改行
改行後の文章

HTML 3.0のタグとして、フォントの大きさを指定するタグとして、フォントの サイズを大きくする<BIG>タグと、フォントのサイズを小さくする <SMALL>タグがサポートされました。フォントの大きさを変更するテキ ストを開始タグと終了タグで囲みます。なお、<BIG>、 <SMALL>タグは入れ子にすることが可能です。

<UL>
  <LI> Normal Font
  <LI> <BIG>Big Font</BIG>
  <LI> <SMALL>small font</SMALL>
  <LI> <BIG>Big <BIG>BIG <BIG>FONT</BIG></BIG></BIG>
  <LI> <SMALL>small <SMALL>small font</SMALL></SMALL>
  <LI> <BIG>Big Font <SMALL>Small font</SMALL></BIG>
  <LI> <SMALL>small Font <BIG>Big font</BIG></SMALL>
</UL>

• Normal Font
• Big Font
• small font
• Big BIG FONT
• small small font
• Big Font Small font
• small Font Big font

色は#RRGGBB の16進数で赤緑青の三原色を指定 するか、色の名称を指定します。

<FONT> タグはフォントサイズを変更する場合に用います。サイズの有効な範囲は1〜7で指定します。デフォルトフォントサイズは3です。また、サイズに+または-を指定し、直前のフォントサイズの差分(+/-)で指定することもできます。

HTMLには明示的にフォントスタイルを指定する方法もあります。 文字スタイルタグは開始タグと終了タグを持っています。次の4つのタグが あります。ただしいくつかのタグはブラウザによっては表示されないこともありますのであまり多用しないようにしましょう。また、フォントスタイルは入れ子にする(複合フォント)こともできますが、これもブラウザによってはサポートしていない場合があります。

<B><I>アンダーライン付太文字<I><B>　　　　アンダーライン付太文字

リストは入れ子にすることができます。但し、入れ子は3レベルまでしかできないので注意して下さい。
どのリストも入れ子は可能で、異なるリストを入れ子しても構いません。

dl は Definition List（定義リスト）の略です。
<dl>〜</dl> の間に、<dt>で定義する用語を、<dd>で用語の説明を行います

<dl>
<dt>リスト要素　dl</dt>
<dd>dl は Definition List（定義リスト）の略</dd>
<dt>リスト要素　dt dd</dt>
<dd>dt；定義する用語を表示</dd>
<dd>dd；用語の説明を表示</dd>
</dl>

リスト要素　dl

dl は Definition List（定義リスト）の略

リスト要素　dt dd

dt；定義する用語を表示

dd；用語の説明を表示

■固有属性 compact
compact 属性を指定すると、項目名が短い場合、説明が自動的に項目名と同じ行に表示されるようになります。

固有属性 compact

リストを極力コンパクトな形式で表示

dl

固有属性 compact を指定すると、このように表示されます

<dl compact>
<dt>固有属性 compact</dt>
<dd>リストを極力コンパクトな形式で表示</dd>
<dt>dl</dt>
<dd>固有属性 compact を指定すると、このように表示されます</dd>
</dl>

<style type="text/css">
<!--
DT { margin-top: 10px; font-weight: bold; }
-->
</style>

◎ブラウザ表示例

font-weight: bold;

項目名を太字で表示

margin-top: 10px;

前の行と 指定したスペースを空けて表示

※属性
　　type；項目番号のタイプを指定
　　disc：黒丸
　　circle：白丸
　　square：四角

<ul>
<li>リスト要素　ul（順序の無いリスト）
<li>リストの各項目は li で記述
<li>デフォルトでは disc：黒丸 で表示
</ul>

<ul type="disc">
<li>リスト要素　ul（順序の無いリスト）
<li>type属性に「 type="disc"」を指定
</ul>

<ul type="circle">
<li>リスト要素　ul（順序の無いリスト）
<li>type属性に「 type="circle"」を指定
</ul>

<ul type="square">
<li>リスト要素　ul（順序の無いリスト）
<li>type属性に「 type="square"」を指定
</ul>

• リスト要素　ul（順序の無いリスト）
• リストの各項目は li で記述
• デフォルトでは disc：黒丸 で表示

• リスト要素　ul（順序の無いリスト）
• type属性に「 type="disc"」を指定

• リスト要素　ul（順序の無いリスト）
• type属性に「 type="circle"」を指定

• リスト要素　ul（順序の無いリスト）
• type属性に「 type="square"」を指定

■リストマークに画像を使用する

• リストマークに画像を使用する
• スタイルシートは下記参照

<style type="text/css">
<!--
ul {
list-style:none;
padding: 0px;
margin: 0px;
}
ul li {
padding:0px 2px 0px 12px;
margin: 5px 0px 5px 0px;
background:url(../image.gif) no-repeat top left;
}
-->
</style>